Fix misspelling

2025-12-30 14:42:49 +00:00 · 2024-05-13 09:20:46 -05:00
142 changed files with 13262 additions and 14426 deletions
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -1,9 +1,13 @@
 name: Build

-on: [push]
+on:
+  push:
+    tags:
+      - "v*"
+  workflow_dispatch:

 jobs:
-  build:
+  CI:
    name: 🔨🚀 Build and deploy
    runs-on: ubuntu-latest
    steps:
@@ -17,34 +21,30 @@ jobs:
      - name: ⏬ Install Python dependencies
        run: pip install -r requirements.txt

-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          version: 9
-      - name: 🐉 Use Node.js 22.4.x
+      - name: 🐉 Use Node.js 18.16.x
        uses: actions/setup-node@v3
        with:
-          node-version: 22.4.x
-          cache: "pnpm"
+          node-version: 18.16.x
+          cache: "npm"
      - name: ⏬ Install Node dependencies
-        run: pnpm install
+        run: npm ci

      - name: 🔥 Optimize icon font
-        run: pnpm minify-icons
+        run: npm run minify-icons
      - name: 🔨 Build site
-        run: pnpm build
+        run: npm run build

-      - name: Setup SSH
-        run: |
-          install -m 600 -D /dev/null ~/.ssh/id_rsa
-          echo "${{ secrets.DEPLOY_SSH_KEY }}" > ~/.ssh/id_rsa
-          echo "${{ secrets.DEPLOY_KNOWN_HOSTS }}" > ~/.ssh/known_hosts
-
-      - name: Publish Stable
-        if: ${{ github.ref == 'refs/tags/v*' }}
-        run: rsync -rav --mkpath --delete build/ deploy@charachorder.io:/home/deploy/www/
-
-      - name: Publish Branch
-        run: rsync -rav --mkpath --delete build/ deploy@charachorder.io:/home/deploy/ref/${GITHUB_REF##*/}
-      - name: Publish Commit
-        run: rsync -rav --mkpath --delete build/ deploy@charachorder.io:/home/deploy/ref/${{ github.sha }}
+      - name: 📦 Upload build artifacts
+        uses: actions/upload-artifact@v3.1.2
+        with:
+          name: build
+          path: build
+      - name: Disable jekyll
+        run: touch build/.nojekyll
+      - name: Custom domain
+        run: echo 'manager.charachorder.com' > build/CNAME
+      - run: git config user.name github-actions
+      - run: git config user.email github-actions@github.com
+      - run: git --work-tree build add --all
+      - run: git commit -m "Automatic Deploy action run by github-actions"
+      - run: git push origin HEAD:gh-pages --force
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -29,7 +29,7 @@ You may need to run through some additional setup to get Rust running inside Int
 - Python >=3.10
 - Rust Stable (For Tauri Development)

-I know, python in JS projects is extremely annoying. Unfortunately,
+I know, python in JS projects is extremely annoying, unfortunately,
 it seems to be the only platform that offers a functional
 way to subset variable woff2 fonts with ligatures.

--- a/flake.lock
+++ b/flake.lock
@@ -5,11 +5,29 @@
        "systems": "systems"
      },
      "locked": {
-        "lastModified": 1710146030,
-        "narHash": "sha256-SZ5L6eA7HJ/nmkzGG7/ISclqe6oZdOZTNoesiInkXPQ=",
+        "lastModified": 1689068808,
+        "narHash": "sha256-6ixXo3wt24N/melDWjq70UuHQLxGV8jZvooRanIHXw0=",
        "owner": "numtide",
        "repo": "flake-utils",
-        "rev": "b1d9ab70662946ef0850d488da1c9019f3a9752a",
+        "rev": "919d646de7be200f3bf08cb76ae1f09402b6f9b4",
+        "type": "github"
+      },
+      "original": {
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "type": "github"
+      }
+    },
+    "flake-utils_2": {
+      "inputs": {
+        "systems": "systems_2"
+      },
+      "locked": {
+        "lastModified": 1681202837,
+        "narHash": "sha256-H+Rh19JDwRtpVPAWp64F+rlEtxUWBAQW28eAi3SRSzg=",
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "rev": "cfacdce06f30d2b68473a46042957675eebb3401",
        "type": "github"
      },
      "original": {
@@ -20,11 +38,11 @@
    },
    "nixpkgs": {
      "locked": {
-        "lastModified": 1722415718,
-        "narHash": "sha256-5US0/pgxbMksF92k1+eOa8arJTJiPvsdZj9Dl+vJkM4=",
+        "lastModified": 1689752456,
+        "narHash": "sha256-VOChdECcEI8ixz8QY+YC4JaNEFwQd1V8bA0G4B28Ki0=",
        "owner": "NixOS",
        "repo": "nixpkgs",
-        "rev": "c3392ad349a5227f4a3464dce87bcc5046692fce",
+        "rev": "7f256d7da238cb627ef189d56ed590739f42f13b",
        "type": "github"
      },
      "original": {
@@ -36,11 +54,11 @@
    },
    "nixpkgs_2": {
      "locked": {
-        "lastModified": 1718428119,
-        "narHash": "sha256-WdWDpNaq6u1IPtxtYHHWpl5BmabtpmLnMAx0RdJ/vo8=",
+        "lastModified": 1681358109,
+        "narHash": "sha256-eKyxW4OohHQx9Urxi7TQlFBTDWII+F+x2hklDOQPB50=",
        "owner": "NixOS",
        "repo": "nixpkgs",
-        "rev": "e6cea36f83499eb4e9cd184c8a8e823296b50ad5",
+        "rev": "96ba1c52e54e74c3197f4d43026b3f3d92e83ff9",
        "type": "github"
      },
      "original": {
@@ -59,14 +77,15 @@
    },
    "rust-overlay": {
      "inputs": {
+        "flake-utils": "flake-utils_2",
        "nixpkgs": "nixpkgs_2"
      },
      "locked": {
-        "lastModified": 1722391647,
-        "narHash": "sha256-JTi7l1oxnatF1uX/gnGMlRnyFMtylRw4MqhCUdoN2K4=",
+        "lastModified": 1690942540,
+        "narHash": "sha256-eafSSO3Y+/TFuy+CHKyolYfGvC33IAWNx4W2NA7LfZM=",
        "owner": "oxalica",
        "repo": "rust-overlay",
-        "rev": "0fd4a5d2098faa516a9b83022aec7db766cd1de8",
+        "rev": "aa3994f054038262df55122dfa552b9eab71a994",
        "type": "github"
      },
      "original": {
@@ -89,6 +108,21 @@
        "repo": "default",
        "type": "github"
      }
+    },
+    "systems_2": {
+      "locked": {
+        "lastModified": 1681028828,
+        "narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=",
+        "owner": "nix-systems",
+        "repo": "default",
+        "rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e",
+        "type": "github"
+      },
+      "original": {
+        "owner": "nix-systems",
+        "repo": "default",
+        "type": "github"
+      }
    }
  },
  "root": "root",
--- a/flake.nix
+++ b/flake.nix
@@ -4,75 +4,56 @@
    rust-overlay.url = "github:oxalica/rust-overlay";
    flake-utils.url = "github:numtide/flake-utils";
  };
-  outputs =
-    {
-      self,
-      nixpkgs,
-      flake-utils,
-      rust-overlay,
-    }:
-    flake-utils.lib.eachDefaultSystem (
-      system:
-      let
-        overlays = [ (import rust-overlay) ];
-        pkgs = import nixpkgs { inherit system overlays; };
-        rust-bin = pkgs.rust-bin.stable.latest.default.override {
-          extensions = [
-            "rust-src"
-            "rust-std"
-            "clippy"
-            "rust-analyzer"
-          ];
-        };
-        fontMin = pkgs.python311.withPackages (
-          ps:
-          with ps;
-          [
-            brotli
-            fonttools
-          ]
-          ++ (with fonttools.optional-dependencies; [ woff ])
-        );
-        tauriPkgs = nixpkgs.legacyPackages.${system};
-        libraries = with tauriPkgs; [
-          webkitgtk
-          gtk3
-          cairo
-          gdk-pixbuf
-          glib
+  outputs = {
+    self,
+    nixpkgs,
+    flake-utils,
+    rust-overlay,
+  }:
+    flake-utils.lib.eachDefaultSystem (system: let
+      overlays = [(import rust-overlay)];
+      pkgs = import nixpkgs {inherit system overlays;};
+      rust-bin = pkgs.rust-bin.stable.latest.default.override {
+        extensions = ["rust-src" "rust-std" "clippy" "rust-analyzer"];
+      };
+      fontMin = pkgs.python311.withPackages (ps: with ps; [brotli fonttools] ++ (with fonttools.optional-dependencies; [woff]));
+      tauriPkgs = nixpkgs.legacyPackages.${system};
+      libraries = with tauriPkgs; [
+        webkitgtk
+        gtk3
+        cairo
+        gdk-pixbuf
+        glib
+        dbus
+        openssl_3
+        librsvg
+      ];
+      packages =
+        (with pkgs; [
+          nodejs_18
+          rust-bin
+          fontMin
+        ])
+        ++ (with tauriPkgs; [
+          curl
+          wget
+          pkg-config
          dbus
          openssl_3
+          glib
+          gtk3
+          libsoup
+          webkitgtk
          librsvg
-        ];
-        packages =
-          (with pkgs; [
-            nodejs_22
-            nodePackages.pnpm
-            rust-bin
-            fontMin
-          ])
-          ++ (with tauriPkgs; [
-            curl
-            wget
-            pkg-config
-            dbus
-            openssl_3
-            glib
-            gtk3
-            libsoup
-            webkitgtk
-            librsvg
-            # serial plugin
-            udev
-          ]);
-      in
-      {
-        devShell = pkgs.mkShell {
-          buildInputs = packages;
-          shellHook = ''
-            export LD_LIBRARY_PATH=${pkgs.lib.makeLibraryPath libraries}:$LD_LIBRARY_PATH
-          '';
-        };
-      }
-    );
+          # serial plugin
+          udev
+        ]);
+    in {
+      devShell = pkgs.mkShell {
+        buildInputs = packages;
+        shellHook = ''
+          export LD_LIBRARY_PATH=${pkgs.lib.makeLibraryPath libraries}:$LD_LIBRARY_PATH
+        '';
+      };
+    });
 }
--- a/icons.config.js
+++ b/icons.config.js
@@ -4,7 +4,6 @@ const config = {
    "node_modules/@fontsource-variable/material-symbols-rounded/files/material-symbols-rounded-latin-full-normal.woff2",
  outputPath: "src/lib/assets/icons.min.woff2",
  icons: [
-    "deployed_code_update",
    "adjust",
    "add",
    "piano",
@@ -19,8 +18,6 @@ const config = {
    "update",
    "offline_pin",
    "warning",
-    "dangerous",
-    "check",
    "cable",
    "person",
    "sync",
@@ -68,8 +65,6 @@ const config = {
    "bolt",
    "undo",
    "redo",
-    "replay",
-    "reply",
    "navigate_before",
    "navigate_next",
    "print",
@@ -96,23 +91,9 @@ const config = {
    "upload_2",
    "stat_minus_2",
    "stat_2",
-    "send",
-    "more_horiz",
-    "add_reaction",
-    "stop",
    "description",
    "add_circle",
    "refresh",
-    "tune",
-    "edit_document",
-    "chat",
-    "account_circle",
-    "experiment",
-    "code",
-    "dictionary",
-    "developer_board",
-    "developer_board_off",
-    "memory",
  ],
  codePoints: {
    speed: "e9e4",
@@ -131,9 +112,6 @@ const config = {
    upload_2: "ff52",
    stat_minus_2: "e69c",
    stat_2: "e699",
-    routine: "e20c",
-    experiment: "e686",
-    dictionary: "f539",
  },
 };

--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,12 +1,8 @@
 {
  "name": "charachorder-device-manager",
-  "version": "2.2.3",
+  "version": "1.5.1",
  "license": "AGPL-3.0-or-later",
  "private": true,
-  "engines": {
-    "node": ">=22.4",
-    "pnpm": ">=9.4"
-  },
  "repository": {
    "type": "git",
    "url": "https://github.com/CharaChorder/DeviceManager.git"
@@ -34,64 +30,52 @@
    "typesafe-i18n": "typesafe-i18n"
  },
  "devDependencies": {
-    "@codemirror/autocomplete": "^6.18.2",
-    "@codemirror/commands": "^6.7.1",
+    "@codemirror/autocomplete": "^6.15.0",
+    "@codemirror/commands": "^6.3.3",
    "@codemirror/lang-javascript": "^6.2.2",
-    "@codemirror/language": "^6.10.3",
+    "@codemirror/language": "^6.10.1",
    "@codemirror/state": "^6.4.1",
-    "@codemirror/view": "^6.34.1",
-    "@fontsource-variable/material-symbols-rounded": "^5.1.3",
-    "@fontsource-variable/noto-sans-mono": "^5.1.0",
-    "@lezer/highlight": "^1.2.1",
-    "@material/material-color-utilities": "^0.3.0",
-    "@melt-ui/pp": "^0.3.2",
-    "@melt-ui/svelte": "^0.86.0",
+    "@fontsource-variable/material-symbols-rounded": "^5.0.27",
+    "@fontsource-variable/noto-sans-mono": "^5.0.19",
+    "@material/material-color-utilities": "^0.2.7",
    "@modyfi/vite-plugin-yaml": "^1.1.0",
-    "@sveltejs/adapter-static": "^3.0.6",
-    "@sveltejs/kit": "^2.7.5",
-    "@sveltejs/vite-plugin-svelte": "^4.0.0",
-    "@tauri-apps/api": "^1.6.0",
-    "@tauri-apps/cli": "^1.6.0",
-    "@types/dom-view-transitions": "^1.0.5",
+    "@sveltejs/adapter-static": "^2.0.3",
+    "@sveltejs/kit": "^1.30.4",
+    "@sveltejs/vite-plugin-svelte": "^2.5.3",
+    "@tauri-apps/api": "^1.5.3",
+    "@tauri-apps/cli": "^1.5.11",
+    "@types/dom-view-transitions": "^1.0.4",
    "@types/flexsearch": "^0.7.6",
-    "@types/w3c-web-serial": "^1.0.7",
+    "@types/w3c-web-serial": "^1.0.6",
    "@types/w3c-web-usb": "^1.0.10",
-    "@types/wicg-file-system-access": "^2023.10.5",
-    "@vite-pwa/sveltekit": "^0.6.6",
-    "autoprefixer": "^10.4.20",
+    "@vite-pwa/sveltekit": "^0.2.10",
+    "autoprefixer": "^10.4.19",
    "codemirror": "^6.0.1",
-    "cypress": "^13.13.2",
-    "d3": "^7.9.0",
-    "esptool-js": "^0.4.7",
+    "cypress": "^13.7.2",
    "flexsearch": "^0.7.43",
-    "fontkit": "^2.0.4",
-    "glob": "^11.0.0",
-    "jsdom": "^25.0.1",
-    "matrix-js-sdk": "^34.9.0",
+    "fontkit": "^2.0.2",
+    "glob": "^10.3.12",
+    "jsdom": "^22.1.0",
    "npm-run-all": "^4.1.5",
-    "prettier": "^3.3.3",
-    "prettier-plugin-svelte": "^3.2.7",
-    "rxjs": "^7.8.1",
-    "sass": "^1.80.6",
-    "socket.io-client": "^4.8.1",
-    "stylelint": "^16.10.0",
-    "stylelint-config-clean-order": "^6.1.0",
+    "prettier": "^3.2.5",
+    "prettier-plugin-svelte": "^3.2.2",
+    "sass": "^1.74.1",
+    "stylelint": "^15.11.0",
+    "stylelint-config-clean-order": "^5.4.2",
    "stylelint-config-html": "^1.1.0",
    "stylelint-config-prettier-scss": "^1.0.0",
-    "stylelint-config-recommended-scss": "^14.1.0",
-    "stylelint-config-standard-scss": "^13.1.0",
-    "svelte": "5.1.9",
-    "svelte-check": "^4.0.5",
-    "svelte-preprocess": "^6.0.3",
+    "stylelint-config-recommended-scss": "^13.1.0",
+    "stylelint-config-standard-scss": "^11.1.0",
+    "svelte": "^4.2.12",
+    "svelte-check": "^3.6.9",
+    "svelte-preprocess": "^5.1.3",
    "tippy.js": "^6.3.7",
    "typesafe-i18n": "^5.26.2",
-    "typescript": "^5.6.3",
-    "vite": "^5.4.10",
-    "vite-plugin-mkcert": "^1.17.6",
-    "vite-plugin-pwa": "^0.20.5",
-    "vitest": "^2.1.4",
-    "web-serial-polyfill": "^1.0.15",
-    "workbox-window": "^7.3.0"
+    "typescript": "^5.4.4",
+    "vite": "^4.5.3",
+    "vite-plugin-mkcert": "^1.17.5",
+    "vite-plugin-pwa": "^0.17.5",
+    "vitest": "^0.34.6"
  },
  "type": "module"
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "app"
-version = "2.2.3"
+version = "1.5.1"
 description = "A Tauri App"
 authors = ["Thea Schöbl <dev@theaninova.de>"]
 license = "AGPL-3"
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -6,7 +6,7 @@
    "devPath": "http://localhost:5173",
    "distDir": "../build"
  },
-  "package": { "productName": "amacc1ng", "version": "2.2.3" },
+  "package": { "productName": "amacc1ng", "version": "1.5.1" },
  "tauri": {
    "allowlist": { "all": false },
    "bundle": {
--- a/src/env.d.ts
+++ b/src/env.d.ts
@@ -14,8 +14,6 @@ interface ImportMetaEnv {
  readonly VITE_LEARN_URL: string;
  readonly VITE_LATEST_FIRMWARE: string;
  readonly VITE_STORE_URL: string;
-  readonly VITE_MATRIX_URL: string;
-  readonly VITE_FIRMWARE_URL: string;
 }

 interface ImportMeta {
--- a/src/i18n/de/index.ts
+++ b/src/i18n/de/index.ts
@@ -17,11 +17,11 @@ const de = {
    RELOAD: "Neu laden",
  },
  backup: {
-    TITLE: "Backup",
-    AUTO_BACKUP: "Auto-backup",
+    TITLE: "Lokale Kopie",
+    INDIVIDUAL: "Einzeldateien",
    DISCLAIMER:
      "Das Backup in diesem Browser gespeichert und bleibt nur auf diesem Computer.",
-    DOWNLOAD: "Alles",
+    DOWNLOAD: "Alles herunterladen",
    RESTORE: "Wiederherstellen",
  },
  modal: {
@@ -109,7 +109,7 @@ const de = {
  },
  configure: {
    chords: {
-      TITLE: "Bibliothek",
+      TITLE: "Akkorde",
      HOLD_KEYS: "Akkord halten",
      NEW_CHORD: "Neuer Akkord",
      DUPLICATE: "Akkord existiert bereits",
@@ -131,7 +131,7 @@ const de = {
      TITLE: "Layout",
    },
    settings: {
-      TITLE: "Gerät",
+      TITLE: "Einstellungen",
    },
  },
  plugin: {
--- a/src/i18n/en/index.ts
+++ b/src/i18n/en/index.ts
@@ -13,11 +13,11 @@ const en = {
    TITLE: "Update your device",
  },
  backup: {
-    TITLE: "Backup",
-    AUTO_BACKUP: "Auto-backup",
+    TITLE: "Local backup",
+    INDIVIDUAL: "Individual backups",
    DISCLAIMER:
-      "Whenever you connect this device to browser, a backup is made locally and kept only on your computer.",
-    DOWNLOAD: "Everything",
+      "A backup is made and stored in this browser, and always remains only on your computer.",
+    DOWNLOAD: "Download Everything",
    RESTORE: "Restore",
  },
  sync: {
@@ -108,7 +108,7 @@ const en = {
  },
  configure: {
    chords: {
-      TITLE: "Library",
+      TITLE: "Chords",
      HOLD_KEYS: "Hold chord",
      NEW_CHORD: "New chord",
      DUPLICATE: "Chord already exists",
@@ -130,7 +130,7 @@ const en = {
      TITLE: "Layout",
    },
    settings: {
-      TITLE: "Device",
+      TITLE: "Settings",
    },
  },
  plugin: {
--- a/src/lib/PageTransition.svelte
+++ b/src/lib/PageTransition.svelte
@@ -1,55 +0,0 @@
-<script lang="ts">
-  import { fly } from "svelte/transition";
-  import { afterNavigate, beforeNavigate } from "$app/navigation";
-  import { expoIn, expoOut } from "svelte/easing";
-  import type { Snippet } from "svelte";
-
-  let { children, routeOrder }: { children: Snippet; routeOrder: string[]; direction: } =
-    $props();
-
-  let inDirection = $state(0);
-  let outDirection = $state(0);
-  let outroEnd: undefined | (() => void) = $state(undefined);
-  let animationDone: Promise<void>;
-
-  let isNavigating = $state(false);
-
-  function routeIndex(route: string | undefined): number {
-    return routeOrder.findIndex((it) => route?.startsWith(it));
-  }
-
-  beforeNavigate((navigation) => {
-    const from = routeIndex(navigation.from?.url.pathname);
-    const to = routeIndex(navigation.to?.url.pathname);
-    if (from === -1 || to === -1 || from === to) return;
-    isNavigating = true;
-
-    inDirection = from > to ? -1 : 1;
-    outDirection = from > to ? 1 : -1;
-
-    animationDone = new Promise((resolve) => {
-      outroEnd = resolve;
-    });
-  });
-
-  afterNavigate(async () => {
-    await animationDone;
-    isNavigating = false;
-  });
-</script>
-
-{#if !isNavigating}
-  <main
-    in:fly={{ y: inDirection * 24, duration: 150, easing: expoOut }}
-    out:fly={{ y: outDirection * 24, duration: 150, easing: expoIn }}
-    onoutroend={outroEnd}
-  >
-    {@render children()}
-  </main>
-{/if}
-
-<style lang="scss">
-  main {
-    padding: 0;
-  }
-</style>
--- a/src/lib/assets/keymaps/ascii.yml
+++ b/src/lib/assets/keymaps/ascii.yml
@@ -9,193 +9,145 @@ actions:
      This action is unique in this way. Technically it is "printable", but it is not visible.
  39:
    id: "'"
-    keyCode: Quote
    title: Single Quote
  44:
    id: ","
-    keyCode: Comma
    title: Comma
  45:
    id: "-"
-    keyCode: Minus
    title: Minus
  46:
    id: "."
-    keyCode: Period
    title: Period
  47:
    id: "/"
-    keyCode: Slash
    title: Forward Slash
  48:
    id: "0"
-    keyCode: Digit0
    title: Zero
  49:
    id: "1"
-    keyCode: Digit1
    title: One
  50:
    id: "2"
-    keyCode: Digit2
    title: Two
  51:
    id: "3"
-    keyCode: Digit3
    title: Three
  52:
    id: "4"
-    keyCode: Digit4
    title: Four
  53:
    id: "5"
-    keyCode: Digit5
    title: Five
  54:
    id: "6"
-    keyCode: Digit6
    title: Six
  55:
    id: "7"
-    keyCode: Digit7
    title: Seven
  56:
    id: "8"
-    keyCode: Digit8
    title: Eight
  57:
    id: "9"
-    keyCode: Digit9
    title: Nine
  59:
    id: ";"
-    keyCode: Semicolon
    title: Semicolon
  61:
    id: "="
-    keyCode: Equal
    title: Equals
  91:
    id: "["
-    keyCode: BracketLeft
    title: Left Bracket
  92:
    id: "\\"
-    keyCode: Backslash
    title: Backslash
  93:
    id: "]"
-    keyCode: BracketRight
    title: Right Bracket
  96:
    id: "`"
-    keyCode: Backquote
    title: Backtick
  97:
    id: "a"
-    keyCode: KeyA
    title: Lowercase a
  98:
    id: "b"
-    keyCode: KeyB
    title: Lowercase b
  99:
    id: "c"
-    keyCode: KeyC
    title: Lowercase c
  100:
    id: "d"
-    keyCode: KeyD
    title: Lowercase d
  101:
    id: "e"
-    keyCode: KeyE
    title: Lowercase e
  102:
    id: "f"
-    keyCode: KeyF
    title: Lowercase f
  103:
    id: "g"
-    keyCode: KeyG
    title: Lowercase g
  104:
    id: "h"
-    keyCode: KeyH
    title: Lowercase h
  105:
    id: "i"
-    keyCode: KeyI
    title: Lowercase i
  106:
    id: "j"
-    keyCode: KeyJ
    title: Lowercase j
  107:
    id: "k"
-    keyCode: KeyK
    title: Lowercase k
  108:
    id: "l"
-    keyCode: KeyL
    title: Lowercase l
  109:
    id: "m"
-    keyCode: KeyM
    title: Lowercase m
  110:
    id: "n"
-    keyCode: KeyN
    title: Lowercase n
  111:
    id: "o"
-    keyCode: KeyO
    title: Lowercase o
  112:
    id: "p"
-    keyCode: KeyP
    title: Lowercase p
  113:
    id: "q"
-    keyCode: KeyQ
    title: Lowercase q
  114:
    id: "r"
-    keyCode: KeyR
    title: Lowercase r
  115:
    id: "s"
-    keyCode: KeyS
    title: Lowercase s
  116:
    id: "t"
-    keyCode: KeyT
    title: Lowercase t
  117:
    id: "u"
-    keyCode: KeyU
    title: Lowercase u
  118:
    id: "v"
-    keyCode: KeyV
    title: Lowercase v
  119:
    id: "w"
-    KeyCode: KeyW
    title: Lowercase w
  120:
    id: "x"
-    keyCode: KeyX
    title: Lowercase x
  121:
    id: "y"
-    keyCode: KeyY
    title: Lowercase y
  122:
    id: "z"
-    keyCode: KeyZ
    title: Lowercase z
  127:
    id: "DEL"
-    keyCode: Delete
    title: Delete
--- a/src/lib/assets/keymaps/chara-chorder.yml
+++ b/src/lib/assets/keymaps/chara-chorder.yml
@@ -70,9 +70,6 @@ actions:
    title: Primary Keymap
    icon: counter_1
    variant: left
-    description: |
-      Acts as a toggle if the same action is not assigned
-      to the target layer
  549:
    variantOf: 548
    <<: *primary_keymap
@@ -83,9 +80,6 @@ actions:
    title: Numeric Layer
    icon: counter_2
    variant: left
-    description: |
-      Acts as a toggle if the same action is not assigned
-      to the target layer
  551:
    variantOf: 550
    <<: *secondary_keymap
@@ -96,31 +90,11 @@ actions:
    title: Function Layer
    icon: counter_3
    variant: left
-    description: |
-      Acts as a toggle if the same action is not assigned
-      to the target layer
  553:
    variationOf: 552
    <<: *tertiary_keymap
    id: "KM_3_R"
    variant: right
-  558:
-    id: HOLD_COMPOUND
-    title: Dynamic Library
-    icon: layers
-    description: |
-      Allows for the activation & creation of dynamic chord libraries.
-      When included as part of a chord output,
-      that chord's input becomes the seed for a dynamic chord library,
-      and that library is activated.
-      Any new chords created while a dynamic library is active are established one level above its seed.
-  559:
-    id: RELEASE_COMPOUND
-    title: Base Library
-    icon: layers_clear
-    description: |
-      Re-activates your base chord library,
-      and deactivates any currently active dynamic chord library.
  576:
    id: ACTION_DELAY_1000
    icon: clock_loader_90
--- a/src/lib/assets/keymaps/scancode.yml
+++ b/src/lib/assets/keymaps/scancode.yml
@@ -422,8 +422,8 @@ actions:
    title: Keyboard Non-US \ and | (US English)
  357:
    id: "COMPOSE"
-    icon: menu
    title: Keyboard Application
+    description: Officially supported by Win, Unix, and Boot
  358:
    id: "POWER"
    keyCode: "Power"
@@ -944,99 +944,99 @@ actions:
    title: Keyboard Right GUI
  488:
    id: "KSC_E8"
-    icon: play_pause
    keyCode: "MediaPlayPause"
    title: Media Play Pause
+    description: Not required to be supported by any OS. Possibly deprecated.
  489:
    id: "KSC_E9"
-    icon: stop
    keyCode: "MediaStop"
    title: Media Stop CD
+    description: Not required to be supported by any OS. Possibly deprecated.
  490:
    id: "KSC_EA"
-    icon: skip_previous
    keyCode: "MediaTrackPrevious"
    title: Media Previous Song
+    description: Not required to be supported by any OS. Possibly deprecated.
  491:
    id: "KSC_EB"
-    icon: skip_next
    keyCode: "MediaTrackNext"
    title: Media Next Song
+    description: Not required to be supported by any OS. Possibly deprecated.
  492:
    id: "KSC_EC"
-    icon: eject
    keyCode: "Eject"
    title: Media Eject CD
-    description: MacOS only
+    description: Not required to be supported by any OS. Possibly deprecated.
  493:
    id: "KSC_ED"
-    icon: volume_up
    keyCode: "AudioVolumeUp"
    title: Media Volume Up
+    description: Not required to be supported by any OS. Possibly deprecated.
  494:
    id: "KSC_EE"
-    icon: volume_down
    keyCode: "AudioVolumeDown"
    title: Media Volume Down
+    description: Not required to be supported by any OS. Possibly deprecated.
  495:
    id: "KSC_EF"
-    icon: volume_off
    keyCode: "AudioVolumeMute"
    title: Media Mute
+    description: Not required to be supported by any OS. Possibly deprecated.
  496:
    id: "KSC_F0"
-    icon: language
-    title: Media Browser
+    title: Media www
+    description: Not required to be supported by any OS. Possibly deprecated.
  497:
    id: "KSC_F1"
    keyCode: "BrowserBack"
-    title: Media Browser Back
+    title: Media Back
+    description: Not required to be supported by any OS. Possibly deprecated.
  498:
    id: "KSC_F2"
    keyCode: "BrowserForward"
-    title: Media Browser Forward
+    title: Media Forward
+    description: Not required to be supported by any OS. Possibly deprecated.
  499:
    id: "KSC_F3"
    keyCode: "BrowserStop"
-    title: Media Browser Stop
-    description: Not supported on MacOS
+    title: Media Stop
+    description: Not required to be supported by any OS. Possibly deprecated.
  500:
    id: "KSC_F4"
-    icon: search
    keyCode: "BrowserSearch"
-    title: Media Browser Search
+    title: Media Find
+    description: Not required to be supported by any OS. Possibly deprecated.
  501:
    id: "KSC_F5"
-    icon: brightness_high
-    title: Media Brightness Up
+    title: Media Scroll Up
+    description: Not required to be supported by any OS. Possibly deprecated.
  502:
    id: "KSC_F6"
-    icon: brightness_low
-    title: Media Brightness Down
+    title: Media Scroll Down
+    description: Not required to be supported by any OS. Possibly deprecated.
  503:
    id: "KSC_F7"
    title: Media Edit
    description: Not required to be supported by any OS. Possibly deprecated.
  504:
    id: "KSC_F8"
-    icon: bedtime
    keyCode: "Sleep"
-    title: Media System Sleep
+    title: Media Sleep
    description: Not required to be supported by any OS. Possibly deprecated.
  505:
    id: "KSC_F9"
-    icon: routine
    keyCode: "WakeUp"
-    title: Media System Wake
-    description: Not supported on Windows
+    title: Media Coffee
+    description: Not required to be supported by any OS. Possibly deprecated.
  506:
    id: "KSC_FA"
    keyCode: "BrowserRefresh"
-    title: Media Browser Refresh
+    title: Media Refresh
+    description: Not required to be supported by any OS. Possibly deprecated.
  507:
    id: "KSC_FB"
-    title: Media Calculator
-    description: Not supported on MacOS
+    title: Media Calc
+    description: Not required to be supported by any OS. Possibly deprecated.
  508:
    id: "KSC_FC"
    description: Not required to be supported by any OS.
--- a/src/lib/assets/layouts/m4g.yml
+++ b/src/lib/assets/layouts/m4g.yml
@@ -1,37 +0,0 @@
-name: M4G
-col:
-  # Ring / Middle
-  - offset: [2, 0]
-    row:
-      - switch: { e: 26, n: 27, w: 28, s: 29 }
-      - switch: { e: 21, n: 22, w: 23, s: 24 }
-      - offset: [4, 0]
-        switch: { w: 66, n: 67, e: 68, s: 69 }
-      - switch: { w: 71, n: 72, e: 73, s: 74 }
-  - offset: [2, 0]
-    row:
-      - switch: { e: 41, n: 42, w: 43, s: 44 }
-      - switch: { e: 36, n: 37, w: 38, s: 39 }
-      - offset: [4, 0]
-        switch: { w: 81, n: 82, e: 83, s: 84 }
-      - switch: { w: 86, n: 87, e: 88, s: 89 }
-  # Pinkie / Index
-  - offset: [0, -3]
-    row:
-      - switch: { e: 31, n: 32, w: 33, s: 34 }
-      - offset: [4, 0]
-        switch: { e: 16, n: 17, w: 18, s: 19 }
-      - switch: { w: 61, n: 62, e: 63, s: 64 }
-      - offset: [4, 0]
-        switch: { w: 76, n: 77, e: 78, s: 79 }
-  # Thumbs
-  - row:
-      - offset: [5.5, 0.5]
-        switch: { e: 11, n: 12, w: 13, s: 14 }
-      - offset: [1, 0.5]
-        switch: { w: 56, n: 57, e: 58, s: 59 }
-  - row:
-      - offset: [4.5, -0.25]
-        switch: { e: 6, n: 7, w: 8, s: 9 }
-      - offset: [3, -0.25]
-        switch: { w: 51, n: 52, e: 53, s: 54 }
--- a/src/lib/assets/layouts/m4gr.yml
+++ b/src/lib/assets/layouts/m4gr.yml
@@ -1,37 +0,0 @@
-name: M4G
-col:
-  # Ring / Middle
-  - offset: [2, 0]
-    row:
-      - switch: { e: 26, n: 27, w: 28, s: 29 }
-      - switch: { e: 21, n: 22, w: 23, s: 24 }
-      - offset: [4, 0]
-        switch: { w: 66, n: 67, e: 68, s: 69 }
-      - switch: { w: 71, n: 72, e: 73, s: 74 }
-  - offset: [2, 0]
-    row:
-      - switch: { e: 41, n: 42, w: 43, s: 44 }
-      - switch: { e: 36, n: 37, w: 38, s: 39 }
-      - offset: [4, 0]
-        switch: { w: 81, n: 82, e: 83, s: 84 }
-      - switch: { w: 86, n: 87, e: 88, s: 89 }
-  # Pinkie / Index
-  - offset: [0, -3]
-    row:
-      - switch: { e: 31, n: 32, w: 33, s: 34 }
-      - offset: [4, 0]
-        switch: { e: 16, n: 17, w: 18, s: 19 }
-      - switch: { w: 61, n: 62, e: 63, s: 64 }
-      - offset: [4, 0]
-        switch: { w: 76, n: 77, e: 78, s: 79 }
-  # Thumbs
-  - row:
-      - offset: [5.5, 0.5]
-        switch: { e: 11, n: 12, w: 13, s: 14 }
-      - offset: [1, 0.5]
-        switch: { w: 56, n: 57, e: 58, s: 59 }
-  - row:
-      - offset: [4.5, -0.25]
-        switch: { e: 6, n: 7, w: 8, s: 9 }
-      - offset: [3, -0.25]
-        switch: { w: 51, n: 52, e: 53, s: 54 }
--- a/src/lib/assets/random-tips/en.json
+++ b/src/lib/assets/random-tips/en.json
@@ -13,7 +13,7 @@
  "GTM stands for Generative Text Menu and can be used to change your device's settings anywhere",
  "Ambidextrous Throwover (aka Mirror Mode) is a mode designed for one-handed use",
  "Chentry stands for character entry, or typing letter by letter on a chording enabled device",
-  "Chord modifiers are hard-coded (as of now) and can be used in the English language to add conjugations and more",
+  "Chord modifiers are hard-coded (as of now) and can be used in the English language to add conjucations and more",
  "You can use 'cursor warping' by adding arrow key actions to a chord, for example to chord '()' with the cursor in the middle of the brackets",
  "An arpeggiate is a single key press that modifies the preceding chord. Modifiers can be arpeggiated",
  "Some actions are marked as a 'macro', which means the output is generated by a key sequence rather than a pure key press. Be cautious with those, as they can affect other keys when held together!",
--- a/src/lib/backup/backup.ts
+++ b/src/lib/backup/backup.ts
@@ -96,12 +96,7 @@ export function restoreFromFile(
    case "backup": {
      const recent = file.history[0];
      if (!recent) return;
-      let backupDevice = recent[1].device;
-      if (backupDevice === "TWO") backupDevice = "ONE";
-      let currentDevice = get(serialPort)?.device;
-      if (currentDevice === "TWO") currentDevice = "ONE";
-
-      if (backupDevice !== currentDevice) {
+      if (recent[1].device !== get(serialPort)?.device) {
        alert("Backup is incompatible with this device");
        throw new Error("Backup is incompatible with this device");
      }
--- a/src/lib/backup/compat/legacy-chords.sample.json
+++ b/src/lib/backup/compat/legacy-chords.sample.json
@@ -0,0 +1,26 @@
+e + b + a,babe
+e + c + b,because
+f + e + c + a,face
+h + e + c + a,each
+i + d + ',I'd
+i + g + b,big
+i + g + e,give
+k + b + a,back
+k + e + a,take
+l + e + a,late
+l + e + d + a,lead
+l + f + e,feel
+l + g + e + a,large
+l + h + e,help
+l + i + a,Lia
+l + i + f,fill
+l + i + f + e,life
+l + i + g + b + a,gitlab
+l + k + i + e,like
+m + e + a,make
+m + i + ',I'm
+n + c + a,can
+n + d + a,and
+n + e + b,been
+n + e + b + a,enable
+n + e + d,end
--- a/src/lib/charrecorder/CharRecorder.svelte
+++ b/src/lib/charrecorder/CharRecorder.svelte
@@ -1,140 +0,0 @@
-<script lang="ts">
-  import { browser } from "$app/environment";
-  import { ReplayPlayer } from "./core/player.js";
-  import { ReplayStepper } from "./core/step.js";
-  import type { Replay } from "./core/types.js";
-  import { TextRenderer } from "./renderer/renderer.js";
-  import { setContext, type Snippet } from "svelte";
-
-  let {
-    replay,
-    cursor = false,
-    keys = false,
-    children,
-    ondone,
-  }: {
-    replay: ReplayPlayer | Replay;
-    cursor?: boolean;
-    keys?: boolean;
-    children?: Snippet;
-    ondone?: () => void;
-  } = $props();
-
-  let replayPlayer: ReplayPlayer | undefined = $state();
-  setContext("replay", {
-    get player() {
-      return replayPlayer;
-    },
-  });
-
-  let finalText = $derived(
-    replay instanceof ReplayPlayer
-      ? undefined
-      : new ReplayStepper(replay.keys).text.map((token) => token.text).join(""),
-  );
-
-  let svg: SVGSVGElement | undefined = $state();
-  let text: Text = (browser ? document.createTextNode("") : undefined)!;
-
-  let textRenderer: TextRenderer | undefined = $state();
-
-  $effect(() => {
-    if (!textRenderer) return;
-    textRenderer.showCursor = cursor;
-  });
-
-  $effect(() => {
-    if (!svg || !text) return;
-    const player =
-      replay instanceof ReplayPlayer ? replay : new ReplayPlayer(replay);
-    replayPlayer = player;
-
-    const renderer = new TextRenderer(svg.parentNode as HTMLElement, svg, text);
-    const apply = () => {
-      text.textContent =
-        finalText ??
-        (player.stepper.text.map((token) => token.text).join("") || "n");
-      renderer.text = player.stepper.text;
-      renderer.cursor = player.stepper.cursor;
-      if (keys) {
-        renderer.held = player.stepper.held;
-      }
-    };
-    const unsubscribePlayer = player.subscribe(apply);
-    textRenderer = renderer;
-
-    player.onDone = ondone;
-    player.start();
-    apply();
-    setTimeout(() => {
-      renderer.animated = true;
-    });
-    return () => {
-      unsubscribePlayer();
-      player?.destroy();
-    };
-  });
-
-  export function innerText(node: HTMLElement, text: Text) {
-    node.appendChild(text);
-    return {
-      destroy() {
-        text.remove();
-      },
-    };
-  }
-</script>
-
-{#key replay}
-  <svg bind:this={svg}></svg>
-  {#if browser}
-    <span use:innerText={text}></span>
-  {:else if !(replay instanceof ReplayPlayer)}
-    {finalText}
-  {/if}
-{/key}
-
-{#if children}
-  {@render children()}
-{/if}
-
-<style>
-  :global(*):has(svg) {
-    position: relative;
-  }
-
-  span {
-    opacity: 0;
-    white-space: pre-wrap;
-    overflow-wrap: break-word;
-  }
-
-  svg {
-    position: absolute;
-    top: 0;
-    left: 0;
-    font-family: inherit;
-    font-size: inherit;
-    color: inherit;
-    user-select: none;
-  }
-
-  svg > :global(text) {
-    font-family: inherit;
-    font-size: inherit;
-    fill: currentColor;
-    dominant-baseline: middle;
-  }
-
-  svg > :global(text[incorrect]) {
-    fill: red;
-  }
-
-  svg > :global(rect) {
-    fill: currentcolor;
-  }
-
-  svg > :global(.animated) {
-    transition: transform 100ms ease;
-  }
-</style>
--- a/src/lib/charrecorder/ChordHud.svelte
+++ b/src/lib/charrecorder/ChordHud.svelte
@@ -1,130 +0,0 @@
-<script lang="ts">
-  import { fly, scale } from "svelte/transition";
-  import { KBD_ICONS } from "./renderer/kbd-icon.js";
-  import { expoOut } from "svelte/easing";
-  import type { InferredChord } from "./core/types.js";
-
-  let { chords }: { chords: InferredChord[] } = $props();
-
-  function getPercent(
-    deviation: number,
-    inputCount: number,
-    perfect: number,
-    fail: number,
-  ) {
-    const failAdjusted = fail * inputCount;
-    const perfectAdjusted = perfect * inputCount;
-    return Math.min(
-      1,
-      Math.max(
-        0,
-        Math.max(0, deviation - perfectAdjusted) /
-          (failAdjusted - perfectAdjusted),
-      ),
-    );
-  }
-
-  function getColor(percent: number, alpha = 1) {
-    return `hsl(${(1 - percent) * 120}deg 50% 50% / ${alpha})`;
-  }
-</script>
-
-<section>
-  {#each chords as { input, id, deviation }, i (id)}
-    {@const a = getPercent(deviation[0], input.length, 10, 25)}
-    {@const b = getPercent(deviation[1], input.length, 10, 18)}
-    {@const max = Math.max(a, b)}
-    <div
-      class="chord"
-      out:fly={{ x: -100 }}
-      style:translate="calc(-{(chords.length - i - 1) * 5}em - 50%) 0"
-      style:scale={1 - (chords.length - i) / 6}
-      style:opacity={1 - (chords.length - i - 1) / 6}
-      title="Press: {deviation[0]}ms, Release: {deviation[1]}ms"
-    >
-      <div
-        class="rating"
-        style:color={getColor(max)}
-        style:text-shadow="0 0 {Math.round((1 - max) * 10)}px {getColor(
-          max,
-          0.6,
-        )}"
-        in:scale={{
-          start: 1.5 + 1.2 * (1 - max),
-          easing: expoOut,
-          duration: 1000,
-        }}
-      >
-        {#if max === 1}
-          Close
-        {:else if max > 0.5}
-          Okay
-        {:else if max > 0}
-          Good
-        {:else}
-          Perfect
-        {/if}
-      </div>
-      <div
-        in:fly={{ y: 20, easing: expoOut, duration: 1000 }}
-        class="tile"
-        style:background="linear-gradient(to right, {getColor(a)}, {getColor(
-          b,
-        )})"
-      ></div>
-      <div in:fly={{ y: 60, easing: expoOut, duration: 1000 }}>
-        {#each input as token}
-          <kbd>{KBD_ICONS.get(token.code)}</kbd>
-        {/each}
-      </div>
-    </div>
-  {/each}
-</section>
-
-<style>
-  section {
-    position: relative;
-    margin: 1em;
-    margin-bottom: 0;
-    display: grid;
-    height: 3em;
-    font-size: 2em;
-  }
-
-  .rating {
-    font-weight: bold;
-    font-style: italic;
-    text-transform: uppercase;
-  }
-
-  .tile {
-    width: 100%;
-    height: 0.2em;
-    border-radius: 0.1em;
-  }
-
-  kbd {
-    font-size: 0.6em;
-  }
-
-  kbd + kbd {
-    margin-inline-start: 0.3em;
-  }
-
-  .chord {
-    will-change: transform, opacity, scale;
-    position: absolute;
-    top: 0;
-    left: 50%;
-    display: flex;
-    flex-direction: column;
-    margin-inline-end: 1em;
-    padding-inline: 0.1em;
-    justify-content: center;
-    align-items: center;
-    transition:
-      opacity 0.3s ease,
-      translate 0.3s ease,
-      scale 0.3s ease;
-  }
-</style>
--- a/src/lib/charrecorder/TrackChords.svelte
+++ b/src/lib/charrecorder/TrackChords.svelte
@@ -1,30 +0,0 @@
-<script lang="ts">
-  import { getContext } from "svelte";
-  import { browser } from "$app/environment";
-  import type { InferredChord } from "./core/types.js";
-  import { ChordsReplayPlugin } from "./core/plugins/chords.js";
-  import type { ReplayPlayer } from "./core/player.js";
-
-  const player: { player: ReplayPlayer | undefined } = getContext("replay");
-
-  let {
-    chords = $bindable([]),
-    count = 1,
-  }: {
-    chords: InferredChord[];
-    count?: number;
-  } = $props();
-
-  if (browser) {
-    $effect(() => {
-      if (!player.player) return;
-      const tracker = new ChordsReplayPlugin();
-      tracker.register(player.player);
-      const unsubscribe = tracker.subscribe((value) => {
-        chords = value.slice(-count);
-      });
-
-      return unsubscribe;
-    });
-  }
-</script>
--- a/src/lib/charrecorder/TrackRollingWpm.svelte
+++ b/src/lib/charrecorder/TrackRollingWpm.svelte
@@ -1,20 +0,0 @@
-<script lang="ts">
-  import { getContext } from "svelte";
-  import { RollingWpmReplayPlugin } from "./core/plugins/rolling-wpm";
-  import type { ReplayPlayer } from "./core/player";
-
-  const player: { player: ReplayPlayer | undefined } = getContext("replay");
-
-  let { wpm = $bindable(0) } = $props();
-
-  $effect(() => {
-    if (!player.player) return;
-    const tracker = new RollingWpmReplayPlugin();
-    tracker.register(player.player);
-    const unsubscribe = tracker.subscribe((value) => {
-      wpm = value;
-    });
-
-    return unsubscribe;
-  });
-</script>
--- a/src/lib/charrecorder/core/player.ts
+++ b/src/lib/charrecorder/core/player.ts
@@ -1,146 +0,0 @@
-import { ReplayStepper } from "./step";
-import type { ReplayPlugin, Replay, TextToken } from "./types";
-
-export const ROBOT_THRESHOLD = 20;
-
-export class ReplayPlayer {
-  stepper = new ReplayStepper();
-
-  private replayCursor = 0;
-
-  private releaseAt = new Map<string, number>();
-
-  startTime = performance.now();
-
-  private animationFrameId: number | null = null;
-
-  timescale = 1;
-
-  private subscribers = new Set<(value: TextToken | undefined) => void>();
-
-  onDone?: () => void;
-
-  constructor(
-    readonly replay: Replay,
-    plugins: ReplayPlugin[] = [],
-  ) {
-    for (const plugin of plugins) {
-      plugin.register(this);
-    }
-  }
-
-  /** @type {import('./types').StoreContract<import('./types').TextToken | undefined>['subscribe']} */
-  subscribe(subscription: (value: TextToken | undefined) => void) {
-    this.subscribers.add(subscription);
-    return () => this.subscribers.delete(subscription);
-  }
-
-  private updateLoop() {
-    if (
-      this.replayCursor >= this.replay.keys.length &&
-      this.releaseAt.size === 0
-    ) {
-      if (this.onDone) {
-        this.onDone();
-      }
-      return;
-    }
-
-    const now = performance.now() - this.startTime;
-
-    while (
-      this.replayCursor < this.replay.keys.length &&
-      this.replay.keys[this.replayCursor]![2] * this.timescale -
-        this.replay.start <=
-        now
-    ) {
-      const [key, code, at, duration] = this.replay.keys[this.replayCursor++]!;
-      this.stepper.held.set(code, duration > ROBOT_THRESHOLD);
-      this.releaseAt.set(code, now + duration * this.timescale);
-
-      const token = this.stepper.step(key, code, at, duration);
-
-      for (const subscription of this.subscribers) {
-        subscription(token);
-      }
-    }
-
-    for (const [key, releaseAt] of this.releaseAt) {
-      if (releaseAt > now) continue;
-      this.stepper.held.delete(key);
-      this.releaseAt.delete(key);
-
-      for (const subscription of this.subscribers) {
-        subscription(undefined);
-      }
-    }
-
-    this.animationFrameId = requestAnimationFrame(this.updateLoop.bind(this));
-  }
-
-  playLiveEvent(key: string, code: string): (duration: number) => void {
-    this.replay.start = this.startTime;
-    const at = performance.now();
-    this.stepper.held.set(code, false);
-
-    const token = this.stepper.step(key, code, at) ?? {
-      text: key,
-      code,
-      stamp: at,
-      correct: true,
-      source: "robot",
-    };
-
-    for (const subscription of this.subscribers) {
-      subscription(token);
-    }
-
-    const timeout = setTimeout(() => {
-      token.source = "human";
-      this.stepper.held.set(code, true);
-      for (const subscription of this.subscribers) {
-        subscription(undefined);
-      }
-    }, ROBOT_THRESHOLD);
-
-    return (duration) => {
-      clearTimeout(timeout);
-      if (token) {
-        // TODO: will this cause performance issues with long text?
-        const index = this.stepper.text.indexOf(token);
-        if (index >= 0) {
-          this.stepper.text[index]!.duration = duration;
-          this.stepper.text[index]!.source =
-            duration < ROBOT_THRESHOLD ? "robot" : "human";
-        }
-      }
-      this.stepper.held.delete(code);
-
-      for (const subscription of this.subscribers) {
-        subscription(undefined);
-      }
-    };
-  }
-
-  start(delay = 200): this {
-    this.replayCursor = 0;
-    this.stepper = new ReplayStepper([], this.replay.challenge);
-    if (this.replay.keys.length === 0) {
-      if (this.onDone) {
-        this.onDone();
-      }
-      return this;
-    }
-    setTimeout(() => {
-      this.startTime = performance.now();
-      this.animationFrameId = requestAnimationFrame(this.updateLoop.bind(this));
-    }, delay);
-    return this;
-  }
-
-  destroy() {
-    if (this.animationFrameId) {
-      cancelAnimationFrame(this.animationFrameId);
-    }
-  }
-}
--- a/src/lib/charrecorder/core/plugins/chords.ts
+++ b/src/lib/charrecorder/core/plugins/chords.ts
@@ -1,112 +0,0 @@
-import { ReplayPlayer, ROBOT_THRESHOLD } from "../player";
-import type {
-  StoreContract,
-  ReplayPlugin,
-  InferredChord,
-  TextToken,
-} from "../types";
-
-function isValid(human: TextToken[], robot: TextToken[]) {
-  return human.length > 1 && human.length <= 10 && robot.length > 0;
-}
-
-export class ChordsReplayPlugin
-  implements StoreContract<InferredChord[]>, ReplayPlugin
-{
-  private readonly subscribers = new Set<(value: InferredChord[]) => void>();
-
-  private readonly chords: InferredChord[] = [];
-
-  private tokens: TextToken[] = [];
-
-  private timeout: Parameters<typeof clearTimeout>[0] = NaN;
-
-  private infer(human: TextToken[], robo: TextToken[]) {
-    const output = robo
-      .filter((token) => token.text.length === 1)
-      .map((token) => token.text)
-      .join("");
-    this.chords.push({
-      id: human.reduce((acc, curr) => Math.max(acc, curr.stamp), 0),
-      input: human,
-      output,
-      deviation: [
-        human.reduce((acc, curr) => Math.max(acc, curr.stamp), 0) -
-          human.reduce((acc, curr) => Math.min(acc, curr.stamp), Infinity),
-        human.reduce(
-          (acc, curr) => Math.max(acc, curr.stamp + (curr.duration ?? 0)),
-          0,
-        ) -
-          human.reduce(
-            (acc, curr) => Math.min(acc, curr.stamp + (curr.duration ?? 0)),
-            Infinity,
-          ),
-      ],
-    });
-
-    for (const subscription of this.subscribers) {
-      subscription(this.chords);
-    }
-  }
-
-  register(replay: ReplayPlayer) {
-    replay.subscribe((token) => {
-      if (token) {
-        this.tokens.push(token);
-      }
-
-      let last = NaN;
-      let roboStart = NaN;
-      let roboEnd = NaN;
-      for (let i = 0; i < this.tokens.length; i++) {
-        const token = this.tokens[i]!;
-        if (!token.duration || !token.source) break;
-
-        if (
-          Number.isNaN(roboStart) &&
-          token.source === "human" &&
-          token.stamp > last
-        ) {
-          this.tokens = [];
-        }
-
-        if (Number.isNaN(last) || token.stamp + token.duration > last) {
-          last = token.stamp + token.duration;
-        }
-
-        if (Number.isNaN(roboStart) && token.source === "robot") {
-          roboStart = i;
-        } else if (!Number.isNaN(roboStart) && token.source === "human") {
-          roboEnd = i;
-          const human = this.tokens.splice(0, roboStart);
-          const robot = this.tokens.splice(0, roboEnd - roboStart);
-          if (isValid(human, robot)) {
-            this.infer(human, robot);
-          }
-        }
-      }
-      console.log(this.tokens);
-
-      clearTimeout(this.timeout);
-      if (replay.stepper.held.size === 0) {
-        this.timeout = setTimeout(() => {
-          if (this.tokens.length > 0) {
-            const human = this.tokens.splice(
-              0,
-              this.tokens.findIndex((it) => it.source === "robot"),
-            );
-            const robot = this.tokens.splice(0, this.tokens.length);
-            if (isValid(human, robot)) {
-              this.infer(human, robot);
-            }
-          }
-        }, ROBOT_THRESHOLD);
-      }
-    });
-  }
-
-  subscribe(subscription: (value: InferredChord[]) => void) {
-    this.subscribers.add(subscription);
-    return () => this.subscribers.delete(subscription);
-  }
-}
--- a/src/lib/charrecorder/core/plugins/meta.ts
+++ b/src/lib/charrecorder/core/plugins/meta.ts
@@ -1,71 +0,0 @@
-import { ReplayPlayer, ROBOT_THRESHOLD } from "../player";
-import type { GraphData, ReplayPlugin, StoreContract } from "../types";
-
-export class MetaReplayPlugin
-  implements StoreContract<GraphData>, ReplayPlugin
-{
-  private subscribers = new Set<(value: GraphData) => void>();
-
-  private graphData: GraphData = { min: [0, 0], max: [0, 0], tokens: [] };
-
-  private liveHeldRoboFilter = new Set<string>();
-
-  register(replay: ReplayPlayer) {
-    replay.subscribe((token) => {
-      if (!token) return;
-      const lastHeld = this.graphData.tokens
-        .at(-1)
-        ?.reduce(
-          (acc, curr) => Math.max(acc, curr.stamp + (curr.duration ?? 0)),
-          0,
-        );
-      if (
-        lastHeld &&
-        (lastHeld === -1 || lastHeld > token.stamp + (token.duration ?? 0))
-      ) {
-        this.graphData.tokens.at(-1)!.push(token);
-      } else {
-        this.graphData.tokens.push([token]);
-      }
-      if (this.graphData.tokens.length === 1) {
-        this.graphData.min = [token.stamp, 0];
-      }
-      this.graphData.max = [
-        this.graphData.tokens
-          .at(-1)!
-          .reduce(
-            (acc, { stamp, duration }) =>
-              Math.max(acc, stamp + (duration ?? 0)),
-            0,
-          ),
-        Math.max(this.graphData.max[1], this.graphData.tokens.at(-1)!.length),
-      ];
-
-      this.liveHeldRoboFilter.add(token.code);
-
-      if (token.duration === undefined) {
-        setTimeout(() => {
-          if (this.liveHeldRoboFilter.has(token.code)) {
-            token.source = "human";
-            for (const subscription of this.subscribers) {
-              subscription(this.graphData);
-            }
-          }
-        }, ROBOT_THRESHOLD);
-      } else {
-        setTimeout(() => {
-          this.liveHeldRoboFilter.delete(token.code);
-        }, token.duration);
-      }
-
-      for (const subscription of this.subscribers) {
-        subscription(this.graphData);
-      }
-    });
-  }
-
-  subscribe(subscription: (value: GraphData) => void) {
-    this.subscribers.add(subscription);
-    return () => this.subscribers.delete(subscription);
-  }
-}
--- a/src/lib/charrecorder/core/plugins/rolling-wpm.ts
+++ b/src/lib/charrecorder/core/plugins/rolling-wpm.ts
@@ -1,48 +0,0 @@
-import type { ReplayPlayer } from "../player";
-import type { ReplayPlugin, StoreContract } from "../types";
-import { avgWordLength } from "./wpm";
-
-export class RollingWpmReplayPlugin
-  implements StoreContract<number>, ReplayPlugin
-{
-  subscribers = new Set<(value: number) => void>();
-
-  register(replay: ReplayPlayer) {
-    replay.subscribe(() => {
-      if (this.subscribers.size === 0) return;
-      let i = 0;
-      const index = Math.max(
-        0,
-        replay.stepper.text.findLastIndex((char) => {
-          if (char.source === "ghost") return false;
-          if (char.text === " " && i < 10) {
-            i++;
-          } else if (char.text === " ") {
-            return true;
-          }
-          return false;
-        }),
-      );
-      const length =
-        replay.stepper.text.length - replay.stepper.ghostCount - index;
-      const msPerChar =
-        ((replay.stepper.text[
-          replay.stepper.text.length - replay.stepper.ghostCount - 1
-        ]?.stamp ?? 0) -
-          (replay.stepper.text[index]?.stamp ?? 0)) /
-        length;
-
-      const value = 60_000 / (msPerChar * avgWordLength);
-      if (Number.isFinite(value)) {
-        for (const subscription of this.subscribers) {
-          subscription(value);
-        }
-      }
-    });
-  }
-
-  subscribe(subscription: (value: number) => void) {
-    this.subscribers.add(subscription);
-    return () => this.subscribers.delete(subscription);
-  }
-}
--- a/src/lib/charrecorder/core/plugins/wpm.ts
+++ b/src/lib/charrecorder/core/plugins/wpm.ts
@@ -1,26 +0,0 @@
-import type { ReplayPlayer } from "../player";
-import type { ReplayPlugin, StoreContract } from "../types";
-
-export const avgWordLength = 5;
-
-export class WpmReplayPlugin implements StoreContract<number>, ReplayPlugin {
-  private subscribers = new Set<(value: number) => void>();
-
-  register(replay: ReplayPlayer) {
-    replay.subscribe(() => {
-      if (this.subscribers.size === 0) return;
-      const msPerChar =
-        ((replay.stepper.text.at(-1)?.stamp ?? 0) - replay.startTime) /
-        replay.stepper.text.length;
-
-      const value = 60_000 / (msPerChar * avgWordLength);
-      for (const subscription of this.subscribers) {
-        subscription(value);
-      }
-    });
-  }
-  subscribe(subscription: (value: number) => void) {
-    this.subscribers.add(subscription);
-    return () => this.subscribers.delete(subscription);
-  }
-}
--- a/src/lib/charrecorder/core/recorder.ts
+++ b/src/lib/charrecorder/core/recorder.ts
@@ -1,79 +0,0 @@
-import { ReplayPlayer } from "./player.js";
-import type { Replay, ReplayEvent, TransmittableKeyEvent } from "./types.js";
-
-function maybeRound<T>(value: T, round: boolean): T {
-  return typeof value === "number" && round ? (Math.round(value) as T) : value;
-}
-
-export class ReplayRecorder {
-  private held = new Map<string, [string, number]>();
-
-  private heldHandles = new Map<
-    string,
-    ReturnType<ReplayPlayer["playLiveEvent"]>
-  >();
-
-  replay: ReplayEvent[] = [];
-
-  private start = performance.now();
-
-  private isFirstPress = true;
-
-  player: ReplayPlayer;
-
-  constructor(challenge?: Replay["challenge"]) {
-    this.player = new ReplayPlayer({
-      start: this.start,
-      finish: this.start,
-      keys: [],
-      challenge,
-    });
-  }
-
-  next(event: TransmittableKeyEvent) {
-    if (this.isFirstPress) {
-      this.player.startTime = event.timeStamp;
-      this.isFirstPress = false;
-    }
-    this.player.replay.finish = event.timeStamp;
-    if (event.type === "keydown") {
-      this.held.set(event.code, [event.key, event.timeStamp]);
-      this.heldHandles.set(
-        event.code,
-        this.player.playLiveEvent(event.key, event.code),
-      );
-    } else {
-      const [key, start] = this.held.get(event.code) ?? ["", 0];
-      const delta = event.timeStamp - start;
-      this.held.delete(event.code);
-
-      const element = Object.freeze([key, event.code, start, delta] as const);
-      this.replay.push(element);
-      this.heldHandles.get(event.code)?.(delta);
-      this.heldHandles.delete(event.code);
-    }
-  }
-
-  finish(trim = true, round = true) {
-    return {
-      start: maybeRound(trim ? this.replay[0]?.[2] : this.start, round),
-      finish: maybeRound(
-        trim
-          ? Math.max(...this.replay.map((it) => it[2] + it[3]))
-          : performance.now(),
-        round,
-      ),
-      keys: this.replay
-        .map(
-          ([key, code, at, duration]) =>
-            [
-              key,
-              code,
-              maybeRound(at, round),
-              maybeRound(duration, round),
-            ] as const,
-        )
-        .sort((a, b) => a[2] - b[2]),
-    };
-  }
-}
--- a/src/lib/charrecorder/core/step.ts
+++ b/src/lib/charrecorder/core/step.ts
@@ -1,132 +0,0 @@
-import { ROBOT_THRESHOLD } from "./player";
-import type { LiveReplayEvent, ReplayEvent, TextToken } from "./types";
-
-/**
- * This is the "heart" of the player logic
- */
-export class ReplayStepper {
-  held = new Map<string, boolean>();
-
-  text: TextToken[];
-
-  cursor = 0;
-
-  challenge: TextToken[];
-
-  ghostCount: number;
-
-  mistakeCount = 0;
-
-  constructor(initialReplay: ReplayEvent[] = [], challenge = "") {
-    this.challenge = challenge.split("").map((text) => ({
-      stamp: 0,
-      duration: 0,
-      code: "",
-      text,
-      source: "ghost",
-      correct: true,
-    }));
-    this.text = [...this.challenge];
-    this.ghostCount = this.challenge.length;
-    for (const key of initialReplay) {
-      this.step(...key);
-    }
-  }
-
-  step(
-    ...[output, code, at, duration]: ReplayEvent | LiveReplayEvent
-  ): TextToken | undefined {
-    let token: TextToken | undefined = undefined;
-    if (output === "Backspace") {
-      if (this.held.has("ControlLeft") || this.held.has("ControlRight")) {
-        let wordIndex = 0;
-        for (let i = this.cursor - 1; i >= 0; i--) {
-          if (/\w+/.test(/** @type {TextToken} */ this.text[i]!.text)) {
-            wordIndex = i;
-          } else if (wordIndex !== 0) {
-            break;
-          }
-        }
-        this.text.splice(wordIndex, this.cursor - wordIndex);
-      } else if (this.cursor !== 0) {
-        this.text.splice(this.cursor - 1, 1);
-      }
-      this.cursor = Math.min(
-        this.cursor,
-        this.text.length - this.ghostCount + 1,
-      );
-    }
-    if (output.length === 1) {
-      token = {
-        stamp: at,
-        duration,
-        code,
-        text: output,
-        source:
-          duration === undefined
-            ? undefined
-            : duration < ROBOT_THRESHOLD
-              ? "robot"
-              : "human",
-        correct: true,
-      };
-      this.text.splice(this.cursor, 0, token);
-    }
-
-    if (code === "ArrowLeft" || code === "Backspace") {
-      this.cursor = Math.max(this.cursor - 1, 0);
-    }
-    if (code === "ArrowRight" || output.length === 1) {
-      this.cursor = Math.min(
-        this.cursor + 1,
-        this.text.length - this.ghostCount,
-      );
-    }
-
-    if (code === "Enter") {
-      token = {
-        stamp: at,
-        code,
-        duration,
-        text: "\n",
-        source:
-          duration === undefined
-            ? undefined
-            : duration < ROBOT_THRESHOLD
-              ? "robot"
-              : "human",
-        correct: true,
-      };
-      this.text.splice(this.cursor, 0, token);
-      this.cursor++;
-    }
-
-    if (this.challenge.length > 0) {
-      let challengeIndex = 0;
-      this.mistakeCount = 0;
-      for (let i = 0; i < this.text.length - this.ghostCount; i++) {
-        if (this.text[i]!.text === this.challenge[challengeIndex]?.text) {
-          this.text[i]!.correct = true;
-        } else {
-          this.mistakeCount++;
-          this.text[i]!.correct = false;
-        }
-        challengeIndex++;
-      }
-
-      const currentGhostCount = this.ghostCount;
-      this.ghostCount = Math.max(0, this.challenge.length - challengeIndex);
-
-      this.text.splice(
-        this.text.length - currentGhostCount,
-        Math.max(0, currentGhostCount - this.ghostCount),
-        ...this.challenge.slice(
-          challengeIndex,
-          challengeIndex + Math.max(0, this.ghostCount - currentGhostCount),
-        ),
-      );
-    }
-
-    return token;
-  }
-}
--- a/src/lib/charrecorder/core/types.ts
+++ b/src/lib/charrecorder/core/types.ts
@@ -1,58 +0,0 @@
-import { ReplayPlayer } from "./player.js";
-
-export interface Replay {
-  start: number;
-  finish: number;
-  keys: ReplayEvent[];
-  challenge?: string;
-}
-export type LiveReplayEvent = readonly [
-  output: string,
-  code: string,
-  at: number,
-];
-export type ReplayEvent = readonly [...LiveReplayEvent, duration: number];
-
-export interface TextToken {
-  stamp: number;
-  duration?: number;
-  text: string;
-  code: string;
-  source?: "human" | "robot" | "ghost";
-  correct: boolean;
-}
-
-export interface GraphData {
-  min: [number, number];
-  max: [number, number];
-  tokens: TextToken[][];
-}
-
-export interface ReplayStepResult {
-  text: TextToken[];
-  cursor: number;
-  challengeCursor: number;
-  token: TextToken | undefined;
-}
-
-export type TransmittableKeyEvent = Pick<
-  KeyboardEvent,
-  "timeStamp" | "type" | "code" | "key"
->;
-
-export interface InferredChord {
-  id: number;
-  input: TextToken[];
-  output: string;
-  deviation: [number, number];
-}
-
-export interface ReplayPlugin {
-  register(replay: ReplayPlayer): void;
-}
-
-export interface StoreContract<T> {
-  subscribe(subscription: (value: T) => void): () => void;
-
-  set?: (value: T) => void;
-}
--- a/src/lib/charrecorder/renderer/kbd-icon.ts
+++ b/src/lib/charrecorder/renderer/kbd-icon.ts
@@ -1,96 +0,0 @@
-export const KBD_ICONS = new Map([
-  ["KeyA", "a"],
-  ["KeyB", "b"],
-  ["KeyC", "c"],
-  ["KeyD", "d"],
-  ["KeyE", "e"],
-  ["KeyF", "f"],
-  ["KeyG", "g"],
-  ["KeyH", "h"],
-  ["KeyI", "i"],
-  ["KeyJ", "j"],
-  ["KeyK", "k"],
-  ["KeyL", "l"],
-  ["KeyM", "m"],
-  ["KeyN", "n"],
-  ["KeyO", "o"],
-  ["KeyP", "p"],
-  ["KeyQ", "q"],
-  ["KeyR", "r"],
-  ["KeyS", "s"],
-  ["KeyT", "t"],
-  ["KeyU", "u"],
-  ["KeyV", "v"],
-  ["KeyW", "w"],
-  ["KeyX", "x"],
-  ["KeyY", "y"],
-  ["KeyZ", "z"],
-  ["Digit0", "0"],
-  ["Digit1", "1"],
-  ["Digit2", "2"],
-  ["Digit3", "3"],
-  ["Digit4", "4"],
-  ["Digit5", "5"],
-  ["Digit6", "6"],
-  ["Digit7", "7"],
-  ["Digit8", "8"],
-  ["Digit9", "9"],
-  ["Period", "."],
-  ["Comma", ","],
-  ["Semicolon", ";"],
-  ["Quote", "'"],
-  ["BracketLeft", "["],
-  ["BracketRight", "]"],
-  ["Backslash", "\\"],
-  ["Slash", "/"],
-  ["Minus", "-"],
-  ["Equal", "="],
-  ["Backquote", "`"],
-  ["IntlBackslash", "¦"],
-  ["IntlRo", "ろ"],
-  ["IntlYen", "¥"],
-  ["IntlHash", "#"],
-  ["BracketLeft", "["],
-  ["BracketRight", "]"],
-  ["NumLock", "⇭"],
-  ["ScrollLock", "⇳"],
-  ["Backspace", "⌫"],
-  ["Delete", "⌦"],
-  ["Enter", "↵"],
-  ["Space", "␣"],
-  ["Tab", "⇥"],
-  ["ArrowLeft", "←"],
-  ["ArrowRight", "→"],
-  ["ArrowUp", "↑"],
-  ["ArrowDown", "↓"],
-  ["ShiftLeft", "⇧"],
-  ["ShiftRight", "⇧"],
-  ["ControlLeft", "Ctrl"],
-  ["ControlRight", "Ctrl"],
-  ["AltLeft", "Alt"],
-  ["AltRight", "Alt"],
-  ["MetaLeft", "⌘"],
-  ["MetaRight", "⌘"],
-  ["CapsLock", "⇪"],
-  ["Escape", "Esc"],
-  ["F1", "F1"],
-  ["F2", "F2"],
-  ["F3", "F3"],
-  ["F4", "F4"],
-  ["F5", "F5"],
-  ["F6", "F6"],
-  ["F7", "F7"],
-  ["F8", "F8"],
-  ["F9", "F9"],
-  ["F10", "F10"],
-  ["F11", "F11"],
-  ["F12", "F12"],
-  ["PrintScreen", "PrtSc"],
-  ["Pause", "Pause"],
-  ["Insert", "Ins"],
-  ["Home", "Home"],
-  ["End", "End"],
-  ["PageUp", "PgUp"],
-  ["PageDown", "PgDn"],
-  ["ContextMenu", "Menu"],
-]);
--- a/src/lib/charrecorder/renderer/renderer.ts
+++ b/src/lib/charrecorder/renderer/renderer.ts
@@ -1,287 +0,0 @@
-import type { TextToken } from "../core/types";
-import { KBD_ICONS } from "./kbd-icon";
-
-export class TextRenderer {
-  shinyChords = true;
-
-  shiny: number[] | undefined;
-
-  readonly cursorNode: SVGRectElement;
-
-  private readonly nodes = new Map<TextToken, SVGTextElement>();
-
-  private readonly heldNodes = new Map<string, SVGTextElement>();
-
-  private readonly occupiedHeld: Array<boolean | undefined> = [];
-
-  private readonly occupied: number[] = [];
-
-  animationOptions: KeyframeAnimationOptions = {
-    duration: 100,
-    easing: "ease",
-  };
-
-  heldKeySize = 0.8;
-
-  ghostText = "";
-
-  constructor(
-    readonly node: HTMLElement,
-    readonly svg: SVGSVGElement,
-    readonly textNode: Text,
-  ) {
-    this.cursorNode = document.createElementNS(
-      "http://www.w3.org/2000/svg",
-      "rect",
-    );
-    this.cursorNode.setAttribute("x", "0");
-    this.cursorNode.setAttribute("y", "0");
-    this.svg.appendChild(this.cursorNode);
-  }
-
-  set showCursor(value: boolean) {
-    this.cursorNode.style.visibility = value ? "visible" : "hidden";
-  }
-
-  getAtRange(i: number): [number, number] {
-    const range = document.createRange();
-    const rangeIndex = Math.max(0, Math.min(i, this.textNode.length - 1));
-    range.setStart(this.textNode, rangeIndex);
-    range.setEnd(
-      this.textNode,
-      this.textNode.length === 0 ? 0 : rangeIndex + 1,
-    );
-    const charBounds = range.getBoundingClientRect();
-    return [
-      i > this.textNode.length - 1
-        ? charBounds.x + charBounds.width
-        : charBounds.x,
-      charBounds.y + charBounds.height / 2 + 1,
-    ];
-  }
-
-  set held(keys: Map<string, boolean>) {
-    const prev = new Set(this.heldNodes.keys());
-    const fontSize = getComputedStyle(this.node).fontSize;
-
-    for (const [code, isHuman] of keys) {
-      if (!isHuman) continue;
-      prev.delete(code);
-      let node = this.heldNodes.get(code);
-      if (!node) {
-        let i = this.occupiedHeld.findIndex((it) => it === undefined);
-        if (i === -1) {
-          i = this.occupiedHeld.length;
-          this.occupiedHeld.push(true);
-        } else {
-          this.occupiedHeld[i] = true;
-        }
-        node = document.createElementNS("http://www.w3.org/2000/svg", "text");
-        node.textContent = KBD_ICONS.get(code) ?? null;
-        node.setAttribute("i", i.toString());
-        this.heldNodes.set(code, node);
-        node.style.transform = `${this.cursorNode.style.transform} translateY(calc(${fontSize} * ${
-          i + 1.5
-        }))`;
-        node.style.fontSize = `calc(${fontSize} * ${this.heldKeySize})`;
-        this.svg.appendChild(node);
-        node
-          .animate(
-            [
-              {
-                transform: `translateY(calc(-${fontSize} * ${this.heldNodes.size})) scale(0)`,
-              },
-              { transform: "translateY(0px) scale(1)" },
-            ],
-            { duration: 200, composite: "add", easing: "ease-out" },
-          )
-          .play();
-      }
-    }
-
-    for (const code of prev) {
-      const node = this.heldNodes.get(code);
-      if (!node) continue;
-      this.heldNodes.delete(code);
-
-      this.occupiedHeld[Number(node.getAttribute("i"))] = undefined;
-      node
-        .animate(
-          [
-            { transform: "translateX(0px)" },
-            { transform: "translateX(-10px)" },
-          ],
-          {
-            duration: 500,
-            composite: "accumulate",
-            easing: "ease-in",
-          },
-        )
-        .play();
-      const animation = node.animate([{ opacity: 1 }, { opacity: 0 }], {
-        duration: 500,
-        easing: "ease-in",
-      });
-      animation.onfinish = () => {
-        node.remove();
-      };
-      animation.play();
-    }
-  }
-
-  get animated(): boolean {
-    return this.cursorNode.classList.contains("animated");
-  }
-
-  set animated(value: boolean) {
-    if (value) {
-      this.cursorNode.classList.add("animated");
-    } else {
-      this.cursorNode.classList.remove("animated");
-    }
-  }
-
-  set cursor(cursor: number) {
-    const bounds = this.node.getBoundingClientRect();
-    const style = getComputedStyle(this.node);
-
-    const pos = this.getAtRange(cursor);
-    const x = pos[0] - bounds.x;
-    const y = pos[1] - bounds.y;
-
-    this.cursorNode.setAttribute("height", style.fontSize);
-    this.cursorNode.setAttribute("width", "1");
-
-    this.cursorNode.style.transform = `translate(${x}px, calc(${y}px - ${style.fontSize} / 2))`;
-  }
-
-  set text(text: TextToken[]) {
-    const prev = new Set(this.nodes.keys());
-
-    const bounds = this.node.getBoundingClientRect();
-
-    this.svg.setAttribute("width", bounds.width.toFixed(2));
-    this.svg.setAttribute("height", bounds.height.toFixed(2));
-    this.svg.setAttribute(
-      "viewBox",
-      `0 0 ${bounds.width.toFixed(2)} ${bounds.height.toFixed(2)}`,
-    );
-
-    text.forEach((token, i) => {
-      prev.delete(token);
-      let node = this.nodes.get(token);
-
-      const pos = this.getAtRange(i);
-      const x = pos[0] - bounds.x;
-      const y = pos[1] - bounds.y;
-      const xStr = x.toFixed(2);
-      const yStr = y.toFixed(2);
-
-      if (!node) {
-        node = document.createElementNS("http://www.w3.org/2000/svg", "text");
-        this.nodes.set(token, node);
-        this.svg.appendChild(node);
-        node.setAttribute("x", xStr);
-        node.setAttribute("y", yStr);
-        node.setAttribute("i", i.toString());
-        if (token.source === "ghost") {
-          node.setAttribute("opacity", "0.5");
-        }
-        this.occupied[i] ??= 0;
-        if (this.animated) {
-          if (this.occupied[i] > 0) {
-            node
-              .animate([{ opacity: 0 }, { opacity: 1 }], {
-                ...this.animationOptions,
-                easing: "ease-out",
-              })
-              .play();
-          } else {
-            node
-              .animate(
-                [
-                  { opacity: 0, transform: "translateY(10px)" },
-                  { opacity: 1, transform: "translateY(0px)" },
-                ],
-                { ...this.animationOptions, easing: "ease-out" },
-              )
-              .play();
-          }
-        }
-        this.occupied[i]++;
-      }
-
-      if (!token.correct) {
-        node.setAttribute("incorrect", "");
-      } else {
-        node.removeAttribute("incorrect");
-      }
-
-      const prevX = node.getAttribute("x");
-      if (prevX && prevX !== xStr) {
-        const prev = parseFloat(prevX);
-        node.setAttribute("x", xStr);
-        /*if (this.animated) {
-					node.animate(
-						[{ transform: `translateX(${prev - x}px)` }, { transform: `translateX(0px)` }],
-						this.animationOptions
-					);
-				}*/
-      }
-      const prevY = node.getAttribute("y");
-      if (prevY && prevY !== yStr) {
-        const prev = parseFloat(prevY);
-        node.setAttribute("y", yStr);
-        /*if (this.animated) {
-					node.animate(
-						[{ transform: `translateY(${prev - y}px)` }, { transform: `translateY(0px)` }],
-						this.animationOptions
-					);
-				}*/
-      }
-      if (node.textContent !== token.text) {
-        node.textContent = token.text;
-      }
-    });
-
-    for (const token of prev) {
-      const node = this.nodes.get(token)!;
-      const i = parseInt(node.getAttribute("i")!);
-      this.nodes.delete(token);
-      if (this.animated) {
-        const animation = node.animate(
-          [{ opacity: 1 }, { opacity: 0 }],
-          this.animationOptions,
-        );
-        setTimeout(() => {
-          if (this.occupied[i] === 1) {
-            node
-              .animate(
-                [
-                  { transform: "translateY(0px)" },
-                  { transform: "translateY(10px)" },
-                ],
-                this.animationOptions,
-              )
-              .play();
-          }
-        }, 10);
-        animation.onfinish = () => {
-          node.remove();
-          this.occupied[i]!--;
-        };
-        animation.play();
-      } else {
-        node.remove();
-        this.occupied[i]!--;
-      }
-    }
-  }
-
-  private isShiny(char: TextToken, index: number) {
-    return (
-      this.shiny?.includes(index) ||
-      (this.shinyChords && char.source === "robot")
-    );
-  }
-}
--- a/src/lib/chat/MatrixRoomMembers.svelte
+++ b/src/lib/chat/MatrixRoomMembers.svelte
@@ -1,71 +0,0 @@
-<script lang="ts">
-  import type { RoomMember } from "matrix-js-sdk";
-  import { matrixClient, memberColor } from "./chat";
-  import { theme } from "$lib/preferences";
-  import { hexFromArgb } from "@material/material-color-utilities";
-
-  let { members }: { members: RoomMember[] } = $props();
-</script>
-
-<div class="member-list">
-  {#each members as member (member.userId)}
-    {@const avatar = member.getMxcAvatarUrl()}
-    <div class="member">
-      {#if avatar}
-        <img
-          class="avatar"
-          src={$matrixClient.mxcUrlToHttp(avatar, 32, 32)}
-          alt={member.name}
-          width="32"
-          height="32"
-        />
-      {:else}
-        {@const color = memberColor(member, $theme)}
-        {@const modeColor = $theme.mode === "dark" ? color.dark : color.light}
-        <div
-          style:background={hexFromArgb(modeColor.color)}
-          style:color={hexFromArgb(modeColor.onColor)}
-          class="avatar avatar-placeholder icon"
-        >
-          person
-        </div>
-      {/if}
-      <span>{member.name}</span>
-    </div>
-  {/each}
-</div>
-
-<style lang="scss">
-  .avatar {
-    border-radius: 50%;
-    width: 32px;
-    height: 32px;
-    flex-shrink: 0;
-  }
-
-  .avatar-placeholder {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 24px;
-  }
-
-  .member {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-  }
-
-  .member-list {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    padding: 8px;
-    overflow-y: auto;
-    height: 100%;
-  }
-
-  span {
-    word-break: break-all;
-  }
-</style>
--- a/src/lib/chat/MatrixTimeline.svelte
+++ b/src/lib/chat/MatrixTimeline.svelte
@@ -1,251 +0,0 @@
-<script lang="ts">
-  import type {
-    EventTimeline,
-    MatrixEvent,
-    MsgType,
-    Room,
-    RoomEvent,
-    RoomMember,
-    RoomMemberEvent,
-  } from "matrix-js-sdk";
-  import { onDestroy, onMount, tick } from "svelte";
-  import { matrixClient } from "./chat";
-  import MatrixEventComponent from "./events/MatrixEvent.svelte";
-  import CharRecorder from "$lib/charrecorder/CharRecorder.svelte";
-  import { ReplayRecorder } from "$lib/charrecorder/core/recorder";
-  import { type Socket, io } from "socket.io-client";
-  import { SvelteMap } from "svelte/reactivity";
-
-  let { timeline }: { timeline: EventTimeline } = $props();
-
-  const excludeEvents = ["m.reaction", "m.room.redaction"];
-
-  let events = $state(
-    timeline
-      .getEvents()
-      .filter((it) => !excludeEvents.includes(it.getType()))
-      .reverse(),
-  );
-
-  let recorder = $state(new ReplayRecorder());
-  let showCursor = $state(false);
-
-  let timelineElement: HTMLElement = $state()!;
-
-  async function onTimeline(
-    event: MatrixEvent,
-    room?: Room,
-    toStartOfTimeline?: boolean,
-  ) {
-    if (room?.roomId !== timeline.getRoomId()) return;
-    const sender = event.getSender();
-    if (sender) {
-      live.delete(sender);
-    }
-    if (excludeEvents.includes(event.getType())) return;
-    if (toStartOfTimeline) {
-      events.push(event);
-    } else {
-      const needScroll = timelineElement.scrollTop < 20;
-      events.unshift(event);
-      if (needScroll) {
-        await tick();
-        timelineElement.scroll({
-          top: 0,
-          behavior: "smooth",
-        });
-      }
-    }
-  }
-
-  let typing = $state<string[]>([]);
-
-  function onTyping(event: MatrixEvent, member: RoomMember) {
-    typing = event.event.content?.["user_ids"] ?? [];
-  }
-
-  async function send() {
-    const roomId = timeline.getRoomId();
-    if (!roomId) return;
-    const finalText = recorder.player.stepper.text
-      .map((token) => token.text)
-      .join("");
-    const finalRecording = recorder.finish();
-    if (!finalText) return;
-    recorder = new ReplayRecorder();
-    await $matrixClient.sendMessage(roomId, {
-      msgtype: "m.text" as MsgType.Text,
-      body: finalText,
-      // @ts-expect-error
-      "m.replay": finalRecording,
-    });
-  }
-
-  function onKey(event: KeyboardEvent) {
-    if (event.type === "keyup" && event.key === "Enter" && !event.shiftKey) {
-      send();
-      return;
-    } else {
-      recorder.next(event);
-    }
-
-    if (event.type === "keyup" && recorder.player.stepper.text.length === 0) {
-      recorder = new ReplayRecorder();
-    } else {
-      socket.emit("message", {
-        timeStamp: event.timeStamp,
-        type: event.type,
-        key: event.key,
-        code: event.code,
-        username: $matrixClient.getUserId(),
-      });
-    }
-  }
-
-  let socket: Socket = $state()!;
-  let live = new SvelteMap<string, ReplayRecorder>();
-
-  onMount(() => {
-    socket = io("https://srv.charachorder.io");
-    socket.emit("join", timeline.getRoomId());
-
-    socket.on("message", async ({ message }) => {
-      let userRecorder = live.get(message.username);
-      if (!userRecorder) {
-        userRecorder = new ReplayRecorder();
-        live.set(message.username, userRecorder);
-      }
-
-      await tick();
-
-      userRecorder.next(message);
-
-      if (userRecorder.player.stepper.text.length === 0) {
-        live.delete(message.username);
-      }
-    });
-
-    $matrixClient.on("Room.timeline" as RoomEvent.Timeline, onTimeline);
-    $matrixClient.on("RoomMember.typing" as RoomMemberEvent.Typing, onTyping);
-  });
-
-  onDestroy(() => {
-    socket?.disconnect();
-    $matrixClient.off("Room.timeline" as RoomEvent.Timeline, onTimeline);
-    $matrixClient.off("RoomMember.typing" as RoomMemberEvent.Typing, onTyping);
-  });
-</script>
-
-<section>
-  <div bind:this={timelineElement} class="timeline">
-    {#each live.entries() as [userId, recorder] (userId)}
-      {@const roomId = timeline.getRoomId()}
-      {#if roomId}
-        {@const room = $matrixClient.getRoom(roomId)}
-        {@const member = room?.getMember(userId)}
-        {#if member}
-          <MatrixEventComponent sender={member} replay={recorder.player} />
-        {/if}
-      {/if}
-    {/each}
-    {#each events as event, i (event.event["event_id"])}
-      {@const prev = events[i + 1]}
-      <MatrixEventComponent {event} sender={event.sender} {prev} {timeline} />
-    {/each}
-  </div>
-
-  <div class="static-elements">
-    <div class="indicators"></div>
-    <div class="input-box">
-      <button class="icon">add</button>
-      <div
-        role="textbox"
-        tabindex="0"
-        class="input"
-        onkeydown={onKey}
-        onkeyup={onKey}
-        onfocusin={() => (showCursor = true)}
-        onfocusout={() => (showCursor = false)}
-      >
-        <CharRecorder replay={recorder.player} cursor={showCursor} />
-      </div>
-      <button class="icon" onclick={send}>send</button>
-    </div>
-  </div>
-</section>
-
-<style lang="scss">
-  $border-radius: 16px;
-
-  h2 {
-    height: min-content;
-  }
-
-  .input {
-    border: 1px solid var(--md-sys-color-outline);
-    flex-grow: 1;
-    cursor: text;
-    padding: 0.5em;
-    font-size: 1rem;
-    border-radius: $border-radius;
-
-    text-wrap: wrap;
-    white-space: pre-wrap;
-    overflow-wrap: break-word;
-    word-break: break-word;
-
-    &:focus-visible {
-      outline: none;
-    }
-  }
-
-  .input-box {
-    display: flex;
-    gap: 4px;
-    padding-block: 8px;
-    flex-shrink: 0;
-    width: 100%;
-  }
-
-  .static-elements {
-    position: relative;
-    width: 100%;
-  }
-
-  .timeline {
-    contain: content;
-    height: auto;
-    display: flex;
-    flex-direction: column-reverse;
-    overflow-y: scroll;
-    overflow-x: hidden;
-    flex-grow: 1;
-    width: 100%;
-  }
-
-  .back-to-present {
-    position: fixed;
-    bottom: 0;
-  }
-
-  .scroll-controls {
-    position: sticky;
-    bottom: 0;
-    min-height: 16px;
-    background: linear-gradient(
-      to bottom,
-      transparent,
-      var(--md-sys-color-background)
-    );
-  }
-
-  section {
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    justify-content: flex-end;
-
-    width: 100%;
-    height: 100%;
-  }
-</style>
--- a/src/lib/chat/chat.ts
+++ b/src/lib/chat/chat.ts
@@ -1,109 +0,0 @@
-import { derived, writable, type Writable } from "svelte/store";
-import type {
-  ClientEvent,
-  LoginResponse,
-  MatrixClient,
-  RoomMember,
-} from "matrix-js-sdk";
-import { persistentWritable } from "$lib/storage";
-import {
-  themeFromSourceColor,
-  argbFromHex,
-  type CustomColorGroup,
-} from "@material/material-color-utilities";
-import type { UserTheme } from "$lib/preferences";
-import { MatrixRx } from "./matrix-rx/client";
-
-export const matrixClient: Writable<MatrixClient> = writable();
-
-export const isLoggedIn: Writable<boolean> = writable(false);
-
-export const matrix = derived(
-  [matrixClient, isLoggedIn],
-  ([matrixClient, isLoggedIn]) =>
-    isLoggedIn ? new MatrixRx(matrixClient) : undefined,
-);
-
-export const currentRoomId = persistentWritable<string | null>(
-  "currentRoomId",
-  null,
-);
-
-function getStoredLogin(): LoginResponse | undefined {
-  try {
-    return JSON.parse(localStorage.getItem("matrix-login")!);
-  } catch {
-    return undefined;
-  }
-}
-
-export function storeLogin(response: LoginResponse) {
-  localStorage.setItem("matrix-login", JSON.stringify(response));
-}
-
-export async function initMatrixClient() {
-  const { createClient, IndexedDBStore, IndexedDBCryptoStore } = await import(
-    "matrix-js-sdk"
-  );
-
-  const storedLogin = getStoredLogin();
-
-  const store = new IndexedDBStore({
-    dbName: "matrix",
-    indexedDB: window.indexedDB,
-  });
-  const cryptoStore = new IndexedDBCryptoStore(
-    window.indexedDB,
-    "matrix-crypto",
-  );
-
-  const client = createClient({
-    baseUrl: import.meta.env.VITE_MATRIX_URL,
-    userId: storedLogin?.user_id,
-    accessToken: storedLogin?.access_token,
-    timelineSupport: true,
-    store,
-    cryptoStore,
-  });
-
-  console.log("store");
-  await store.startup();
-  console.log("cryptoStore");
-  await cryptoStore.startup();
-  console.log("client");
-  await client.startClient();
-  client.once("sync" as ClientEvent.Sync, () => {
-    isLoggedIn.set(client.isLoggedIn());
-  });
-
-  const loginToken = new URLSearchParams(window.location.search).get(
-    "loginToken",
-  );
-  if (loginToken) {
-    storeLogin(await client.loginWithToken(loginToken));
-    window.history.replaceState({}, document.title, window.location.pathname);
-    isLoggedIn.set(client.isLoggedIn());
-  }
-
-  matrixClient.set(client);
-  console.log("done");
-}
-
-export function memberColor(
-  member: RoomMember,
-  theme: UserTheme,
-): CustomColorGroup {
-  let hash = 0;
-  member.userId.split("").forEach((char) => {
-    hash = char.charCodeAt(0) + ((hash << 5) - hash);
-  });
-  let color = "#";
-  for (let i = 0; i < 3; i++) {
-    const value = (hash >> (i * 8)) & 0xff;
-    color += value.toString(16).padStart(2, "0");
-  }
-
-  return themeFromSourceColor(argbFromHex(theme.color), [
-    { value: argbFromHex(color), name: "member", blend: true },
-  ]).customColors.find((c) => c.color.name === "member")!;
-}
--- a/src/lib/chat/events/MatrixEvent.svelte
+++ b/src/lib/chat/events/MatrixEvent.svelte
@@ -1,357 +0,0 @@
-<script lang="ts">
-  import type {
-    EventTimeline,
-    MatrixEvent,
-    MatrixEventEvent,
-    Relations,
-    RelationsEvent,
-    RoomMember,
-  } from "matrix-js-sdk";
-  import MatrixMessageEvent from "./MatrixMessageEvent.svelte";
-  import { matrixClient, memberColor } from "../chat";
-  import { theme } from "$lib/preferences";
-  import { hexFromArgb } from "@material/material-color-utilities";
-  import { fade } from "svelte/transition";
-  import type { Replay } from "$lib/charrecorder/core/types";
-  import CharRecorder from "$lib/charrecorder/CharRecorder.svelte";
-  import type { ReplayPlayer } from "$lib/charrecorder/core/player";
-  import { onDestroy, onMount } from "svelte";
-  import { writable } from "svelte/store";
-
-  let {
-    event,
-    prev,
-    sender,
-    replay: replayPlayer,
-    timeline,
-  }: {
-    event?: MatrixEvent;
-    prev?: MatrixEvent;
-    sender?: RoomMember | null;
-    replay?: Replay | ReplayPlayer;
-    timeline?: EventTimeline;
-  } = $props();
-
-  let toolbarHover = $state(false);
-  let mainHover = $state(false);
-
-  let hover = $derived(toolbarHover || mainHover);
-
-  let replay: Replay | undefined = $state();
-
-  let reactions: Relations | undefined = $state(
-    timeline && event?.event.event_id
-      ? timeline
-          .getTimelineSet()
-          .relations.getChildEventsForEvent(
-            event.event.event_id,
-            "m.annotation",
-            "m.reaction",
-          )
-      : undefined,
-  );
-  let annotations = writable<[string, Set<MatrixEvent>][] | null | undefined>();
-
-  function createRelations() {
-    if (!timeline || !event?.event.event_id) return;
-    reactions?.off("Relations.add" as RelationsEvent.Add, createRelations);
-    reactions?.off(
-      "Relations.remove" as RelationsEvent.Remove,
-      createRelations,
-    );
-    reactions = timeline
-      .getTimelineSet()
-      .relations.getChildEventsForEvent(
-        event.event.event_id,
-        "m.annotation",
-        "m.reaction",
-      );
-    reactions?.on("Relations.add" as RelationsEvent.Add, createRelations);
-    reactions?.on("Relations.remove" as RelationsEvent.Remove, createRelations);
-    reactions?.on(
-      "Relations.redaction" as RelationsEvent.Redaction,
-      createRelations,
-    );
-    annotations.set(
-      reactions?.getSortedAnnotationsByKey()?.filter(([, it]) => it.size > 0),
-    );
-    console.log("create");
-  }
-
-  onMount(() => {
-    createRelations();
-    event?.on(
-      "Event.relationsCreated" as MatrixEventEvent.RelationsCreated,
-      createRelations,
-    );
-  });
-
-  onDestroy(() => {
-    event?.off(
-      "Event.relationsCreated" as MatrixEventEvent.RelationsCreated,
-      createRelations,
-    );
-    reactions?.off("Relations.add" as RelationsEvent.Remove, createRelations);
-    reactions?.off(
-      "Relations.remove" as RelationsEvent.Remove,
-      createRelations,
-    );
-    reactions?.off(
-      "Relations.redaction" as RelationsEvent.Redaction,
-      createRelations,
-    );
-  });
-</script>
-
-<div
-  class="event"
-  role="log"
-  onmouseover={() => (mainHover = true)}
-  onfocus={() => (mainHover = true)}
-  onmouseout={() => (mainHover = false)}
-  onblur={() => (mainHover = false)}
->
-  {#if event && hover}
-    <div class="backdrop" transition:fade={{ duration: 100 }}></div>
-  {/if}
-
-  {#if sender && !(prev && prev?.getType() === event?.getType() && prev.sender?.userId === event.sender?.userId)}
-    {@const color = memberColor(sender, $theme)}
-    {@const avatarMxc = sender.getMxcAvatarUrl()}
-    {#if avatarMxc}
-      {@const avatar = $matrixClient.mxcUrlToHttp(avatarMxc, 32, 32)}
-      <img
-        class="avatar"
-        src={avatar}
-        alt={sender.name}
-        width="32"
-        height="32"
-      />
-    {:else}
-      <div
-        class="avatar avatar-placeholder icon"
-        style:background={hexFromArgb(
-          $theme.mode === "dark" ? color.dark.color : color.light.color,
-        )}
-        style:color={hexFromArgb(
-          $theme.mode === "dark" ? color.dark.onColor : color.light.onColor,
-        )}
-      >
-        person
-      </div>
-    {/if}
-
-    <div
-      class="sender"
-      style:color={hexFromArgb(
-        $theme.mode === "dark" ? color.dark.color : color.light.color,
-      )}
-    >
-      <strong>{sender.name}</strong>
-      {#if replay || replayPlayer}
-        <div class="dots">
-          {#each new Array(3) as _, i}
-            <div
-              style:animation-delay={i * 0.2 + "s"}
-              style:background={hexFromArgb(
-                $theme.mode === "dark" ? color.dark.color : color.light.color,
-              )}
-              class="dot"
-            ></div>
-          {/each}
-        </div>
-      {/if}
-    </div>
-  {/if}
-
-  <div class="content">
-    {#if event}
-      {#if event.getType() === "m.room.message"}
-        <MatrixMessageEvent {event} bind:replay />
-      {:else}
-        <details>
-          <summary>{event.getType()}</summary>
-          <pre>{JSON.stringify(event.event, null, 2)}</pre>
-        </details>
-      {/if}
-    {/if}
-    {#if replayPlayer}
-      <CharRecorder replay={replayPlayer} cursor={true} keys={true} />
-    {/if}
-  </div>
-
-  {#if event && hover}
-    <div
-      role="toolbar"
-      tabindex="0"
-      class="toolbar"
-      transition:fade={{ duration: 100 }}
-      onmouseover={() => (toolbarHover = true)}
-      onfocus={() => (toolbarHover = true)}
-      onmouseout={() => (toolbarHover = false)}
-      onblur={() => (toolbarHover = false)}
-    >
-      <button class="icon">add_reaction</button>
-      <button class="icon">reply</button>
-      {#if event.event.content?.["m.replay"]}
-        {#if replay}
-          <button class="icon" onclick={() => (replay = undefined)}>stop</button
-          >
-        {:else}
-          <button
-            class="icon"
-            onclick={() => (replay = event.event.content?.["m.replay"])}
-            >replay</button
-          >
-        {/if}
-      {/if}
-      <button class="icon">more_horiz</button>
-    </div>
-  {/if}
-
-  {#if $annotations && $annotations.length > 0}
-    <div class="reactions">
-      {#each $annotations as [reaction, events]}
-        <button class="reaction"
-          >{reaction} <span class="count">{events.size}</span></button
-        >
-      {/each}
-    </div>
-  {/if}
-</div>
-
-<style lang="scss">
-  details {
-    opacity: 0.5;
-    word-wrap: break-word;
-  }
-
-  pre {
-    text-wrap: wrap;
-    word-wrap: break-word;
-  }
-
-  .toolbar {
-    position: absolute;
-    top: -26px;
-    right: 0;
-    background: var(--md-sys-color-secondary-container);
-    color: var(--md-sys-color-on-secondary-container);
-    padding: 4px;
-    border-radius: 4px;
-    display: flex;
-    z-index: 100;
-
-    button {
-      font-size: 16px;
-      width: 24px;
-      height: 24px;
-    }
-  }
-
-  .dots {
-    display: flex;
-    gap: 2px;
-  }
-
-  @keyframes bounce {
-    0%,
-    100% {
-      transform: translateY(0);
-    }
-    50% {
-      transform: translateY(-4px);
-    }
-  }
-
-  .dot {
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    animation: bounce 1s infinite;
-  }
-
-  .sender,
-  .avatar {
-    margin-block: 2px 4px;
-  }
-
-  .avatar {
-    grid-area: avatar;
-    width: 32px;
-    height: 32px;
-    border-radius: 50%;
-    translate: 0 2px;
-  }
-
-  div.avatar {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .sender {
-    display: flex;
-    grid-area: sender;
-    align-items: center;
-    gap: 8px;
-  }
-
-  .reactions {
-    grid-area: reactions;
-    margin-top: 2px;
-    display: flex;
-    gap: 4px;
-  }
-
-  .reaction {
-    border: 1px solid var(--md-sys-color-outline);
-    padding: 6px;
-    border-radius: 6px;
-    height: 24px;
-    display: flex;
-    font-size: 12px;
-
-    > .count {
-      font-size: 10px;
-    }
-  }
-
-  .event {
-    display: grid;
-    position: relative;
-    padding-inline: 0.5em;
-    margin-inline: 0.5em;
-    padding-block: 0.25em;
-    border-radius: 4px;
-
-    grid-template-areas:
-      "avatar sender date"
-      "avatar content content"
-      "none reactions reactions";
-    grid-template-columns: 32px 1fr auto;
-  }
-
-  .content {
-    grid-area: content;
-    text-wrap: wrap;
-    word-wrap: break-word;
-  }
-
-  .reactions,
-  .content,
-  .sender {
-    margin-inline: 8px;
-  }
-
-  .backdrop {
-    position: absolute;
-    inset: 0;
-    z-index: -1;
-    opacity: 0.25;
-
-    background: var(--md-sys-color-surface-variant);
-
-    border-radius: 8px;
-  }
-</style>
--- a/src/lib/chat/events/MatrixMessageEvent.svelte
+++ b/src/lib/chat/events/MatrixMessageEvent.svelte
@@ -1,56 +0,0 @@
-<script lang="ts">
-  import CharRecorder from "$lib/charrecorder/CharRecorder.svelte";
-  import type { Replay } from "$lib/charrecorder/core/types";
-  import type { MatrixClient, MatrixEvent } from "matrix-js-sdk";
-  import { fade } from "svelte/transition";
-  import { matrixClient } from "../chat";
-
-  let { event, replay = $bindable() }: { event: MatrixEvent; replay?: Replay } =
-    $props();
-</script>
-
-<div>
-  {#if event.event.content?.msgtype === "m.image"}
-    <img
-      src={$matrixClient.mxcUrlToHttp(event.event.content["url"])}
-      alt={event.event.content["body"]}
-    />
-  {:else}
-    <span class="content" style:opacity={replay && 0}
-      >{event.event.content?.["body"]}</span
-    >
-  {/if}
-  {#if replay}
-    <div class="replay" out:fade>
-      <CharRecorder
-        {replay}
-        cursor={true}
-        keys={true}
-        ondone={() => (replay = undefined)}
-      />
-    </div>
-  {/if}
-</div>
-
-<style lang="scss">
-  div {
-    position: relative;
-    min-height: 1.5em;
-  }
-
-  img {
-    max-width: 100%;
-    max-height: 16em;
-    border-radius: 8px;
-  }
-
-  .content {
-    transition: opacity 0.2s;
-  }
-
-  .replay {
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
-</style>
--- a/src/lib/chat/matrix-rx/client.ts
+++ b/src/lib/chat/matrix-rx/client.ts
@@ -1,71 +0,0 @@
-import type { Direction, MatrixClient, Room } from "matrix-js-sdk";
-import {
-  filter,
-  map,
-  type Observable,
-  of,
-  distinctUntilChanged,
-  merge,
-} from "rxjs";
-import { fromMatrixClientEvent } from "./events";
-
-function roomListDistinct(prev: Room[], curr: Room[]) {
-  if (prev.length !== curr.length) return false;
-  for (let i = 0; i < prev.length; i++) {
-    if (prev[i]!.roomId !== curr[i]!.roomId) return false;
-  }
-  return true;
-}
-
-export class MatrixRx {
-  topLevelRooms$: Observable<Room[]>;
-
-  topLevelSpaces$: Observable<Room[]>;
-
-  topLevelChats$: Observable<Room[]>;
-
-  constructor(private client: MatrixClient) {
-    this.topLevelRooms$ = merge(
-      of([]),
-      fromMatrixClientEvent(client, "Room"),
-      fromMatrixClientEvent(client, "deleteRoom"),
-      fromMatrixClientEvent(client, "Room.myMembership"),
-      fromMatrixClientEvent(client, "Room.CurrentStateUpdated").pipe(
-        filter(
-          ([_room, prev, curr]) =>
-            prev.getStateEvents("m.space.parent").length !==
-            curr.getStateEvents("m.space.parent").length,
-        ),
-      ),
-    ).pipe(
-      map(() =>
-        this.client.getVisibleRooms().filter(
-          (room) =>
-            room.getMyMembership() !== "leave" &&
-            room
-              .getLiveTimeline()
-              .getState("f" as Direction.Forward)
-              ?.getStateEvents("m.space.parent").length === 0,
-        ),
-      ),
-      distinctUntilChanged(roomListDistinct),
-    );
-
-    this.topLevelSpaces$ = this.topLevelRooms$.pipe(
-      map((rooms) => rooms.filter((room) => room.isSpaceRoom())),
-      distinctUntilChanged(roomListDistinct),
-    );
-
-    this.topLevelChats$ = this.topLevelRooms$.pipe(
-      map((rooms) => rooms.filter((room) => !room.isSpaceRoom())),
-      distinctUntilChanged(roomListDistinct),
-    );
-  }
-}
-
-export class SpaceRx {
-  constructor(
-    private client: MatrixClient,
-    private space: Room,
-  ) {}
-}
--- a/src/lib/chat/matrix-rx/events.ts
+++ b/src/lib/chat/matrix-rx/events.ts
@@ -1,11 +0,0 @@
-import type { ClientEventHandlerMap, MatrixClient } from "matrix-js-sdk";
-import { fromEvent, type Observable } from "rxjs";
-
-export function fromMatrixClientEvent<T extends keyof ClientEventHandlerMap>(
-  client: MatrixClient,
-  eventName: `${T}`, // hack so we can use strings instead of enums
-): Observable<Parameters<ClientEventHandlerMap[T]>> {
-  return fromEvent(client, eventName) as Observable<
-    Parameters<ClientEventHandlerMap[T]>
-  >;
-}
--- a/src/lib/chat/matrix-rx/rooms.ts
+++ b/src/lib/chat/matrix-rx/rooms.ts
@@ -1,85 +0,0 @@
-import type {
-  MatrixClient,
-  MatrixEvent,
-  Room,
-  Direction,
-  RoomState,
-  RoomStateEventHandlerMap,
-  EventType,
-} from "matrix-js-sdk";
-import { fromMatrixClientEvent } from "./events";
-import {
-  map,
-  filter,
-  merge,
-  startWith,
-  Observable,
-  of,
-  fromEvent,
-  concat,
-  defer,
-} from "rxjs";
-
-export function matrixRoom$(
-  client: MatrixClient,
-  roomId: string | undefined,
-): Observable<Room | undefined> {
-  return merge([
-    fromMatrixClientEvent(client, "Room").pipe(
-      filter(([room]) => room.roomId === roomId),
-    ),
-    fromMatrixClientEvent(client, "deleteRoom").pipe(
-      filter(([id]) => id === roomId),
-    ),
-  ]).pipe(
-    startWith([]),
-    map(() => client.getRoom(roomId) ?? undefined),
-  );
-}
-
-export function roomTimeline$(
-  client: MatrixClient,
-  room: Room | undefined,
-): Observable<MatrixEvent[] | undefined> {
-  if (!room) return of(undefined);
-  const eventTimeline = room.getLiveTimeline();
-
-  return fromMatrixClientEvent(client, "Room.timeline").pipe(
-    filter(
-      ([, eventRoom]) =>
-        eventRoom !== undefined && eventRoom.roomId === room.roomId,
-    ),
-    startWith([]),
-    map(() => eventTimeline.getEvents()),
-  );
-}
-
-export function roomCurrentStateEvents$(
-  client: MatrixClient,
-  room: Room,
-  eventType: EventType | string,
-): Observable<MatrixEvent[]> {
-  return concat(
-    defer(() =>
-      of(
-        room
-          .getLiveTimeline()
-          .getState("f" as Direction.Forward)
-          ?.getStateEvents(eventType) ?? [],
-      ),
-    ),
-    fromMatrixClientEvent(client, "Room.CurrentStateUpdated").pipe(
-      filter(([room]) => room.roomId === room.roomId),
-      map(([_room, _prev, curr]) => curr.getStateEvents(eventType)),
-    ),
-  );
-}
-
-export function fromRoomStateEvent<T extends keyof RoomStateEventHandlerMap>(
-  state: RoomState,
-  eventName: `${T}`,
-): Observable<Parameters<RoomStateEventHandlerMap[T]>> {
-  return fromEvent(state, eventName) as Observable<
-    Parameters<RoomStateEventHandlerMap[T]>
-  >;
-}
--- a/src/lib/chat/matrix-rx/timeline.ts
+++ b/src/lib/chat/matrix-rx/timeline.ts
@@ -1,19 +0,0 @@
-import type { EventTimeline, MatrixClient, MatrixEvent } from "matrix-js-sdk";
-import { filter, map, of, startWith, type Observable } from "rxjs";
-import { fromMatrixClientEvent } from "./events";
-
-export function roomTimeline(
-  client: MatrixClient,
-  roomId: string | undefined,
-): Observable<MatrixEvent[]> {
-  if (!roomId) return of([]);
-  const room = client.getRoom(roomId);
-  if (!room) return of([]);
-  const eventTimeline = room.getLiveTimeline();
-
-  return fromMatrixClientEvent(client, "Room.timeline").pipe(
-    filter(([, room]) => room?.roomId === roomId),
-    startWith([]),
-    map(() => eventTimeline.getEvents()),
-  );
-}
--- a/src/lib/components/Action.svelte
+++ b/src/lib/components/Action.svelte
@@ -3,53 +3,47 @@
  import type { KeyInfo } from "$lib/serial/keymap-codes";
  import { action as title } from "$lib/title";
  import { osLayout } from "$lib/os-layout";
+  import LL from "../../i18n/i18n-svelte";

-  let {
-    action,
-    display,
-  }: { action: number | KeyInfo; display: "inline-keys" | "keys" } = $props();
+  export let action: number | KeyInfo;
+  export let display: "inline-keys" | "keys" = "inline-keys";

-  let info = $derived(
+  $: info =
    typeof action === "number"
-      ? (KEYMAP_CODES.get(action) ?? { code: action })
-      : action,
-  );
-  let dynamicMapping = $derived(info.keyCode && $osLayout.get(info.keyCode));
+      ? KEYMAP_CODES.get(action) ?? { code: action }
+      : action;
+  $: dynamicMapping = info.keyCode && $osLayout.get(info.keyCode);

-  let tooltip = $derived(
+  $: tooltip =
    `&lt;${info.id ?? `0x${info.code.toString(16)}`}&gt; ` +
-      (info.title ?? "") +
-      (info.variant === "left"
-        ? " (left)"
-        : info.variant === "right"
-          ? " (right)"
-          : ""),
-  );
+    (info.title ?? "") +
+    (info.variant === "left"
+      ? " (left)"
+      : info.variant === "right"
+        ? " (right)"
+        : "");
 </script>

-{#if display === "keys"}
+{#if dynamicMapping}
+  <span
+    use:title={{ title: $LL.actionSearch.LIVE_LAYOUT_INFO() }}
+    class="dynamic"
+    class:left={info.variant === "left"}
+    class:right={info.variant === "right"}
+    class:inline={display === "inline-keys"}>{dynamicMapping}</span
+  >
+{:else if display === "keys"}
  <kbd
    class:icon={!!info.icon}
    class:left={info.variant === "left"}
    class:right={info.variant === "right"}
    use:title={{ title: tooltip }}
  >
-    {dynamicMapping ??
-      info.icon ??
-      info.display ??
-      info.id ??
-      `0x${info.code.toString(16)}`}
+    {info.icon ?? info.display ?? info.id ?? `0x${info.code.toString(16)}`}
  </kbd>
 {:else if display === "inline-keys"}
-  {#if !info.icon && dynamicMapping?.length === 1}
+  {#if !info.icon && info.id?.length === 1}
    <span
-      use:title={{ title: tooltip }}
-      class:left={info.variant === "left"}
-      class:right={info.variant === "right"}>{dynamicMapping}</span
-    >
-  {:else if !info.icon && info.id?.length === 1}
-    <span
-      use:title={{ title: tooltip }}
      class:left={info.variant === "left"}
      class:right={info.variant === "right"}>{info.id}</span
    >
@@ -61,8 +55,7 @@
      class:icon={!!info.icon}
      use:title={{ title: tooltip }}
    >
-      {dynamicMapping ??
-        info.icon ??
+      {info.icon ??
        info.display ??
        info.id ??
        `0x${info.code.toString(16)}`}</kbd
--- a/src/lib/components/ActionListItem.svelte
+++ b/src/lib/components/ActionListItem.svelte
@@ -1,24 +1,17 @@
 <script lang="ts">
  import { KEYMAP_CODES } from "$lib/serial/keymap-codes";
  import type { KeyInfo } from "$lib/serial/keymap-codes";
-  import LL from "$i18n/i18n-svelte";
+  import LL from "../../i18n/i18n-svelte";
  import Action from "$lib/components/Action.svelte";
-  import type { MouseEventHandler } from "svelte/elements";

-  let {
-    id,
-    onclick,
-  }: { id: number | KeyInfo; onclick?: MouseEventHandler<HTMLButtonElement> } =
-    $props();
+  export let id: number | KeyInfo;

-  let key = $derived(
-    (typeof id === "number" ? KEYMAP_CODES.get(id) ?? id : id) as
-      | number
-      | KeyInfo,
-  );
+  $: key = (typeof id === "number" ? KEYMAP_CODES.get(id) ?? id : id) as
+    | number
+    | KeyInfo;
 </script>

-<button {onclick}>
+<button on:click>
  {#if typeof key === "object"}
    <div class="title">
      <b>
--- a/src/lib/components/ActionString.svelte
+++ b/src/lib/components/ActionString.svelte
@@ -2,11 +2,8 @@
  import Action from "$lib/components/Action.svelte";
  import type { KeyInfo } from "$lib/serial/keymap-codes";

-  let {
-    actions,
-    display = "inline-keys",
-  }: { actions: Array<number | KeyInfo>; display?: "keys" | "inline-keys" } =
-    $props();
+  export let actions: Array<number | KeyInfo>;
+  export let display: "keys" | "inline-keys" = "inline-keys";
 </script>

 {#each actions as action, i (`${typeof action === "number" ? action : action.code}:${i}`)}
--- a/src/lib/components/PwaStatus.svelte
+++ b/src/lib/components/PwaStatus.svelte
@@ -6,7 +6,7 @@
 </script>

 {#if $needRefresh}
-  <button title="Update ready" onclick={() => updateServiceWorker(true)}
+  <button title="Update ready" on:click={() => updateServiceWorker(true)}
    >Update <span class="icon">update</span></button
  >
 {:else if $offlineReady}
--- a/src/lib/components/Terminal.svelte
+++ b/src/lib/components/Terminal.svelte
@@ -9,11 +9,11 @@
    io.scrollTo({ top: io.scrollHeight });
  }

-  let value: string = $state("");
+  let value: string;
  let io: HTMLDivElement;
 </script>

-<form onsubmit={submit}>
+<form on:submit={submit}>
  <div bind:this={io} class="io">
    {#each $serialLog as { type, value }}
      {#if type === "input"}
@@ -24,10 +24,10 @@
        <p transition:slide>{value}</p>
      {/if}
    {/each}
-    <div class="anchor"></div>
+    <div class="anchor" />
  </div>
  <fieldset>
-    <input onsubmit={submit} bind:value />
+    <input on:submit={submit} bind:value />
  </fieldset>
 </form>

--- a/src/lib/components/Tooltip.svelte
+++ b/src/lib/components/Tooltip.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-  let { title, shortcut }: { title?: string; shortcut?: string } = $props();
+  export let title: string | undefined;
+  export let shortcut: string | undefined;
 </script>

 {#if title}
@@ -17,11 +18,5 @@
 <style lang="scss">
  p {
    margin-block: 0;
-
-    :global(kbd.icon) {
-      display: inline-flex;
-      font-size: inherit;
-      translate: 0 0.2em;
-    }
  }
 </style>
--- a/src/lib/components/layout/ActionSelector.svelte
+++ b/src/lib/components/layout/ActionSelector.svelte
@@ -5,22 +5,13 @@
    KEYMAP_IDS,
  } from "$lib/serial/keymap-codes";
  import FlexSearch from "flexsearch";
-  import { onMount } from "svelte";
+  import { createEventDispatcher, onMount } from "svelte";
  import ActionListItem from "$lib/components/ActionListItem.svelte";
-  import LL from "$i18n/i18n-svelte";
+  import LL from "../../../i18n/i18n-svelte";
  import { action } from "$lib/title";

-  let {
-    currentAction = undefined,
-    nextAction = undefined,
-    onselect,
-    onclose,
-  }: {
-    currentAction?: number;
-    nextAction?: number;
-    onselect: (id: number) => void;
-    onclose: () => void;
-  } = $props();
+  export let currentAction: number | undefined = undefined;
+  export let nextAction: number | undefined = undefined;

  onMount(() => {
    searchBox.focus();
@@ -48,13 +39,13 @@

  function select(id?: number) {
    if (id !== undefined) {
-      onselect(id);
+      dispatch("select", id);
    }
  }

  function keyboardNavigation(event: KeyboardEvent) {
-    if (event.shiftKey && event.key === "Enter" && exact !== undefined) {
-      onselect(exact);
+    if (event.shiftKey && event.key === "Enter") {
+      dispatch("select", exact);
    } else if (event.key === "ArrowDown") {
      const element =
        resultList.querySelector("li:focus-within")?.nextSibling ??
@@ -76,45 +67,40 @@
    event.preventDefault();
  }

-  let results: number[] = $state([]);
-  let exact: number | undefined = $state(undefined);
-  let code: number = $state(Number.NaN);
+  let results: number[] = [];
+  let exact: number | undefined = undefined;
+  let code: number = Number.NaN;

+  const dispatch = createEventDispatcher();
  let searchBox: HTMLInputElement;
  let resultList: HTMLUListElement;
-  let filter = $state(new Set<number>());
+  let filter: Set<number>;
 </script>

 <svelte:window on:keydown={keyboardNavigation} />

-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-<dialog
-  open
-  onclick={(event) => {
-    if (event.target === event.currentTarget) onclose();
-  }}
->
+<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
+<dialog open on:click|self={() => dispatch("close")}>
  <div class="content">
    <div class="search-row">
      <input
        type="search"
        bind:this={searchBox}
-        oninput={search}
-        onkeypress={(event) => {
+        on:input={search}
+        on:keypress={(event) => {
          if (event.key === "Enter") {
            select(exact);
          }
        }}
        placeholder={$LL.actionSearch.PLACEHOLDER()}
      />
-      <button onclick={() => select(0)} use:action={{ shortcut: "shift+esc" }}
+      <button on:click={() => select(0)} use:action={{ shortcut: "shift+esc" }}
        >{$LL.actionSearch.DELETE()}</button
      >
      <button
        use:action={{ title: $LL.modal.CLOSE(), shortcut: "esc" }}
        class="icon"
-        onclick={onclose}>close</button
+        on:click={() => dispatch("close")}>close</button
      >
    </div>
    <fieldset class="filters">
@@ -154,12 +140,12 @@
      {#if exact !== undefined}
        <li class="exact">
          <i>Exact match</i>
-          <ActionListItem id={exact} onclick={() => select(exact)} />
+          <ActionListItem id={exact} on:click={() => select(exact)} />
        </li>
      {/if}
      {#if !exact && code}
        {#if code >= 2 ** 5 && code < 2 ** 13}
-          <li><button onclick={() => select(code)}>USE CODE</button></li>
+          <li><button on:click={() => select(code)}>USE CODE</button></li>
        {:else}
          <li>Action code is out of range</li>
        {/if}
@@ -170,7 +156,7 @@
            ? Array.from(KEYMAP_CODES, ([it]) => it)
            : results}
        {#each filter ? resultValue.filter( (it) => filter.has(it), ) : resultValue as id (id)}
-          <li><ActionListItem {id} onclick={() => select(id)} /></li>
+          <li><ActionListItem {id} on:click={() => select(id)} /></li>
        {/each}
      {/if}
    </ul>
--- a/src/lib/components/layout/GenericLayout.svelte
+++ b/src/lib/components/layout/GenericLayout.svelte
@@ -10,7 +10,7 @@
  import { get } from "svelte/store";
  import type { Writable } from "svelte/store";
  import KeyboardKey from "$lib/components/layout/KeyboardKey.svelte";
-  import { getContext, mount, unmount } from "svelte";
+  import { getContext } from "svelte";
  import type { VisualLayoutConfig } from "./visual-layout.js";
  import { changes, ChangeType, layout } from "$lib/undo-redo";
  import { fly } from "svelte/transition";
@@ -30,8 +30,8 @@
    console.assert(iconFontSize % 1 === 0, "Icon font size must be an integer");
  }

-  let { visualLayout }: { visualLayout: VisualLayout } = $props();
-  let layoutInfo = $state(compileLayout(visualLayout));
+  export let visualLayout: VisualLayout;
+  $: layoutInfo = compileLayout(visualLayout);

  function getCenter(key: CompiledLayoutKey): [x: number, y: number] {
    return [key.pos[0] + key.size[0] / 2, key.pos[1] + key.size[1] / 2];
@@ -127,26 +127,11 @@
    const clickedGroup = groupParent.children.item(index) as SVGGElement;
    const nextAction = get(layout)[get(activeLayer)]?.[keyInfo.id];
    const currentAction = get(deviceLayout)[get(activeLayer)]?.[keyInfo.id];
-    const component = mount(ActionSelector, {
+    const component = new ActionSelector({
      target: document.body,
      props: {
        currentAction,
        nextAction: nextAction?.isApplied ? undefined : nextAction?.action,
-        onclose() {
-          closed();
-        },
-        onselect(action) {
-          changes.update((changes) => {
-            changes.push({
-              type: ChangeType.Layout,
-              id: keyInfo.id,
-              layer: get(activeLayer),
-              action,
-            });
-            return changes;
-          });
-          closed();
-        },
      },
    });
    const dialog = document.querySelector("dialog > div") as HTMLDivElement;
@@ -182,8 +167,22 @@

      await dialogAnimation.finished;

-      unmount(component);
+      component.$destroy();
    }
+
+    component.$on("close", closed);
+    component.$on("select", ({ detail }) => {
+      changes.update((changes) => {
+        changes.push({
+          type: ChangeType.Layout,
+          id: keyInfo.id,
+          layer: get(activeLayer),
+          action: detail,
+        });
+        return changes;
+      });
+      closed();
+    });
  }

  let focusKey: CompiledLayoutKey;
@@ -202,9 +201,9 @@
    <KeyboardKey
      {i}
      {key}
-      onfocusin={() => (focusKey = key)}
-      onclick={() => edit(i)}
-      onkeypress={({ key }) => {
+      on:focusin={() => (focusKey = key)}
+      on:click={() => edit(i)}
+      on:keypress={({ key }) => {
        if (key === "Enter") {
          edit(i);
        }
--- a/src/lib/components/layout/KeyText.svelte
+++ b/src/lib/components/layout/KeyText.svelte
@@ -12,21 +12,14 @@
    getContext<VisualLayoutConfig>("visual-layout-config");
  const activeLayer = getContext<Writable<number>>("active-layer");

-  let {
-    key,
-    fontSizeMultiplier = 1,
-    middle,
-    pos,
-    rotate,
-    positions,
-  }: {
-    key: CompiledLayoutKey;
-    fontSizeMultiplier?: number;
-    middle: [number, number];
-    pos: [number, number];
-    rotate: number;
-    positions: [[number, number], [number, number], [number, number]];
-  } = $props();
+  export let key: CompiledLayoutKey;
+  export let fontSizeMultiplier = 1;
+
+  export let middle: [number, number];
+  export let pos: [number, number];
+  export let rotate: number;
+
+  export let positions: [[number, number], [number, number], [number, number]];
 </script>

 {#each positions as position, layer}
--- a/src/lib/components/layout/KeyboardKey.svelte
+++ b/src/lib/components/layout/KeyboardKey.svelte
@@ -3,41 +3,24 @@
  import { getContext } from "svelte";
  import type { VisualLayoutConfig } from "./visual-layout.js";
  import KeyText from "$lib/components/layout/KeyText.svelte";
-  import type {
-    FocusEventHandler,
-    KeyboardEventHandler,
-    MouseEventHandler,
-  } from "svelte/elements";

  const { scale, margin, strokeWidth } = getContext<VisualLayoutConfig>(
    "visual-layout-config",
  );
+  export let i: number;
+  export let key: CompiledLayoutKey;

-  let {
-    i,
-    key,
-    onclick,
-    onkeypress,
-    onfocusin,
-  }: {
-    i: number;
-    key: CompiledLayoutKey;
-    onclick: MouseEventHandler<SVGGElement>;
-    onkeypress: KeyboardEventHandler<SVGGElement>;
-    onfocusin: FocusEventHandler<SVGGElement>;
-  } = $props();
-
-  let posX = $derived(key.pos[0] * scale);
-  let posY = $derived(key.pos[1] * scale);
-  let sizeX = $derived(key.size[0] * scale);
-  let sizeY = $derived(key.size[1] * scale);
+  $: posX = key.pos[0] * scale;
+  $: posY = key.pos[1] * scale;
+  $: sizeX = key.size[0] * scale;
+  $: sizeY = key.size[1] * scale;
 </script>

 <g
  class="key-group"
-  {onclick}
-  {onkeypress}
-  {onfocusin}
+  on:click
+  on:keypress
+  on:focusin
  role="button"
  tabindex={i + 1}
 >
--- a/src/lib/components/layout/Layout.svelte
+++ b/src/lib/components/layout/Layout.svelte
@@ -7,7 +7,7 @@
  import type { VisualLayout } from "$lib/serialization/visual-layout";
  import { fade } from "svelte/transition";

-  let device = $derived($serialPort?.device);
+  $: device = $serialPort?.device;
  const activeLayer = getContext<Writable<number>>("active-layer");

  const layers = [
@@ -21,10 +21,6 @@
      import("$lib/assets/layouts/one.yml").then(
        (it) => it.default as VisualLayout,
      ),
-    TWO: () =>
-      import("$lib/assets/layouts/one.yml").then(
-        (it) => it.default as VisualLayout,
-      ),
    LITE: () =>
      import("$lib/assets/layouts/lite.yml").then(
        (it) => it.default as VisualLayout,
@@ -33,14 +29,6 @@
      import("$lib/assets/layouts/generic/103-key.yml").then(
        (it) => it.default as VisualLayout,
      ),
-    M4G: () =>
-      import("$lib/assets/layouts/m4g.yml").then(
-        (it) => it.default as VisualLayout,
-      ),
-    M4GR: () =>
-      import("$lib/assets/layouts/m4gr.yml").then(
-        (it) => it.default as VisualLayout,
-      ),
  };
 </script>

@@ -52,7 +40,7 @@
          <button
            class="icon"
            use:action={{ title, shortcut: `alt+${value + 1}` }}
-            onclick={() => ($activeLayer = value)}
+            on:click={() => ($activeLayer = value)}
            class:active={$activeLayer === value}
          >
            {icon}
@@ -74,7 +62,7 @@

    width: 100%;
    height: 100%;
-    max-height: 20cm;
+    margin-bottom: 96px;
  }

  fieldset {
--- a/src/lib/dialogs/ConfirmDialog.svelte
+++ b/src/lib/dialogs/ConfirmDialog.svelte
@@ -1,24 +1,16 @@
 <script lang="ts">
+  import { createEventDispatcher } from "svelte";
  import Dialog from "$lib/dialogs/Dialog.svelte";
  import ActionString from "$lib/components/ActionString.svelte";

-  let {
-    title,
-    message,
-    abortTitle,
-    confirmTitle,
-    actions = [],
-    onabort,
-    onconfirm,
-  }: {
-    title: string;
-    message?: string;
-    abortTitle: string;
-    confirmTitle: string;
-    actions: number[];
-    onabort: () => void;
-    onconfirm: () => void;
-  } = $props();
+  export let title: string;
+  export let message: string | undefined;
+  export let abortTitle: string;
+  export let confirmTitle: string;
+
+  export let actions: number[] = [];
+
+  const dispatch = createEventDispatcher();
 </script>

 <Dialog>
@@ -28,8 +20,10 @@
  {/if}
  <p><ActionString {actions} /></p>
  <div class="buttons">
-    <button onclick={onabort}>{abortTitle}</button>
-    <button class="primary" onclick={onconfirm}>{confirmTitle}</button>
+    <button on:click={() => dispatch("abort")}>{abortTitle}</button>
+    <button class="primary" on:click={() => dispatch("confirm")}
+      >{confirmTitle}</button
+    >
  </div>
 </Dialog>

--- a/src/lib/dialogs/Dialog.svelte
+++ b/src/lib/dialogs/Dialog.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
-  import { onMount, type Snippet } from "svelte";
-
-  let { children }: { children: Snippet } = $props();
+  import { onMount } from "svelte";

  onMount(() => {
    modal.showModal();
@@ -11,7 +9,7 @@
 </script>

 <dialog bind:this={modal}>
-  {@render children()}
+  <slot />
 </dialog>

 <style lang="scss">
--- a/src/lib/dialogs/PickChangesDialog.svelte
+++ b/src/lib/dialogs/PickChangesDialog.svelte
@@ -8,7 +8,7 @@
  } from "$lib/undo-redo";
  import { ChangeType, chords } from "$lib/undo-redo";
  import ActionString from "$lib/components/ActionString.svelte";
-  import LL from "$i18n/i18n-svelte";
+  import LL from "../../i18n/i18n-svelte";
  import { KEYMAP_IDS } from "$lib/serial/keymap-codes";

  export let changes: Change[] = [
--- a/src/lib/learn/chords.ts
+++ b/src/lib/learn/chords.ts
@@ -1,101 +0,0 @@
-import { osLayout } from "$lib/os-layout";
-import { KEYMAP_CODES } from "$lib/serial/keymap-codes";
-import { persistentWritable } from "$lib/storage";
-import { type ChordInfo, chords } from "$lib/undo-redo";
-import { derived } from "svelte/store";
-
-export const words = derived(
-  [chords, osLayout],
-  ([chords, layout]) =>
-    new Map<string, ChordInfo>(
-      chords
-        .map((chord) => ({
-          chord,
-          output: chord.phrase.map((action) =>
-            layout.get(KEYMAP_CODES.get(action)?.keyCode ?? ""),
-          ),
-        }))
-        .filter(({ output }) => output.every((it) => !!it))
-        .map(({ chord, output }) => [output.join("").trim(), chord] as const),
-    ),
-);
-
-interface Score {
-  lastTyped: number;
-  score: number;
-  total: number;
-}
-
-export const scores = persistentWritable<Record<string, Score>>("scores", {});
-
-export const learnConfigDefault = {
-  maxScore: 3,
-  minScore: -3,
-  scoreBlend: 0.5,
-  weakRate: 0.8,
-  weakBoost: 0.5,
-  maxWeak: 3,
-  newRate: 0.3,
-  initialNewRate: 0.9,
-  initialCount: 10,
-};
-export const learnConfigStored = persistentWritable<
-  Partial<typeof learnConfigDefault>
->("learn-config", {});
-export const learnConfig = derived(learnConfigStored, (config) => ({
-  ...learnConfigDefault,
-  ...config,
-}));
-
-let lastWord: string | undefined;
-
-function shuffle<T>(array: T[]): T[] {
-  for (let i = array.length - 1; i > 0; i--) {
-    const j = Math.floor(Math.random() * (i + 1));
-    [array[i], array[j]] = [array[j]!, array[i]!];
-  }
-  return array;
-}
-
-function randomLog2<T>(array: T[], max = array.length): T | undefined {
-  return array[
-    Math.floor(Math.pow(2, Math.log2(Math.random() * Math.log2(max))))
-  ];
-}
-
-export const nextWord = derived(
-  [words, scores, learnConfig],
-  ([words, scores, config]) => {
-    const values = Object.entries(scores).filter(([it]) => it !== lastWord);
-
-    values.sort(([, a], [, b]) => a.score - b.score);
-    const weakCount =
-      (values.findIndex(([, { score }]) => score > 0) + 1 ||
-        values.length + 1) - 1;
-    const weak = randomLog2(values, weakCount);
-    if (weak && Math.random() / weakCount < config.weakRate) {
-      lastWord = weak[0];
-      return weak[0];
-    }
-
-    values.sort(([, { lastTyped: a }], [, { lastTyped: b }]) => a - b);
-    const recent = randomLog2(values);
-    const newRate =
-      values.length < config.initialCount
-        ? config.initialNewRate
-        : config.newRate;
-    if (
-      recent &&
-      (Math.random() < Math.min(1, Math.max(0, weakCount / config.maxWeak)) ||
-        Math.random() > newRate)
-    ) {
-      lastWord = recent[0];
-      return recent[0];
-    }
-
-    const newWord = shuffle(Array.from(words.keys())).find((it) => !scores[it]);
-    const word = newWord || recent?.[0] || weak?.[0];
-    lastWord = word;
-    return word;
-  },
-);
--- a/src/lib/learn/stats.ts
+++ b/src/lib/learn/stats.ts
@@ -1,11 +0,0 @@
-import { persistentWritable } from "$lib/storage";
-
-interface ChordStats {
-  level: number;
-  lastUprank: number;
-}
-
-export const chordStats = persistentWritable<Record<string, ChordStats>>(
-  "chord-stats",
-  {},
-);
--- a/src/lib/popup.ts
+++ b/src/lib/popup.ts
@@ -1,28 +1,25 @@
 import tippy from "tippy.js";
 import type { Action } from "svelte/action";
-import { unmount, mount, type Component } from "svelte";
+import type { ComponentType, SvelteComponent } from "svelte";

-export const popup: Action<HTMLButtonElement, Component> = (
+export const popup: Action<HTMLButtonElement, ComponentType> = (
  node,
  Component,
 ) => {
-  let component: {} | undefined;
+  let component: SvelteComponent | undefined;
  let target: HTMLElement | undefined;
  const edit = tippy(node, {
    interactive: true,
-    placement: "right",
    trigger: "click",
    onShow(instance) {
      target = instance.popper.querySelector(".tippy-content") as HTMLElement;
      target.classList.add("active");
-      component ??= mount(Component, { target });
+      component ??= new Component({ target });
    },
    onHidden() {
-      if (component) {
-        unmount(component);
-        component = undefined;
-      }
+      component?.$destroy();
      target?.classList.remove("active");
+      component = undefined;
    },
  });

--- a/src/lib/preferences.ts
+++ b/src/lib/preferences.ts
@@ -6,14 +6,9 @@ export interface UserPreferences {
  autoConnect: boolean;
 }

-export interface UserTheme {
-  color: string;
-  mode: "light" | "dark" | "auto";
-}
-
-export const theme = persistentWritable<UserTheme>("user-theme", {
+export const theme = persistentWritable("user-theme", {
  color: "#6D81C7",
-  mode: "dark",
+  mode: "dark" as "light" | "dark" | "auto",
 });

 export const userPreferences = persistentWritable<UserPreferences>(
--- a/src/lib/serial/TauriSerialDialog.svelte
+++ b/src/lib/serial/TauriSerialDialog.svelte
@@ -1,12 +1,9 @@
 <script lang="ts">
-  let {
-    ports,
-    onconfirm,
-  }: {
-    ports: SerialPort[];
-    onconfirm: (port: SerialPort | undefined) => void;
-  } = $props();
-  let selected = $state(ports[0]?.getInfo().name);
+  import { createEventDispatcher } from "svelte";
+
+  export let ports: SerialPort[];
+  const dispatch = createEventDispatcher<{ confirm: SerialPort | undefined }>();
+  let selected = ports[0]?.getInfo().name;
 </script>

 <dialog>
@@ -22,9 +19,12 @@
    >
  {/each}

-  <button onclick={() => onconfirm(undefined)}>Cancel</button>
+  <button on:click={() => dispatch("confirm", undefined)}>Cancel</button>
  <button
-    onclick={() =>
-      onconfirm(ports.find((it) => it.getInfo().name === selected))}>Ok</button
+    on:click={() =>
+      dispatch(
+        "confirm",
+        ports.find((it) => it.getInfo().name === selected),
+      )}>Ok</button
  >
 </dialog>
--- a/src/lib/serial/chord.ts
+++ b/src/lib/serial/chord.ts
@@ -55,19 +55,3 @@ export function deserializeActions(native: bigint): number[] {

  return actions;
 }
-
-/**
- * Hashes a chord input the same way as CCOS
- */
-export function hashChord(actions: number[]) {
-  const chord = new Uint8Array(16);
-  const view = new DataView(chord.buffer);
-  const serialized = serializeActions(actions);
-  view.setBigUint64(0, serialized & 0xffff_ffff_ffff_ffffn, true);
-  view.setBigUint64(8, serialized >> 64n, true);
-  let hash = 2166136261;
-  for (let i = 0; i < 16; i++) {
-    hash = Math.imul(hash ^ view.getUint8(i), 16777619);
-  }
-  return hash & 0x3fff_ffff;
-}
--- a/src/lib/serial/connection.ts
+++ b/src/lib/serial/connection.ts
@@ -53,13 +53,11 @@ export interface ProgressInfo {
 }
 export const syncProgress = writable<ProgressInfo | undefined>(undefined);

-export async function initSerial(manual = false, withSync = true) {
+export async function initSerial(manual = false) {
  const device = get(serialPort) ?? new CharaDevice();
  await device.init(manual);
  serialPort.set(device);
-  if (withSync) {
-    await sync();
-  }
+  await sync();
 }

 export async function sync() {
--- a/src/lib/serial/device.ts
+++ b/src/lib/serial/device.ts
@@ -12,21 +12,15 @@ import { browser } from "$app/environment";

 const PORT_FILTERS: Map<string, SerialPortFilter> = new Map([
  ["ONE M0", { usbProductId: 32783, usbVendorId: 9114 }],
-  ["TWO S3 (pre-production)", { usbProductId: 0x8252, usbVendorId: 0x303a }], // TODO: remove this after everyone has migrated
-  ["TWO S3", { usbProductId: 0x8253, usbVendorId: 0x303a }],
  ["LITE S2", { usbProductId: 33070, usbVendorId: 12346 }],
  ["LITE M0", { usbProductId: 32796, usbVendorId: 9114 }],
  ["X", { usbProductId: 33163, usbVendorId: 12346 }],
-  ["M4G S3", { usbProductId: 4097, usbVendorId: 12346 }],
 ]);

 const KEY_COUNTS = {
  ONE: 90,
-  TWO: 90,
  LITE: 67,
  X: 256,
-  M4G: 90,
-  M4GR: 90,
 } as const;

 if (
@@ -37,13 +31,6 @@ if (
  await import("./tauri-serial");
 }

-if (browser && navigator.serial === undefined && navigator.usb !== undefined) {
-  // @ts-expect-error polyfill
-  navigator.serial = await import("web-serial-polyfill").then(
-    ({ serial }) => serial,
-  );
-}
-
 export async function getViablePorts(): Promise<SerialPort[]> {
  return navigator.serial.getPorts().then((ports) =>
    ports.filter((it) => {
@@ -99,9 +86,9 @@ export class CharaDevice {
  private suspendDebounceId?: number;

  version!: SemVer;
-  company!: "CHARACHORDER" | "FORGE";
-  device!: "ONE" | "TWO" | "LITE" | "X" | "M4G";
-  chipset!: "M0" | "S2" | "S3";
+  company!: "CHARACHORDER";
+  device!: "ONE" | "LITE" | "X";
+  chipset!: "M0" | "S2";
  keyCount!: 90 | 67 | 256;

  get portInfo() {
@@ -137,9 +124,9 @@ export class CharaDevice {
        await this.send(1, "VERSION").then(([version]) => version),
      );
      const [company, device, chipset] = await this.send(3, "ID");
-      this.company = company as typeof this.company;
-      this.device = device as typeof this.device;
-      this.chipset = chipset as typeof this.chipset;
+      this.company = company as "CHARACHORDER";
+      this.device = device as "ONE" | "LITE" | "X";
+      this.chipset = chipset as "M0" | "S2";
      this.keyCount = KEY_COUNTS[this.device];
    } catch (e) {
      alert(e);
@@ -448,95 +435,4 @@ export class CharaDevice {
  async getRamBytesAvailable(): Promise<number> {
    return Number(await this.send(1, "RAM").then(([bytes]) => bytes));
  }
-
-  async updateFirmware(file: File | Blob): Promise<void> {
-    while (this.lock) {
-      await this.lock;
-    }
-    let resolveLock: (result: true) => void;
-    this.lock = new Promise<true>((resolve) => {
-      resolveLock = resolve;
-    });
-    try {
-      if (this.suspendDebounceId) {
-        clearTimeout(this.suspendDebounceId);
-      } else {
-        await this.wake();
-      }
-
-      serialLog.update((it) => {
-        it.push({
-          type: "system",
-          value: "OTA Update",
-        });
-        return it;
-      });
-
-      const writer = this.port.writable!.getWriter();
-      try {
-        await writer.write(new TextEncoder().encode(`RST OTA\r\n`));
-        serialLog.update((it) => {
-          it.push({
-            type: "input",
-            value: "RST OTA",
-          });
-          return it;
-        });
-      } finally {
-        writer.releaseLock();
-      }
-
-      // Wait for the device to be ready
-      const signal = await this.reader.read();
-      serialLog.update((it) => {
-        it.push({
-          type: "output",
-          value: signal.value!.trim(),
-        });
-        return it;
-      });
-
-      await file.stream().pipeTo(this.port.writable!);
-
-      serialLog.update((it) => {
-        it.push({
-          type: "input",
-          value: `...${file.size} bytes`,
-        });
-        return it;
-      });
-
-      const result = (await this.reader.read()).value!.trim();
-      serialLog.update((it) => {
-        it.push({
-          type: "output",
-          value: result!,
-        });
-        return it;
-      });
-
-      if (result !== "OTA OK") {
-        throw new Error(result);
-      }
-
-      const writer2 = this.port.writable!.getWriter();
-      try {
-        await writer2.write(new TextEncoder().encode(`RST RESTART\r\n`));
-        serialLog.update((it) => {
-          it.push({
-            type: "input",
-            value: "RST RESTART",
-          });
-          return it;
-        });
-      } finally {
-        writer2.releaseLock();
-      }
-
-      await this.suspend();
-    } finally {
-      delete this.lock;
-      resolveLock!(true);
-    }
-  }
 }
--- a/src/lib/share/share-url.ts
+++ b/src/lib/share/share-url.ts
@@ -72,6 +72,7 @@ export async function charaFileFromUriComponent<T extends CharaFiles>(
        .stream()
        .pipeThrough(new DecompressionStream("deflate"));
      const actions = new Uint8Array(await new Response(stream).arrayBuffer());
+      console.log(actions);
      file[key] = deserializeActionArray(actions);
    }
  }
--- a/src/lib/storage.ts
+++ b/src/lib/storage.ts
@@ -9,17 +9,10 @@ export function persistentWritable<T>(
 ): Writable<T> {
  if (browser) {
    const persistedValue = localStorage.getItem(key);
-    let store: Writable<T>;
-    try {
-      store =
-        persistedValue !== null
-          ? writable(JSON.parse(persistedValue))
-          : writable(value);
-    } catch (e) {
-      console.error(e);
-    } finally {
-      store = writable(value);
-    }
+    const store =
+      persistedValue !== null
+        ? writable(JSON.parse(persistedValue))
+        : writable(value);
    store.subscribe((value) => {
      if (!condition || condition())
        localStorage.setItem(key, JSON.stringify(value));
--- a/src/lib/style/_reset.scss
+++ b/src/lib/style/_reset.scss
@@ -1,4 +0,0 @@
-* {
-  box-sizing: border-box;
-  appearance: none;
-}
--- a/src/lib/style/elements/_h1.scss
+++ b/src/lib/style/elements/_h1.scss
@@ -1,6 +0,0 @@
-h1 {
-  margin-block-start: 0;
-  font-size: 4rem;
-  font-weight: 700;
-  color: var(--md-sys-color-secondary);
-}
--- a/src/lib/style/theme.scss
+++ b/src/lib/style/theme.scss
@@ -1,35 +1,10 @@
-@import "./reset";
-
@import "./form/button";
@import "./form/toggle";
@import "./form/checkbox";
-
@import "./kbd";
@import "./print";

-@import "./elements/h1";
-
-body {
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-
-  width: 100vw;
-  height: 100vh;
-  margin: 0;
-
-  font-family: "Noto Sans Mono", monospace;
-  color: var(--md-sys-color-on-background);
-
-  background: var(--md-sys-color-background);
-}
-
-main {
-  contain: strict;
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  align-items: center;
-
-  padding-inline: 16px;
+* {
+  box-sizing: border-box;
+  appearance: none;
 }
--- a/src/lib/style/theme.server.ts
+++ b/src/lib/style/theme.server.ts
--- a/src/lib/title.ts
+++ b/src/lib/title.ts
@@ -1,6 +1,6 @@
 import type { Action } from "svelte/action";
 import tippy from "tippy.js";
-import { mount, unmount, type SvelteComponent } from "svelte";
+import type { SvelteComponent } from "svelte";
 import Tooltip from "$lib/components/Tooltip.svelte";

 export const hotkeys = new Map<string, HTMLElement>();
@@ -9,22 +9,20 @@ export const action: Action<Element, { title?: string; shortcut?: string }> = (
  node: Element,
  { title, shortcut },
 ) => {
-  let component: {} | undefined;
+  let component: SvelteComponent | undefined;
  const tooltip = tippy(node, {
    arrow: false,
    theme: "tooltip",
    animation: "fade",
    onShow(instance) {
-      component ??= mount(Tooltip, {
+      component ??= new Tooltip({
        target: instance.popper.querySelector(".tippy-content") as Element,
        props: { title, shortcut },
      });
    },
    onHidden() {
-      if (component) {
-        unmount(component);
-        component = undefined;
-      }
+      component?.$destroy();
+      component = undefined;
    },
  });

--- a/src/lib/undo-redo.ts
+++ b/src/lib/undo-redo.ts
@@ -1,6 +1,6 @@
 import { persistentWritable } from "$lib/storage";
 import { derived } from "svelte/store";
-import { hashChord, type Chord } from "$lib/serial/chord";
+import type { Chord } from "$lib/serial/chord";
 import {
  deviceChords,
  deviceLayout,
@@ -158,9 +158,3 @@ export const chords = derived([overlay, deviceChords], ([overlay, chords]) => {
    a.localeCompare(b),
  );
 });
-
-export const chordHashes = derived(
-  chords,
-  (chords) =>
-    new Map(chords.map((chord) => [hashChord(chord.actions), chord] as const)),
-);
--- a/src/routes/(app)/+layout.ts
+++ b/src/routes/(app)/+layout.ts
@@ -1,16 +0,0 @@
-import type { LayoutLoad } from "./$types";
-import { browser } from "$app/environment";
-import { charaFileFromUriComponent } from "$lib/share/share-url";
-import { themeBase, themeColor, themeSuccessBase } from "$lib/style/theme";
-
-export const load = (async ({ url, data, fetch }) => {
-  const importFile = browser && new URLSearchParams(url.search).get("import");
-  return {
-    themeSuccessBase,
-    themeBase,
-    themeColor,
-    importFile: importFile
-      ? await charaFileFromUriComponent(importFile, fetch)
-      : undefined,
-  };
-}) satisfies LayoutLoad;
--- a/src/routes/(app)/+page.svelte
+++ b/src/routes/(app)/+page.svelte
--- a/src/routes/(app)/PageTransition.svelte
+++ b/src/routes/(app)/PageTransition.svelte
@@ -1,63 +0,0 @@
-<script lang="ts">
-  import { fly } from "svelte/transition";
-  import { afterNavigate, beforeNavigate } from "$app/navigation";
-  import { expoIn, expoOut } from "svelte/easing";
-  import type { Snippet } from "svelte";
-
-  let { children }: { children: Snippet } = $props();
-
-  let inDirection = $state(0);
-  let outDirection = $state(0);
-  let outroEnd: undefined | (() => void) = $state(undefined);
-  let animationDone: Promise<void>;
-
-  let isNavigating = $state(false);
-
-  const routeOrder = [
-    "/config",
-    "/learn",
-    "/docs",
-    "/editor",
-    "/chat",
-    "/plugin",
-  ];
-
-  function routeIndex(route: string | undefined): number {
-    return routeOrder.findIndex((it) => route?.startsWith(it));
-  }
-
-  beforeNavigate((navigation) => {
-    const from = routeIndex(navigation.from?.url.pathname);
-    const to = routeIndex(navigation.to?.url.pathname);
-    if (from === -1 || to === -1 || from === to) return;
-    isNavigating = true;
-
-    inDirection = from > to ? -1 : 1;
-    outDirection = from > to ? 1 : -1;
-
-    animationDone = new Promise((resolve) => {
-      outroEnd = resolve;
-    });
-  });
-
-  afterNavigate(async () => {
-    await animationDone;
-    isNavigating = false;
-  });
-</script>
-
-{#if !isNavigating}
-  <main
-    in:fly={{ y: inDirection * 24, duration: 150, easing: expoOut }}
-    out:fly={{ y: outDirection * 24, duration: 150, easing: expoIn }}
-    onoutroend={outroEnd}
-  >
-    {@render children()}
-  </main>
-{/if}
-
-<style lang="scss">
-  main {
-    padding: 0;
-  }
-</style>
--- a/src/routes/(app)/Sidebar.svelte
+++ b/src/routes/(app)/Sidebar.svelte
@@ -1,147 +0,0 @@
-<script lang="ts">
-  import { page } from "$app/stores";
-
-  const routes = [
-    [
-      {
-        href: "/config/settings/",
-        icon: "cable",
-        title: "Device",
-        primary: true,
-      },
-      { href: "/config/chords/", icon: "dictionary", title: "Library" },
-      { href: "/config/layout/", icon: "keyboard", title: "Layout" },
-    ],
-    [
-      // { href: "/learn", icon: "school", title: "Learn", wip: true },
-      {
-        href: import.meta.env.VITE_LEARN_URL,
-        icon: "school",
-        title: "Learn",
-        external: true,
-      },
-      {
-        href: import.meta.env.VITE_DOCS_URL,
-        icon: "description",
-        title: "Docs",
-        external: true,
-      },
-      { href: "/editor", icon: "edit_document", title: "Editor", wip: true },
-      { href: "https://chat.dev.charachorder.io", icon: "chat", title: "Chat", wip: true },
-    ],
-    /*[
-      { href: "/plugin", icon: "code", title: "Plugin", wip: true },
-    ],*/
-  ] satisfies {
-    href: string;
-    icon: string;
-    title: string;
-    wip?: boolean;
-    external?: boolean;
-    primary?: boolean;
-  }[][];
-
-  let connectButton: HTMLButtonElement;
-</script>
-
-<div class="sidebar">
-  <nav>
-    {#each routes as group}
-      <ul>
-        {#each group as { href, icon, title, wip, external }}
-          <li>
-            <a
-              class:wip
-              {href}
-              rel={external ? "noreferrer" : undefined}
-              target={external ? "_blank" : undefined}
-              class:active={$page.url.pathname.startsWith(href)}
-            >
-              <div class="icon">
-                {icon}
-              </div>
-              <div class="content">
-                {title}
-              </div>
-            </a>
-          </li>
-        {/each}
-      </ul>
-    {/each}
-  </nav>
-</div>
-
-<style lang="scss">
-  .sidebar {
-    margin: 8px;
-    padding-inline-end: 8px;
-    width: 64px;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-
-    grid-area: sidebar;
-    border-right: 1px solid var(--md-sys-color-outline);
-  }
-
-  li {
-    display: flex;
-    justify-content: center;
-  }
-
-  a {
-    display: flex;
-    flex-direction: column;
-    margin: 8px 0;
-    font-size: 12px;
-
-    &.wip {
-      color: var(--md-sys-color-error);
-      opacity: 0.5;
-    }
-
-    .icon {
-      display: flex;
-      justify-content: center;
-      font-size: 24px;
-      padding: 8px;
-      border-radius: 8px;
-
-      transition: all 250ms ease;
-    }
-
-    > .content {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      translate: 0 -8px;
-      transition: all 250ms ease;
-    }
-
-    &.active {
-      > .content {
-        translate: 0;
-      }
-
-      .icon {
-        background: var(--md-sys-color-primary);
-        color: var(--md-sys-color-on-primary);
-        border-radius: 50%;
-      }
-    }
-  }
-
-  ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-  }
-
-  ul + ul::before {
-    content: "";
-    display: block;
-    height: 1px;
-    background: var(--md-sys-color-outline);
-    margin: 16px 0;
-  }
-</style>
--- a/src/routes/(app)/ccos/+layout.svelte
+++ b/src/routes/(app)/ccos/+layout.svelte
@@ -1,15 +0,0 @@
-<script lang="ts">
-  let { children } = $props();
-</script>
-
-<h1><a href="/ccos">Firmware Updates</a></h1>
-
-{@render children()}
-
-<style lang="scss">
-  h1 {
-    margin-block: 1em;
-    padding: 0;
-    font-size: 3em;
-  }
-</style>
--- a/src/routes/(app)/ccos/+page.svelte
+++ b/src/routes/(app)/ccos/+page.svelte
@@ -1,80 +0,0 @@
-<script lang="ts">
-  import { serialPort } from "$lib/serial/connection";
-  import { slide } from "svelte/transition";
-
-  let { data } = $props();
-
-  let currentDevice = $derived(
-    $serialPort
-      ? `${$serialPort.device.toLowerCase()}_${$serialPort.chipset.toLowerCase()}`
-      : undefined,
-  );
-</script>
-
-<ul>
-  {#each data.devices as device}
-    <li>
-      <a href="./{device.name}/" class:highlight={device.name === currentDevice}
-        >{device.name}</a
-      >
-    </li>
-  {/each}
-</ul>
-
-{#if !currentDevice}
-  <aside transition:slide>Connect your device to see which one you need</aside>
-{/if}
-
-<style lang="scss">
-  ul {
-    display: flex;
-    list-style: none;
-    gap: 8px;
-  }
-
-  li {
-    margin: 0;
-    padding: 0;
-  }
-
-  a {
-    outline: 1px solid var(--md-sys-color-outline);
-    border-radius: 8px;
-    transition:
-      background-color 200ms ease,
-      color 200ms ease,
-      outline-offset 200ms ease,
-      outline-color 200ms ease;
-  }
-
-  @keyframes highlight {
-    0% {
-      outline-offset: 0;
-    }
-    100% {
-      outline-offset: 4px;
-    }
-  }
-
-  @keyframes wiggle {
-    0% {
-      transform: rotate(0deg);
-      scale: 1;
-    }
-    50% {
-      transform: rotate(-5deg);
-    }
-    100% {
-      transform: rotate(-5deg);
-      scale: 1.1;
-    }
-  }
-
-  .highlight {
-    outline-width: 2px;
-    outline-color: var(--md-sys-color-primary);
-    animation: wiggle 500ms ease 2 alternate;
-    background-color: var(--md-sys-color-primary-container);
-    color: var(--md-sys-color-on-primary-container);
-  }
-</style>
--- a/src/routes/(app)/ccos/+page.ts
+++ b/src/routes/(app)/ccos/+page.ts
@@ -1,9 +0,0 @@
-import type { PageLoad } from "./$types";
-import type { DirectoryListing } from "./listing";
-
-export const load = (async ({ fetch }) => {
-  const result = await fetch(import.meta.env.VITE_FIRMWARE_URL);
-  const data = await result.json();
-
-  return { devices: data as DirectoryListing[] };
-}) satisfies PageLoad;
--- a/src/routes/(app)/ccos/OTA.svelte
+++ b/src/routes/(app)/ccos/OTA.svelte
--- a/src/routes/(app)/ccos/[device]/+page.svelte
+++ b/src/routes/(app)/ccos/[device]/+page.svelte
@@ -1,85 +0,0 @@
-<script lang="ts">
-  let { data } = $props();
-
-  let showPrerelease = $state(false);
-</script>
-
-<div class="title">
-  <h2>Versions available for <em>{data.device}</em></h2>
-  <label
-    >Include Pre-releases<input
-      type="checkbox"
-      bind:checked={showPrerelease}
-    /></label
-  >
-</div>
-
-{#if data.versions}
-  <ul>
-    {#each data.versions as version}
-      {@const isPrerelease = version.name.includes("-")}
-      <li class:pre-release={isPrerelease}>
-        <a href="./{version.name}/"
-          >{version.name}
-          <time datetime={version.mtime}
-            >{new Date(version.mtime).toLocaleDateString()}</time
-          ></a
-        >
-      </li>
-    {/each}
-  </ul>
-{:else}
-  <h2>The device {data.device} does not exist.</h2>
-{/if}
-
-<style lang="scss">
-  .pre-release {
-    margin-inline-start: 2em;
-  }
-
-  ul {
-    list-style: none;
-    padding: 0;
-  }
-
-  li {
-    height: 2em;
-    overflow: hidden;
-    transition:
-      height 200ms ease,
-      opacity 200ms ease;
-  }
-
-  label {
-    padding: 0;
-    opacity: 0.6;
-  }
-
-  .title {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-
-    h2 {
-      margin-block-end: 0;
-
-      em {
-        font-style: normal;
-        color: var(--md-sys-color-primary);
-      }
-    }
-  }
-
-  time {
-    opacity: 0.5;
-    &:before {
-      content: "•";
-      padding-inline: 0.4ch;
-    }
-  }
-
-  div.title:has(input:not(:checked)) ~ ul .pre-release {
-    height: 0;
-    opacity: 0;
-  }
-</style>
--- a/src/routes/(app)/ccos/[device]/+page.ts
+++ b/src/routes/(app)/ccos/[device]/+page.ts
@@ -1,16 +0,0 @@
-import type { PageLoad } from "./$types";
-import type { DirectoryListing } from "../listing";
-
-export const load = (async ({ fetch, params }) => {
-  const result = await fetch(
-    `${import.meta.env.VITE_FIRMWARE_URL}/${params.device}/`,
-  );
-  const data = await result.json();
-
-  return {
-    versions: (data as DirectoryListing[]).sort((a, b) =>
-      b.name.localeCompare(a.name),
-    ),
-    device: params.device,
-  };
-}) satisfies PageLoad;
--- a/src/routes/(app)/ccos/[device]/[version]/+page.svelte
+++ b/src/routes/(app)/ccos/[device]/[version]/+page.svelte
@@ -1,505 +0,0 @@
-<script lang="ts">
-  import { downloadBackup } from "$lib/backup/backup";
-  import { initSerial, serialPort } from "$lib/serial/connection";
-  import { fade, slide } from "svelte/transition";
-  import type { LoaderOptions, ESPLoader } from "esptool-js";
-
-  let { data } = $props();
-
-  let working = $state(false);
-  let success = $state(false);
-  let error = $state<Error | undefined>(undefined);
-
-  let terminalOutput = $state("");
-
-  let step = $state(0);
-  let eraseAll = $state(false);
-
-  let espLoader;
-
-  async function update() {
-    working = true;
-    error = undefined;
-    success = false;
-    const port = $serialPort!;
-    $serialPort = undefined;
-    try {
-      const file = await fetch(
-        `${data.meta.path}/${data.meta.update.ota?.name}`,
-      ).then((it) => it.blob());
-
-      await port.updateFirmware(file);
-
-      success = true;
-    } catch (e) {
-      error = e as Error;
-    } finally {
-      working = false;
-    }
-  }
-
-  let currentDevice = $derived(
-    $serialPort
-      ? `${$serialPort.device.toLowerCase()}_${$serialPort.chipset.toLowerCase()}`
-      : undefined,
-  );
-  let isCorrectDevice = $derived(
-    currentDevice ? currentDevice === data.meta.target : undefined,
-  );
-
-  /**
-   * Bytes to respective units
-   */
-  function toByteUnit(value: number) {
-    if (value < 1024) {
-      return `${value}B`;
-    } else if (value < 1024 * 1024) {
-      return `${(value / 1024).toFixed(2)}KB`;
-    } else {
-      return `${(value / 1024 / 1024).toFixed(2)}MB`;
-    }
-  }
-
-  async function connect() {
-    try {
-      await initSerial(true, false);
-      step = 1;
-    } catch (e) {
-      error = e as Error;
-    }
-  }
-
-  function backup() {
-    downloadBackup();
-    step = 2;
-  }
-
-  function bootloader() {
-    $serialPort?.bootloader();
-    $serialPort = undefined;
-    step = 3;
-  }
-
-  async function getFileSystem() {
-    if (!data.meta.update.uf2) return;
-    const uf2Promise = fetch(
-      `${data.meta.path}/${data.meta.update.uf2.name}`,
-    ).then((it) => it.blob());
-    const handle = await window.showSaveFilePicker({
-      id: `${data.meta.target}-update`,
-      suggestedName: "CURRENT.UF2",
-      excludeAcceptAllOption: true,
-      types: [
-        {
-          description: "UF2 Firmware",
-          accept: { "application/octet-stream": [".UF2"] },
-        },
-      ],
-    });
-    const writable = await handle.createWritable();
-    const uf2 = await uf2Promise;
-    await uf2.stream().pipeTo(writable);
-    step = 4;
-  }
-
-  async function espBootloader() {
-    $serialPort?.forget();
-    const port = await navigator.serial.requestPort();
-    port.open({ baudRate: 1200 });
-  }
-
-  async function connectEsp(port: SerialPort): Promise<ESPLoader> {
-    const esptool = data.meta.update.esptool!;
-    const { Transport, ESPLoader } = await import("esptool-js");
-    const espLoader = new ESPLoader({
-      transport: new Transport(port),
-      baudrate: 9600, // Number(esptool.baud),
-      romBaudrate: 9600, // Number(esptool.baud),
-      debugLogging: true,
-      terminal: {
-        clean: () => {
-          terminalOutput = "";
-        },
-        writeLine: (data) => {
-          terminalOutput += data + "\n";
-        },
-        write: (data) => {
-          terminalOutput += data;
-        },
-      },
-    } satisfies LoaderOptions);
-    await espLoader.detectChip(esptool.before);
-    if (!espLoader.IS_STUB) {
-      await espLoader.runStub();
-    }
-
-    return espLoader;
-  }
-
-  async function flashImages() {
-    const port = await navigator.serial.requestPort();
-    try {
-      const esptool = data.meta.update.esptool!;
-      espLoader = await connectEsp(port);
-      const fileArray = await Promise.all(
-        Object.entries(esptool.files).map(([offset, name]) =>
-          fetch(`${data.meta.path}/${name}`)
-            .then((it) => it.blob())
-            .then((it) => it.text())
-            .then((it) => ({
-              address: Number(offset),
-              data: it,
-            })),
-        ),
-      );
-
-      await espLoader.writeFlash({
-        flashSize: esptool.flash_size,
-        flashMode: esptool.flash_mode,
-        flashFreq: esptool.flash_freq,
-        compress: true,
-        eraseAll,
-        fileArray,
-      });
-    } finally {
-      port.close();
-    }
-  }
-
-  async function eraseSPI() {
-    const port = await navigator.serial.requestPort();
-    try {
-      console.log(data.meta);
-      const spiFlash = data.meta.spi_flash!;
-      espLoader = await connectEsp(port);
-
-      /*espLoader.flashSpiAttach(
-        (spiFlash.connection.clk << 0) |
-          (spiFlash.connection.q << 8) |
-          (spiFlash.connection.d << 16) |
-          (spiFlash.connection.cs << 24),
-      );
-      espLoader.flashId();*/
-    } finally {
-      port.close();
-    }
-  }
-</script>
-
-<div class="container">
-  <h2>
-    <a class="inline-link" href="/ccos">CCOS</a> /
-    <a
-      href="/ccos/{data.meta.target}"
-      class="device inline-link"
-      class:correct-device={isCorrectDevice === true}
-      class:incorrect-device={isCorrectDevice === false}>{data.meta.target}</a
-    >
-    / <em class="version">{data.meta.version}</em>
-  </h2>
-
-  {#if data.meta.update.ota && !data.meta.target.endsWith("m0")}
-    {@const buttonError = error || (!success && isCorrectDevice === false)}
-    <section>
-      <button
-        class="update-button"
-        class:working
-        class:primary={!buttonError}
-        class:error={buttonError}
-        disabled={working || $serialPort === undefined || !isCorrectDevice}
-        onclick={update}>Apply Update</button
-      >
-      {#if $serialPort && isCorrectDevice}
-        <div transition:slide>
-          Your
-          <b
-            >{$serialPort.company}
-            {$serialPort.device}
-            {$serialPort.chipset}</b
-          >
-          will be updated from <b class="version">{$serialPort.version}</b> to
-          <b class="version">{data.meta.version}</b>
-        </div>
-      {:else if $serialPort && isCorrectDevice === false}
-        <div class="error" transition:slide>
-          Your device is incompatible with the selected update.
-        </div>
-      {:else if success}
-        <div class="primary" transition:slide>Update successful</div>
-      {:else if error}
-        <div class="error" transition:slide>{error.message}</div>
-      {:else if working}
-        <div class="primary" transition:slide>Updating your device...</div>
-      {:else}
-        <div class="primary" transition:slide>
-          Connect your device to continue
-        </div>
-      {/if}
-    </section>
-
-    <h3>Manual Update</h3>
-  {/if}
-
-  {#if isCorrectDevice === false}
-    <div transition:slide class="incorrect-device">
-      These files are incompatible with your device
-    </div>
-  {/if}
-
-  <section>
-    <ol>
-      <li>
-        <button class="inline-button" onclick={connect}
-          ><span class="icon">usb</span>Connect</button
-        >
-        your device
-        {#if step >= 1}
-          <span class="icon ok" transition:fade>check_circle</span>
-        {/if}
-      </li>
-
-      <li class:faded={step < 1}>
-        Make a <button class="inline-button" onclick={backup}
-          ><span class="icon">download</span>Backup</button
-        >
-        {#if step >= 2}
-          <span class="icon ok" transition:fade>check_circle</span>
-        {/if}
-      </li>
-
-      <li class:faded={step < 2}>
-        Reboot to <button class="inline-button" onclick={bootloader}
-          ><span class="icon">restart_alt</span>Bootloader</button
-        >
-        {#if step >= 3}
-          <span class="icon ok" transition:fade>check_circle</span>
-        {/if}
-      </li>
-
-      <li class:faded={step < 3}>
-        Replace <button class="inline-button" onclick={getFileSystem}
-          ><span class="icon">deployed_code_update</span>CURRENT.UF2</button
-        >
-        on the new drive
-        {#if step >= 4}
-          <span class="icon ok" transition:fade>check_circle</span>
-        {/if}
-      </li>
-    </ol>
-  </section>
-
-  {#if data.meta.update.esptool}
-    <section>
-      <h3>Factory Flash (WIP)</h3>
-      <p>
-        If everything else fails, you can go through the same process that is
-        being used in the factory.
-      </p>
-      <p>
-        This will temporarily brick your device if the process is not done
-        completely or incorrectly.
-      </p>
-
-      <div class="esp-buttons">
-        <button onclick={espBootloader}
-          ><span class="icon">memory</span>ESP Bootloader</button
-        >
-        <button onclick={flashImages}
-          ><span class="icon">developer_board</span>Flash Images</button
-        >
-        <label
-          ><input type="checkbox" id="erase" bind:checked={eraseAll} />Erase All</label
-        >
-        <button onclick={eraseSPI}
-          ><span class="icon">developer_board</span>Erase SPI Flash</button
-        >
-      </div>
-
-      <pre>{terminalOutput}</pre>
-    </section>
-  {/if}
-</div>
-
-<style lang="scss">
-  h2 > em {
-    font-style: normal;
-    transition: color 200ms ease;
-  }
-
-  h3 {
-    margin-block-start: 4em;
-  }
-
-  pre {
-    overflow: auto;
-  }
-
-  .primary {
-    color: var(--md-sys-color-primary);
-  }
-
-  .error {
-    color: var(--md-sys-color-error);
-  }
-
-  .container {
-    width: calc(min(100%, 16cm));
-    overflow: auto;
-  }
-
-  @keyframes rotate {
-    0% {
-      transform: rotate(120deg);
-      opacity: 0;
-    }
-
-    20% {
-      transform: rotate(120deg);
-      opacity: 0;
-    }
-
-    60% {
-      opacity: 1;
-    }
-
-    100% {
-      transform: rotate(270deg);
-      opacity: 0;
-    }
-  }
-
-  button.inline-button {
-    display: inline;
-    padding: 0;
-    margin: 0;
-    height: unset;
-    font-size: inherit;
-    color: var(--md-sys-color-primary);
-
-    .icon {
-      font-size: 1.2em;
-      translate: 0 0.1em;
-      padding-inline-end: 0.2em;
-    }
-  }
-
-  .icon.ok {
-    font-size: 1.2em;
-    translate: 0 0.1em;
-    --icon-fill: 1;
-  }
-
-  .faded {
-    opacity: 0.8;
-  }
-
-  button.update-button {
-    overflow: hidden;
-    position: relative;
-    height: 42px;
-
-    border: 2px solid currentcolor;
-    border-radius: 8px;
-
-    outline: 2px dashed currentcolor;
-    outline-offset: 4px;
-
-    background: var(--md-sys-color-background);
-    transition:
-      border 200ms ease,
-      color 200ms ease;
-
-    margin: 6px;
-    margin-block: 16px;
-
-    &.primary {
-      color: var(--md-sys-color-primary);
-      background: none;
-    }
-
-    &.working {
-      border-color: transparent;
-    }
-
-    &.working::before {
-      z-index: -1;
-      position: absolute;
-      background: var(--md-sys-color-background);
-      width: calc(100% - 4px);
-      height: calc(100% - 4px);
-      border-radius: 8px;
-      content: "";
-    }
-
-    &.working::after {
-      z-index: -2;
-      position: absolute;
-      content: "";
-      background: var(--md-sys-color-primary);
-      animation: rotate 1s ease-out forwards infinite;
-      height: 30%;
-      width: 120%;
-    }
-  }
-
-  hr {
-    color: var(--md-sys-color-outline);
-    margin-block: 3em;
-    margin-inline: 5em;
-    border-style: dashed;
-  }
-
-  .files {
-    list-style: none;
-    display: flex;
-    padding: 0;
-    gap: 8px;
-  }
-
-  a[download] {
-    display: grid;
-    grid-template-columns: 1fr auto;
-    grid-template-rows: 1fr;
-    border: 1px solid var(--md-sys-color-outline);
-    border-radius: 8px;
-    font-size: 0.9em;
-    height: auto;
-
-    .size {
-      font-size: 0.8em;
-      opacity: 0.8;
-    }
-
-    .icon {
-      padding-inline-start: 0.4em;
-      grid-column: 2;
-      grid-row: 1 / span 2;
-    }
-  }
-
-  .version {
-    color: var(--md-sys-color-secondary);
-  }
-
-  .device {
-    opacity: 0.6;
-  }
-
-  .inline-link {
-    display: inline;
-    padding: 0;
-  }
-
-  .correct-device {
-    color: var(--md-sys-color-primary);
-    opacity: 1;
-  }
-
-  .incorrect-device {
-    color: var(--md-sys-color-error);
-  }
-
-  .esp-buttons {
-    display: flex;
-  }
-</style>
--- a/src/routes/(app)/ccos/[device]/[version]/+page.ts
+++ b/src/routes/(app)/ccos/[device]/[version]/+page.ts
@@ -1,50 +0,0 @@
-import type { PageLoad } from "./$types";
-import type { FileListing, Listing } from "../../listing";
-import type { VersionMeta } from "./meta";
-
-export const load = (async ({ fetch, params }) => {
-  const result = await fetch(
-    `${import.meta.env.VITE_FIRMWARE_URL}/${params.device}/${params.version}/`,
-  );
-  const data: Listing[] = await result.json();
-  const meta: VersionMeta | undefined = data.some(
-    (entry) => entry.type === "file" && entry.name === "meta.json",
-  )
-    ? await fetch(
-        `${import.meta.env.VITE_FIRMWARE_URL}/${params.device}/${params.version}/meta.json`,
-      ).then((res) => res.json())
-    : undefined;
-
-  return {
-    meta: {
-      version: meta?.version ?? params.version,
-      target: meta?.target ?? params.device,
-      path: `${import.meta.env.VITE_FIRMWARE_URL}${params.device}/${params.version}`,
-      git_commit: meta?.git_commit ?? "",
-      git_is_dirty: meta?.git_is_dirty ?? false,
-      git_date: meta?.git_date ?? data[0]?.mtime ?? "",
-      public_build: meta?.public_build ?? !params.version.startsWith("."),
-      development_mode: meta?.development_mode ?? 0,
-      update: {
-        uf2:
-          (data.find(
-            (entry) =>
-              entry.type === "file" &&
-              entry.name === (meta?.update?.uf2 ?? "CURRENT.UF2"),
-          ) as FileListing) ?? undefined,
-        ota:
-          data.find(
-            (entry) =>
-              entry.type === "file" &&
-              entry.name === (meta?.update?.ota ?? "firmware.bin"),
-          ) ?? undefined,
-        esptool: meta?.update?.esptool ?? undefined,
-      },
-      files: data.filter(
-        (entry) =>
-          entry.type === "file" && (!meta?.files || entry.name in meta.files),
-      ) as FileListing[],
-      spi_flash: meta?.spi_flash ?? undefined,
-    },
-  };
-}) satisfies PageLoad;
--- a/src/routes/(app)/ccos/[device]/[version]/meta.ts
+++ b/src/routes/(app)/ccos/[device]/[version]/meta.ts
@@ -1,41 +0,0 @@
-export interface VersionMeta {
-  version: string;
-  target: string;
-  git_commit: string;
-  git_is_dirty: boolean;
-  git_date: string;
-  public_build: boolean;
-  development_mode: number;
-  update: {
-    ota: string | null;
-    uf2: string | null;
-    esptool: EspToolData | null;
-  };
-  files: string[];
-  spi_flash: SPIFlashInfo | null;
-}
-
-export interface SPIFlashInfo {
-  type: string;
-  size: string;
-  connection: SPIConnection;
-}
-
-export interface SPIConnection {
-  clk: number;
-  q: number;
-  d: number;
-  hd: number;
-  cs: number;
-}
-
-export interface EspToolData {
-  chip: string;
-  baud: string;
-  before: string;
-  after: string;
-  flash_mode: string;
-  flash_freq: string;
-  flash_size: string;
-  files: Record<string, string>;
-}
--- a/src/routes/(app)/ccos/listing.ts
+++ b/src/routes/(app)/ccos/listing.ts
@@ -1,14 +0,0 @@
-export type Listing = FileListing | DirectoryListing;
-
-export interface DirectoryListing {
-  name: string;
-  type: "directory";
-  mtime: string;
-}
-
-export interface FileListing {
-  name: string;
-  type: "file";
-  mtime: string;
-  size: number;
-}
--- a/src/routes/(app)/chat/+page.svelte
+++ b/src/routes/(app)/chat/+page.svelte
@@ -1,92 +0,0 @@
-<script lang="ts">
-  import { initMatrixClient, isLoggedIn, matrix } from "$lib/chat/chat";
-  import { flip } from "svelte/animate";
-  import { slide } from "svelte/transition";
-  import Login from "./Login.svelte";
-  import { onMount } from "svelte";
-  import { browser } from "$app/environment";
-
-  onMount(async () => {
-    if (browser) {
-      await initMatrixClient();
-    }
-  });
-
-  let { children } = $props();
-
-  let spaces = $derived($matrix?.topLevelSpaces$);
-
-  function spaceShort(name: string) {
-    return name
-      .split(" ")
-      .map((it) => it[0])
-      .join("");
-  }
-</script>
-
-{#if $isLoggedIn}
-  <div class="layout">
-    <nav class="spaces">
-      <a href="/chat/chats" class="icon chats">chat</a>
-      <hr />
-      {#if $spaces}
-        <ul>
-          {#each $spaces as space (space.roomId)}
-            <li animate:flip transition:slide>
-              <a class="space" href="/chat/space/{space.roomId}">
-                {spaceShort(space.name)}
-              </a>
-            </li>
-          {/each}
-        </ul>
-      {/if}
-      <button class="icon">add</button>
-    </nav>
-  </div>
-{:else}
-  <Login />
-{/if}
-
-<style lang="scss">
-  nav {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .layout {
-    display: flex;
-    height: 100%;
-    width: 100%;
-  }
-
-  hr {
-    width: 60%;
-    height: 1px;
-  }
-
-  ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-  }
-
-  button,
-  a {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    width: 56px;
-    height: 56px;
-    background: var(--md-sys-color-surface-variant);
-  }
-
-  .chats {
-    font-size: 24px;
-  }
-
-  .space {
-    font-size: 20px;
-    margin-bottom: 8px;
-  }
-</style>
--- a/src/routes/(app)/chat/Login.svelte
+++ b/src/routes/(app)/chat/Login.svelte
@@ -1,33 +0,0 @@
-<script lang="ts">
-  import { matrixClient } from "$lib/chat/chat";
-
-  function passwordLogin() {
-    // TODO
-  }
-</script>
-
-{#if $matrixClient}
-  {#await $matrixClient.loginFlows() then flows}
-    {#each flows.flows as flow}
-      {#if flow.type === "m.login.sso"}
-        <a
-          href={$matrixClient.getSsoLoginUrl(`${window.location.origin}/chat/`)}
-        >
-          {#each flow.identity_providers as idp}
-            {#if idp.icon}
-              <img src={$matrixClient.mxcUrlToHttp(idp.icon)} alt={idp.name} />
-            {:else}
-              {idp.name}
-            {/if}
-          {/each}
-        </a>
-      {:else if flow.type === "m.login.password"}
-        <form onsubmit={passwordLogin}>
-          <input name="username" type="text" placeholder="Username" />
-          <input name="password" type="password" placeholder="Password" />
-          <button type="submit">Login</button>
-        </form>
-      {/if}
-    {/each}
-  {/await}
-{/if}
--- a/src/routes/(app)/chat/Space.svelte
+++ b/src/routes/(app)/chat/Space.svelte
--- a/src/routes/(app)/config/+layout.svelte
+++ b/src/routes/(app)/config/+layout.svelte
@@ -1,17 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from "svelte";
-  import PageTransition from "./PageTransition.svelte";
-  import Navigation from "./Navigation.svelte";
-
-  let { children }: { children?: Snippet } = $props();
-</script>
-
-<Navigation />
-
-{#if children}
-  <PageTransition>
-    {#if children}
-      {@render children()}
-    {/if}
-  </PageTransition>
-{/if}
--- a/src/routes/(app)/config/chords/ChordEditActions.svelte
+++ b/src/routes/(app)/config/chords/ChordEditActions.svelte
@@ -1,21 +0,0 @@
-<div class="table-buttons">
-  {#if !chord.deleted}
-    <button transition:slide class="icon compact" onclick={remove}
-      >delete</button
-    >
-  {:else}
-    <button transition:slide class="icon compact" onclick={restore}
-      >restore_from_trash</button
-    >
-  {/if}
-  <button disabled={chord.deleted} class="icon compact" onclick={duplicate}
-    >content_copy</button
-  >
-  <button
-    class="icon compact"
-    class:disabled={chord.isApplied}
-    onclick={restore}>undo</button
-  >
-  <div class="separator"></div>
-  <button class="icon compact" onclick={share}>share</button>
-</div>
--- a/src/routes/(app)/editor/+page.svelte
+++ b/src/routes/(app)/editor/+page.svelte
@@ -1,125 +0,0 @@
-<script lang="ts">
-  import { ReplayRecorder } from "$lib/charrecorder/core/recorder";
-  import type { InferredChord, Replay } from "$lib/charrecorder/core/types";
-  import CharRecorder from "$lib/charrecorder/CharRecorder.svelte";
-  import TrackChords from "$lib/charrecorder/TrackChords.svelte";
-  import TrackRollingWpm from "$lib/charrecorder/TrackRollingWpm.svelte";
-  import { fade } from "svelte/transition";
-
-  let recorder: ReplayRecorder = $state(new ReplayRecorder());
-  let replay: Replay | undefined = $state();
-
-  let wpm = $state(0);
-  let chords: InferredChord[] = $state([]);
-
-  function handleRawKey(event: KeyboardEvent) {
-    event.preventDefault();
-    keyEvent(event);
-  }
-
-  function keyEvent(event: KeyboardEvent) {
-    if (event.key === "Tab") {
-      clear();
-    } else {
-      if (replay) {
-        replay = undefined;
-      }
-      recorder.next(event);
-    }
-  }
-
-  function clear() {
-    recorder = new ReplayRecorder();
-  }
-
-  function runReplay() {
-    replay = recorder.finish();
-  }
-
-  function save() {
-    const replay = recorder.finish();
-    const blob = new Blob([JSON.stringify(replay)], {
-      type: "application/json",
-    });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = "replay.json";
-    a.click();
-  }
-</script>
-
-<svelte:head>
-  <title>Editor</title>
-</svelte:head>
-<svelte:window onkeydown={handleRawKey} onkeyup={handleRawKey} />
-
-<section>
-  <h2>Editor</h2>
-
-  {#if replay}
-    <div class="replay" transition:fade={{ duration: 100 }}>
-      <CharRecorder {replay} cursor={true} keys={true} />
-    </div>
-  {/if}
-
-  {#key recorder}
-    <div
-      class="editor"
-      out:fade={{ duration: 100 }}
-      style:opacity={replay ? 0 : undefined}
-    >
-      <CharRecorder replay={recorder.player} cursor={true} keys={true}>
-        <TrackRollingWpm bind:wpm />
-        <TrackChords bind:chords />
-      </CharRecorder>
-    </div>
-  {/key}
-
-  <div class="toolbar">
-    <div>
-      <button onclick={clear}>Clear <kbd>TAB</kbd></button>
-      <button onclick={runReplay}>Replay</button>
-      <button onclick={save}>Export</button>
-    </div>
-
-    <div>
-      <div><b>{Math.round(wpm)}</b><sub>WPM</sub></div>
-    </div>
-  </div>
-</section>
-
-<style lang="scss">
-  section {
-    position: relative;
-    width: 100%;
-  }
-
-  .replay,
-  .editor {
-    position: absolute;
-    top: 3em;
-    left: 0;
-    transition: opacity 0.1s;
-    padding: 16px;
-    padding-left: 0;
-    padding-bottom: 5em;
-  }
-
-  .toolbar {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    padding-right: 16px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    backdrop-filter: blur(10px);
-
-    > div {
-      display: flex;
-    }
-  }
-</style>
--- a/src/routes/(app)/learn/+page.svelte
+++ b/src/routes/(app)/learn/+page.svelte
@@ -1,231 +0,0 @@
-<script lang="ts">
-  import CharRecorder from "$lib/charrecorder/CharRecorder.svelte";
-  import { ReplayRecorder } from "$lib/charrecorder/core/recorder";
-  import {
-    words,
-    nextWord,
-    scores,
-    learnConfigDefault,
-    learnConfig,
-    learnConfigStored,
-  } from "$lib/learn/chords";
-  import { blur, fade } from "svelte/transition";
-  import ChordActionEdit from "../config/chords/ChordActionEdit.svelte";
-  import TrackChords from "$lib/charrecorder/TrackChords.svelte";
-  import type { InferredChord } from "$lib/charrecorder/core/types";
-
-  let recorder = $derived(new ReplayRecorder($nextWord));
-  let start = performance.now();
-  $effect(() => {
-    start = recorder && performance.now();
-  });
-
-  let chords: InferredChord[] = $state([]);
-
-  function onkeyboard(event: KeyboardEvent) {
-    recorder.next(event);
-  }
-
-  function lerp(a: number, b: number, t: number) {
-    return a + (b - a) * t;
-  }
-
-  $inspect(chords);
-
-  $effect(() => {
-    const [chord] = chords;
-    if (!chord) return;
-
-    console.log(chord);
-
-    if (chord.output.trim() === $nextWord) {
-      scores.update((scores) => {
-        const score = Math.max(
-          $learnConfig.minScore,
-          $learnConfig.maxScore - (performance.now() - start) / 1000,
-        );
-
-        if (!scores[$nextWord]) {
-          scores[$nextWord] = {
-            score,
-            lastTyped: performance.now(),
-            total: 1,
-          };
-          return scores;
-        }
-
-        const oldScore = scores[$nextWord].score;
-        scores[$nextWord].score = lerp(
-          score,
-          oldScore,
-          $learnConfig.scoreBlend,
-        );
-        scores[$nextWord].lastTyped = performance.now();
-        scores[$nextWord].total += 1;
-
-        return scores;
-      });
-    }
-  });
-
-  function skip() {
-    button?.blur();
-    scores.update((scores) => {
-      return scores;
-    });
-  }
-
-  let button = $state<HTMLButtonElement>();
-</script>
-
-<h2>WIP</h2>
-
-<svelte:window onkeydown={onkeyboard} onkeyup={onkeyboard} />
-
-{#key $nextWord}
-  <h3>
-    {$nextWord}
-    {#if $scores[$nextWord!] === undefined}
-      <sup class="new-word">new</sup>
-    {:else if ($scores[$nextWord!]?.score ?? 0) < 0}
-      <sup class="weak">weak</sup>
-    {/if}
-  </h3>
-
-  <div class="chord" in:fade>
-    <CharRecorder replay={recorder.player} cursor={true}>
-      <TrackChords bind:chords />
-    </CharRecorder>
-  </div>
-{/key}
-
-{#key $nextWord}
-  <div class="hint" in:fade={{ delay: 2000, duration: 500 }}>
-    <ChordActionEdit chord={$words.get($nextWord!)} onsubmit={() => {}} />
-  </div>
-{/key}
-<button onclick={skip} bind:this={button}>skip</button>
-
-<section class="stats">
-  <table>
-    <thead>
-      <tr><th>Weak</th></tr>
-    </thead>
-    <tbody>
-      {#each Object.entries($scores)
-        .sort(([, a], [, b]) => a.score - b.score)
-        .splice(0, 10) as [word, score]}
-        <tr class="decay">
-          <td>{word}</td>
-          <td><i>{score.score.toFixed(2)}</i></td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-
-  <table>
-    <thead>
-      <tr><th>Strong</th></tr>
-    </thead>
-    <tbody>
-      {#each Object.entries($scores)
-        .sort(([, a], [, b]) => b.score - a.score)
-        .splice(0, 10) as [word, score]}
-        <tr class="decay">
-          <td>{word}</td>
-          <td><i>{score.score.toFixed(2)}</i></td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-
-  <table>
-    <thead>
-      <tr><th>Rehearse</th></tr>
-    </thead>
-    <tbody>
-      {#each Object.entries($scores)
-        .sort(([, a], [, b]) => b.lastTyped - a.lastTyped)
-        .splice(0, 10) as [word, score]}
-        <tr class="decay">
-          <td>{word}</td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</section>
-
-<details>
-  <summary>Settings</summary>
-  <button onclick={() => ($scores = {})}>Reset</button>
-  <table>
-    <tbody>
-      {#each Object.entries(learnConfigDefault) as [key, value]}
-        <tr>
-          <th>{key}</th>
-          <td
-            ><input
-              type="number"
-              value={$learnConfig[key] ?? value}
-              step="0.1"
-              oninput={(event) =>
-                ($learnConfigStored[key] = event.target.value)}
-            />
-          </td>
-          <td>
-            <button
-              disabled={!$learnConfigStored[key]}
-              onclick={() => ($learnConfigStored[key] = undefined)}>⟲</button
-            >
-          </td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</details>
-
-<style lang="scss">
-  @use "sass:math";
-
-  input {
-    background: none;
-    font: inherit;
-    color: inherit;
-    border: none;
-    width: 5ch;
-    text-align: right;
-  }
-
-  div {
-    min-width: 20ch;
-    padding: 1ch;
-
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .stats {
-    display: flex;
-    gap: 3em;
-  }
-
-  sup {
-    font-weight: normal;
-    font-size: 0.8em;
-
-    &.new-word {
-      color: var(--md-sys-color-primary);
-    }
-    &.weak {
-      color: var(--md-sys-color-error);
-    }
-  }
-
-  @for $i from 1 through 10 {
-    tr.decay:nth-child(#{$i}) {
-      opacity: 1 - math.div($i, 10);
-    }
-  }
-</style>
--- a/src/routes/(app)/learn/Pick.svelte
+++ b/src/routes/(app)/learn/Pick.svelte
--- a/src/routes/(app)/plugin/+page.svelte
+++ b/src/routes/(app)/plugin/+page.svelte
@@ -1,264 +0,0 @@
-<script lang="ts">
-  import { KEYMAP_CODES } from "$lib/serial/keymap-codes";
-  import { onMount } from "svelte";
-  import { basicSetup, EditorView } from "codemirror";
-  import { javascript, javascriptLanguage } from "@codemirror/lang-javascript";
-  import { defaultKeymap } from "@codemirror/commands";
-  import { keymap } from "@codemirror/view";
-  import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
-  import { tags } from "@lezer/highlight";
-  import LL from "$i18n/i18n-svelte";
-  import type { CompletionContext, Completion } from "@codemirror/autocomplete";
-  import { syntaxTree } from "@codemirror/language";
-  import { serialPort } from "$lib/serial/connection";
-  import examplePlugin from "./example-plugin.js?raw";
-  import {
-    charaMethods,
-    type ChannelCharaEventData,
-    type ChannelResponseEventData,
-  } from "./plugin-types";
-
-  let theme = EditorView.baseTheme({
-    ".cm-editor .cm-content": {
-      fontFamily: '"Noto Sans Mono", monospace',
-    },
-    ".cm-FoldPlaceholder": {
-      backgroundColor: "var(--md-sys-color-surface-variant)",
-      color: "var(--md-sys-color-on-surface-variant)",
-    },
-    ".cm-gutters": {
-      backgroundColor: "var(--md-sys-color-surface-variant)",
-      color: "var(--md-sys-color-on-surface-variant)",
-      borderColor: "var(--md-sys-color-outline)",
-    },
-    ".cm-activeLineGutter": {
-      backgroundColor: "var(--md-sys-color-tertiary)",
-      color: "var(--md-sys-color-on-tertiary)",
-    },
-    ".cm-activeLine": {
-      backgroundColor: "transparent",
-    },
-    ".cm-cursor": {
-      borderColor: "var(--md-sys-color-on-background)",
-    },
-    ".cm-selectionBackground": {
-      background: "transparent !important",
-      backdropFilter: "invert(0.3)",
-    },
-    ".cm-tooltip": {
-      backgroundColor: "var(--md-sys-color-background) !important",
-      color: "var(--md-sys-color-on-background)",
-      borderColor: "var(--md-sys-color-outline)",
-    },
-    ".cm-tooltip-autocomplete ul li[aria-selected]": {
-      backgroundColor: "var(--md-sys-color-primary) !important",
-      color: "var(--md-sys-color-on-primary) !important",
-    },
-    ".cm-completionIcon.cm-completionIcon-keyword::after": {
-      content: "'🗝'",
-    },
-  });
-  const highlightStyle = HighlightStyle.define(
-    [
-      { tag: tags.keyword, color: "var(--md-sys-color-primary)" },
-      { tag: tags.number, color: "var(--md-sys-color-secondary)" },
-      { tag: tags.string, color: "var(--md-sys-color-tertiary)" },
-      {
-        tag: tags.comment,
-        color: "var(--md-sys-color-on-background)",
-        opacity: 0.6,
-      },
-    ],
-    {
-      all: { fontFamily: '"Noto Sans Mono", monospace', fontSize: "14px" },
-    },
-  );
-
-  const globalsCompletion: Completion[] = [
-    { label: "Chara", type: "class", boost: 90 },
-    { label: "Actions", type: "class", boost: 90 },
-  ];
-
-  const actionsCompletion: Completion[] = Array.from(
-    KEYMAP_CODES,
-    ([id, info]) => {
-      const isValidIdentifier =
-        info.id && /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(info.id);
-      return {
-        label: info.id
-          ? isValidIdentifier
-            ? info.id
-            : `["${info.id}"]`
-          : info.id!,
-        displayLabel: info.id,
-        detail: [info.title, `(0x${id.toString(16)})`, info.description]
-          .filter((it) => !!it)
-          .join(" "),
-        section: info.category,
-        boost: isValidIdentifier ? Math.min(info.id?.length ?? 0, 10) + 50 : 40,
-        type: "property",
-      };
-    },
-  ).filter((it) => it.label !== undefined);
-
-  const completion = javascriptLanguage.data.of({
-    autocomplete: function completeGlobals(context: CompletionContext) {
-      let nodeBefore = syntaxTree(context.state).resolveInner(context.pos, -1);
-      if (nodeBefore.name === "VariableName") {
-        return {
-          from: nodeBefore.from,
-          options: globalsCompletion,
-        };
-      } else if (nodeBefore.name === "Script") {
-        return {
-          from: context.pos,
-          options: globalsCompletion,
-        };
-      } else if (
-        (nodeBefore.name === "PropertyName" || nodeBefore.name === ".") &&
-        nodeBefore.parent?.name === "MemberExpression" &&
-        nodeBefore.parent.firstChild
-      ) {
-        const variable = nodeBefore.parent.firstChild;
-        const variableName = context.state.sliceDoc(variable.from, variable.to);
-        if (variableName === "Actions") {
-          return {
-            from:
-              nodeBefore.name === "PropertyName"
-                ? nodeBefore.from
-                : nodeBefore.to,
-            options: actionsCompletion,
-          };
-        }
-        let parent = nodeBefore.prevSibling;
-        while (parent !== null && parent?.name !== "VariableName") {
-          parent = parent.prevSibling;
-        }
-        if (parent) {
-        }
-      }
-      return null;
-    },
-  });
-
-  onMount(() => {
-    editorView = new EditorView({
-      extensions: [
-        basicSetup,
-        javascript(),
-        keymap.of(defaultKeymap),
-        theme,
-        syntaxHighlighting(highlightStyle),
-        completion,
-      ],
-      parent: editor,
-      doc: examplePlugin,
-    });
-  });
-
-  let channels = $derived.by(() => {
-    if (!$serialPort) return {} as any;
-    return {
-      getVersion: (..._args: unknown[]) => Promise.resolve($serialPort.version),
-      getDevice: (..._args: unknown[]) => Promise.resolve($serialPort.device),
-      commit: (..._args: unknown[]) => {
-        if (
-          confirm(
-            "Perform a commit? Settings are already applied until the next reboot.\n\n" +
-              "Excessive commits can lead to premature breakdowns, as the settings storage is only rated for 10,000-25,000 commits.\n\n" +
-              "Click OK to perform the commit anyways.",
-          )
-        ) {
-          return Promise.resolve($serialPort.commit());
-        }
-        return Promise.resolve();
-      },
-      ...Object.fromEntries(
-        charaMethods.map(
-          (it) => [it, $serialPort[it].bind($serialPort)] as const,
-        ),
-      ),
-    } satisfies Record<string, Function>;
-  });
-
-  async function onMessage(event: MessageEvent) {
-    if (event.origin !== "null" || event.source !== frame.contentWindow) return;
-
-    const [channel, params] = event.data;
-    const response = channels[channel as keyof typeof channels](...params);
-    frame.contentWindow!.postMessage(
-      { response: await response } satisfies ChannelResponseEventData,
-      "*",
-    );
-  }
-
-  function runPlugin() {
-    frame.contentWindow?.postMessage(
-      {
-        actionCodes: KEYMAP_CODES,
-        script: editorView.state.doc.toString(),
-        charaChannels: Object.keys(channels),
-      } satisfies ChannelCharaEventData,
-      "*",
-    );
-  }
-
-  let frame: HTMLIFrameElement;
-  let editor: HTMLDivElement;
-  let editorView: EditorView;
-</script>
-
-<svelte:window onmessage={onMessage} />
-<section>
-  <h3>Plugin</h3>
-  <button onclick={runPlugin}
-    ><span class="icon">play_arrow</span>{$LL.plugin.editor.RUN()}</button
-  >
-  <div class="editor-root" bind:this={editor}></div>
-</section>
-
-<iframe
-  aria-hidden="true"
-  title="code sandbox"
-  bind:this={frame}
-  src="/sandbox/"
-  sandbox="allow-scripts"
-></iframe>
-
-<style lang="scss">
-  section {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    width: 100%;
-  }
-
-  iframe {
-    display: none;
-  }
-
-  button {
-    cursor: pointer;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    width: min-content;
-    padding-inline-start: 0;
-    padding-inline-end: 8px;
-
-    font-size: 14px;
-    font-weight: bold;
-    color: var(--md-sys-color-on-primary);
-
-    background: var(--md-sys-color-primary);
-    border: none;
-    border-radius: 4px;
-  }
-
-  .editor-root {
-    width: 100%;
-    height: 100%;
-  }
-</style>
--- a/src/routes/(app)/plugin/plugin-types.ts
+++ b/src/routes/(app)/plugin/plugin-types.ts
@@ -1,30 +0,0 @@
-import type { CharaDevice } from "$lib/serial/device";
-import type { KeyInfo } from "$lib/serial/keymap-codes";
-
-export const charaMethods = [
-  "reboot",
-  "bootloader",
-  "getRamBytesAvailable",
-  "getSetting",
-  "setSetting",
-  "getLayoutKey",
-  "setLayoutKey",
-  "deleteChord",
-  "setChord",
-  "getChordPhrase",
-  "getChordCount",
-  "getChord",
-  "send",
-] as const satisfies Array<keyof CharaDevice>;
-
-export interface ChannelResponseEventData {
-  response: unknown;
-}
-
-export interface ChannelCharaEventData {
-  charaChannels: string[];
-  script: string;
-  actionCodes: Map<number, KeyInfo>;
-}
-
-export type ChannelEventData = ChannelResponseEventData | ChannelCharaEventData;
--- a/src/routes/(app)/stats/+page.svelte
+++ b/src/routes/(app)/stats/+page.svelte
--- a/Show More
+++ b/Show More