fix: correctly show compatibility

ota update flow
fix: server load interferes with spa
2026-04-24 15:19:04 +00:00 · 2024-09-29 22:34:12 +02:00 · 2024-09-29 22:25:03 +02:00 · 2024-09-29 20:27:06 +02:00 · 2024-09-29 19:33:20 +02:00 · 2024-09-29 02:00:52 +02:00
135 changed files with 13599 additions and 12805 deletions
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -1,13 +1,9 @@
 name: Build

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

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

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

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

-      - 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
+      - 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/heads/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 }}
--- 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,29 +5,11 @@
        "systems": "systems"
      },
      "locked": {
-        "lastModified": 1689068808,
-        "narHash": "sha256-6ixXo3wt24N/melDWjq70UuHQLxGV8jZvooRanIHXw0=",
+        "lastModified": 1710146030,
+        "narHash": "sha256-SZ5L6eA7HJ/nmkzGG7/ISclqe6oZdOZTNoesiInkXPQ=",
        "owner": "numtide",
        "repo": "flake-utils",
-        "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",
+        "rev": "b1d9ab70662946ef0850d488da1c9019f3a9752a",
        "type": "github"
      },
      "original": {
@@ -38,11 +20,11 @@
    },
    "nixpkgs": {
      "locked": {
-        "lastModified": 1689752456,
-        "narHash": "sha256-VOChdECcEI8ixz8QY+YC4JaNEFwQd1V8bA0G4B28Ki0=",
+        "lastModified": 1722415718,
+        "narHash": "sha256-5US0/pgxbMksF92k1+eOa8arJTJiPvsdZj9Dl+vJkM4=",
        "owner": "NixOS",
        "repo": "nixpkgs",
-        "rev": "7f256d7da238cb627ef189d56ed590739f42f13b",
+        "rev": "c3392ad349a5227f4a3464dce87bcc5046692fce",
        "type": "github"
      },
      "original": {
@@ -54,11 +36,11 @@
    },
    "nixpkgs_2": {
      "locked": {
-        "lastModified": 1681358109,
-        "narHash": "sha256-eKyxW4OohHQx9Urxi7TQlFBTDWII+F+x2hklDOQPB50=",
+        "lastModified": 1718428119,
+        "narHash": "sha256-WdWDpNaq6u1IPtxtYHHWpl5BmabtpmLnMAx0RdJ/vo8=",
        "owner": "NixOS",
        "repo": "nixpkgs",
-        "rev": "96ba1c52e54e74c3197f4d43026b3f3d92e83ff9",
+        "rev": "e6cea36f83499eb4e9cd184c8a8e823296b50ad5",
        "type": "github"
      },
      "original": {
@@ -77,15 +59,14 @@
    },
    "rust-overlay": {
      "inputs": {
-        "flake-utils": "flake-utils_2",
        "nixpkgs": "nixpkgs_2"
      },
      "locked": {
-        "lastModified": 1690942540,
-        "narHash": "sha256-eafSSO3Y+/TFuy+CHKyolYfGvC33IAWNx4W2NA7LfZM=",
+        "lastModified": 1722391647,
+        "narHash": "sha256-JTi7l1oxnatF1uX/gnGMlRnyFMtylRw4MqhCUdoN2K4=",
        "owner": "oxalica",
        "repo": "rust-overlay",
-        "rev": "aa3994f054038262df55122dfa552b9eab71a994",
+        "rev": "0fd4a5d2098faa516a9b83022aec7db766cd1de8",
        "type": "github"
      },
      "original": {
@@ -108,21 +89,6 @@
        "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,56 +4,75 @@
    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
-        dbus
-        openssl_3
-        librsvg
-      ];
-      packages =
-        (with pkgs; [
-          nodejs_18
-          rust-bin
-          fontMin
-        ])
-        ++ (with tauriPkgs; [
-          curl
-          wget
-          pkg-config
+  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
-          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
-        '';
-      };
-    });
+        ];
+        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
+          '';
+        };
+      }
+    );
 }
--- a/icons.config.js
+++ b/icons.config.js
@@ -18,6 +18,8 @@ const config = {
    "update",
    "offline_pin",
    "warning",
+    "dangerous",
+    "check",
    "cable",
    "person",
    "sync",
@@ -65,6 +67,8 @@ const config = {
    "bolt",
    "undo",
    "redo",
+    "replay",
+    "reply",
    "navigate_before",
    "navigate_next",
    "print",
@@ -91,9 +95,20 @@ 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",
  ],
  codePoints: {
    speed: "e9e4",
@@ -112,6 +127,9 @@ 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,8 +1,12 @@
 {
  "name": "charachorder-device-manager",
-  "version": "1.5.1",
+  "version": "1.5.2",
  "license": "AGPL-3.0-or-later",
  "private": true,
+  "engines": {
+    "node": ">=18.16",
+    "pnpm": ">=8.6"
+  },
  "repository": {
    "type": "git",
    "url": "https://github.com/CharaChorder/DeviceManager.git"
@@ -30,52 +34,61 @@
    "typesafe-i18n": "typesafe-i18n"
  },
  "devDependencies": {
-    "@codemirror/autocomplete": "^6.15.0",
-    "@codemirror/commands": "^6.3.3",
+    "@codemirror/autocomplete": "^6.17.0",
+    "@codemirror/commands": "^6.6.0",
    "@codemirror/lang-javascript": "^6.2.2",
-    "@codemirror/language": "^6.10.1",
+    "@codemirror/language": "^6.10.2",
    "@codemirror/state": "^6.4.1",
-    "@fontsource-variable/material-symbols-rounded": "^5.0.27",
-    "@fontsource-variable/noto-sans-mono": "^5.0.19",
-    "@material/material-color-utilities": "^0.2.7",
+    "@codemirror/view": "^6.29.1",
+    "@fontsource-variable/material-symbols-rounded": "^5.0.36",
+    "@fontsource-variable/noto-sans-mono": "^5.0.20",
+    "@lezer/highlight": "^1.2.0",
+    "@material/material-color-utilities": "^0.3.0",
+    "@melt-ui/pp": "^0.3.2",
+    "@melt-ui/svelte": "^0.83.0",
    "@modyfi/vite-plugin-yaml": "^1.1.0",
-    "@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",
+    "@sveltejs/adapter-static": "^3.0.2",
+    "@sveltejs/kit": "^2.5.18",
+    "@sveltejs/vite-plugin-svelte": "^3.1.1",
+    "@tauri-apps/api": "^1.6.0",
+    "@tauri-apps/cli": "^1.6.0",
+    "@types/dom-view-transitions": "^1.0.5",
    "@types/flexsearch": "^0.7.6",
    "@types/w3c-web-serial": "^1.0.6",
    "@types/w3c-web-usb": "^1.0.10",
-    "@vite-pwa/sveltekit": "^0.2.10",
+    "@vite-pwa/sveltekit": "^0.6.0",
    "autoprefixer": "^10.4.19",
    "codemirror": "^6.0.1",
-    "cypress": "^13.7.2",
+    "cypress": "^13.13.2",
+    "d3": "^7.9.0",
    "flexsearch": "^0.7.43",
    "fontkit": "^2.0.2",
-    "glob": "^10.3.12",
-    "jsdom": "^22.1.0",
+    "glob": "^11.0.0",
+    "jsdom": "^24.1.1",
+    "matrix-js-sdk": "^34.4.0",
    "npm-run-all": "^4.1.5",
-    "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",
+    "prettier": "^3.3.3",
+    "prettier-plugin-svelte": "^3.2.6",
+    "rxjs": "^7.8.1",
+    "sass": "^1.77.8",
+    "socket.io-client": "^4.7.5",
+    "stylelint": "^16.8.1",
+    "stylelint-config-clean-order": "^6.1.0",
    "stylelint-config-html": "^1.1.0",
    "stylelint-config-prettier-scss": "^1.0.0",
-    "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",
+    "stylelint-config-recommended-scss": "^14.1.0",
+    "stylelint-config-standard-scss": "^13.1.0",
+    "svelte": "5.0.0-next.221",
+    "svelte-check": "^3.8.5",
+    "svelte-preprocess": "^6.0.2",
    "tippy.js": "^6.3.7",
    "typesafe-i18n": "^5.26.2",
-    "typescript": "^5.4.4",
-    "vite": "^4.5.3",
+    "typescript": "^5.5.4",
+    "vite": "^5.3.5",
    "vite-plugin-mkcert": "^1.17.5",
-    "vite-plugin-pwa": "^0.17.5",
-    "vitest": "^0.34.6"
+    "vite-plugin-pwa": "^0.20.1",
+    "vitest": "^2.0.5",
+    "workbox-window": "^7.1.0"
  },
  "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 = "1.5.1"
+version = "1.5.2"
 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": "1.5.1" },
+  "package": { "productName": "amacc1ng", "version": "1.5.2" },
  "tauri": {
    "allowlist": { "all": false },
    "bundle": {
--- a/src/env.d.ts
+++ b/src/env.d.ts
@@ -14,6 +14,8 @@ 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/lib/assets/keymaps/ascii.yml
+++ b/src/lib/assets/keymaps/ascii.yml
@@ -9,145 +9,193 @@ 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,6 +70,9 @@ 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
@@ -80,6 +83,9 @@ 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
@@ -90,11 +96,31 @@ 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: Not required to be supported by any OS. Possibly deprecated.
+    description: MacOS only
  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"
-    title: Media www
-    description: Not required to be supported by any OS. Possibly deprecated.
+    icon: language
+    title: Media Browser
  497:
    id: "KSC_F1"
    keyCode: "BrowserBack"
-    title: Media Back
-    description: Not required to be supported by any OS. Possibly deprecated.
+    title: Media Browser Back
  498:
    id: "KSC_F2"
    keyCode: "BrowserForward"
-    title: Media Forward
-    description: Not required to be supported by any OS. Possibly deprecated.
+    title: Media Browser Forward
  499:
    id: "KSC_F3"
    keyCode: "BrowserStop"
-    title: Media Stop
-    description: Not required to be supported by any OS. Possibly deprecated.
+    title: Media Browser Stop
+    description: Not supported on MacOS
  500:
    id: "KSC_F4"
+    icon: search
    keyCode: "BrowserSearch"
-    title: Media Find
-    description: Not required to be supported by any OS. Possibly deprecated.
+    title: Media Browser Search
  501:
    id: "KSC_F5"
-    title: Media Scroll Up
-    description: Not required to be supported by any OS. Possibly deprecated.
+    icon: brightness_high
+    title: Media Brightness Up
  502:
    id: "KSC_F6"
-    title: Media Scroll Down
-    description: Not required to be supported by any OS. Possibly deprecated.
+    icon: brightness_low
+    title: Media Brightness Down
  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 Sleep
+    title: Media System Sleep
    description: Not required to be supported by any OS. Possibly deprecated.
  505:
    id: "KSC_F9"
+    icon: routine
    keyCode: "WakeUp"
-    title: Media Coffee
-    description: Not required to be supported by any OS. Possibly deprecated.
+    title: Media System Wake
+    description: Not supported on Windows
  506:
    id: "KSC_FA"
    keyCode: "BrowserRefresh"
-    title: Media Refresh
-    description: Not required to be supported by any OS. Possibly deprecated.
+    title: Media Browser Refresh
  507:
    id: "KSC_FB"
-    title: Media Calc
-    description: Not required to be supported by any OS. Possibly deprecated.
+    title: Media Calculator
+    description: Not supported on MacOS
  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
@@ -0,0 +1,37 @@
+name: M4G
+col:
+  # Ring / Middle
+  - offset: [2, 0]
+    row:
+      - switch: { d: 25, e: 26, n: 27, w: 28, s: 29 }
+      - switch: { d: 20, e: 21, n: 22, w: 23, s: 24 }
+      - offset: [4, 0]
+        switch: { d: 65, w: 66, n: 67, e: 68, s: 69 }
+      - switch: { d: 70, w: 71, n: 72, e: 73, s: 74 }
+  - offset: [2, 0]
+    row:
+      - switch: { d: 40, e: 41, n: 42, w: 43, s: 44 }
+      - switch: { d: 35, e: 36, n: 37, w: 38, s: 39 }
+      - offset: [4, 0]
+        switch: { d: 80, w: 81, n: 82, e: 83, s: 84 }
+      - switch: { d: 85, w: 86, n: 87, e: 88, s: 89 }
+  # Pinkie / Index
+  - offset: [0, -3]
+    row:
+      - switch: { d: 30, e: 31, n: 32, w: 33, s: 34 }
+      - offset: [4, 0]
+        switch: { d: 15, e: 16, n: 17, w: 18, s: 19 }
+      - switch: { d: 60, w: 61, n: 62, e: 63, s: 64 }
+      - offset: [4, 0]
+        switch: { d: 75, w: 76, n: 77, e: 78, s: 79 }
+  # Thumbs
+  - row:
+      - offset: [5.5, 0.5]
+        switch: { d: 10, e: 11, n: 12, w: 13, s: 14 }
+      - offset: [1, 0.5]
+        switch: { d: 55, w: 56, n: 57, e: 58, s: 59 }
+  - row:
+      - offset: [4.5, -0.25]
+        switch: { d: 5, e: 6, n: 7, w: 8, s: 9 }
+      - offset: [3, -0.25]
+        switch: { d: 50, w: 51, n: 52, e: 53, s: 54 }
--- a/src/lib/assets/random-tips/en.json
+++ b/src/lib/assets/random-tips/en.json
@@ -17,7 +17,7 @@
  "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!",
-  "Spurring is a chording only mode which is more advanced, but can greatly imporve typing speed when mastered",
+  "Spurring is a chording only mode which is more advanced, but can greatly improve typing speed when mastered",
  "The forced chord phenomenon is when typing a word character by character starts to feel unnatural",
  "Don't be afraid to delete chords you keep getting wrong",
  "Most people find it easier to start their chord library from scratch rather than learning someone else's",
--- a/src/lib/backup/backup.ts
+++ b/src/lib/backup/backup.ts
@@ -96,7 +96,12 @@ export function restoreFromFile(
    case "backup": {
      const recent = file.history[0];
      if (!recent) return;
-      if (recent[1].device !== get(serialPort)?.device) {
+      let backupDevice = recent[1].device;
+      if (backupDevice === "TWO") backupDevice = "ONE";
+      let currentDevice = get(serialPort)?.device;
+      if (currentDevice === "TWO") currentDevice = "ONE";
+
+      if (backupDevice !== currentDevice) {
        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
@@ -1,26 +0,0 @@
-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
@@ -0,0 +1,140 @@
+<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
@@ -0,0 +1,130 @@
+<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
@@ -0,0 +1,30 @@
+<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
@@ -0,0 +1,20 @@
+<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
@@ -0,0 +1,146 @@
+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
@@ -0,0 +1,112 @@
+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
@@ -0,0 +1,71 @@
+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
@@ -0,0 +1,48 @@
+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
@@ -0,0 +1,26 @@
+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
@@ -0,0 +1,79 @@
+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
@@ -0,0 +1,132 @@
+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
@@ -0,0 +1,58 @@
+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
@@ -0,0 +1,96 @@
+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
@@ -0,0 +1,287 @@
+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
@@ -0,0 +1,71 @@
+<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/routes/sandbox/+layout@.svelte
+++ b/src/routes/sandbox/+layout@.svelte
--- a/src/lib/chat/MatrixTimeline.svelte
+++ b/src/lib/chat/MatrixTimeline.svelte
@@ -0,0 +1,251 @@
+<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
@@ -0,0 +1,109 @@
+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
@@ -0,0 +1,357 @@
+<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
@@ -0,0 +1,56 @@
+<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
@@ -0,0 +1,71 @@
+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
@@ -0,0 +1,11 @@
+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
@@ -0,0 +1,85 @@
+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
@@ -0,0 +1,19 @@
+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,47 +3,53 @@
  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";

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

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

-  $: tooltip =
+  let tooltip = $derived(
    `&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 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"}
+{#if display === "keys"}
  <kbd
    class:icon={!!info.icon}
    class:left={info.variant === "left"}
    class:right={info.variant === "right"}
    use:title={{ title: tooltip }}
  >
-    {info.icon ?? info.display ?? info.id ?? `0x${info.code.toString(16)}`}
+    {dynamicMapping ??
+      info.icon ??
+      info.display ??
+      info.id ??
+      `0x${info.code.toString(16)}`}
  </kbd>
 {:else if display === "inline-keys"}
-  {#if !info.icon && info.id?.length === 1}
+  {#if !info.icon && dynamicMapping?.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
    >
@@ -55,7 +61,8 @@
      class:icon={!!info.icon}
      use:title={{ title: tooltip }}
    >
-      {info.icon ??
+      {dynamicMapping ??
+        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,17 +1,24 @@
 <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";

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

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

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

-  export let actions: Array<number | KeyInfo>;
-  export let display: "keys" | "inline-keys" = "inline-keys";
+  let {
+    actions,
+    display = "inline-keys",
+  }: { actions: Array<number | KeyInfo>; display?: "keys" | "inline-keys" } =
+    $props();
 </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" on:click={() => updateServiceWorker(true)}
+  <button title="Update ready" onclick={() => 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;
+  let value: string = $state("");
  let io: HTMLDivElement;
 </script>

-<form on:submit={submit}>
+<form onsubmit={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 class="anchor"></div>
  </div>
  <fieldset>
-    <input on:submit={submit} bind:value />
+    <input onsubmit={submit} bind:value />
  </fieldset>
 </form>

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

 {#if title}
--- a/src/lib/components/layout/ActionSelector.svelte
+++ b/src/lib/components/layout/ActionSelector.svelte
@@ -5,13 +5,22 @@
    KEYMAP_IDS,
  } from "$lib/serial/keymap-codes";
  import FlexSearch from "flexsearch";
-  import { createEventDispatcher, onMount } from "svelte";
+  import { 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";

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

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

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

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

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

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

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

-<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
-<dialog open on:click|self={() => dispatch("close")}>
+<!-- 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();
+  }}
+>
  <div class="content">
    <div class="search-row">
      <input
        type="search"
        bind:this={searchBox}
-        on:input={search}
-        on:keypress={(event) => {
+        oninput={search}
+        onkeypress={(event) => {
          if (event.key === "Enter") {
            select(exact);
          }
        }}
        placeholder={$LL.actionSearch.PLACEHOLDER()}
      />
-      <button on:click={() => select(0)} use:action={{ shortcut: "shift+esc" }}
+      <button onclick={() => select(0)} use:action={{ shortcut: "shift+esc" }}
        >{$LL.actionSearch.DELETE()}</button
      >
      <button
        use:action={{ title: $LL.modal.CLOSE(), shortcut: "esc" }}
        class="icon"
-        on:click={() => dispatch("close")}>close</button
+        onclick={onclose}>close</button
      >
    </div>
    <fieldset class="filters">
@@ -140,12 +154,12 @@
      {#if exact !== undefined}
        <li class="exact">
          <i>Exact match</i>
-          <ActionListItem id={exact} on:click={() => select(exact)} />
+          <ActionListItem id={exact} onclick={() => select(exact)} />
        </li>
      {/if}
      {#if !exact && code}
        {#if code >= 2 ** 5 && code < 2 ** 13}
-          <li><button on:click={() => select(code)}>USE CODE</button></li>
+          <li><button onclick={() => select(code)}>USE CODE</button></li>
        {:else}
          <li>Action code is out of range</li>
        {/if}
@@ -156,7 +170,7 @@
            ? Array.from(KEYMAP_CODES, ([it]) => it)
            : results}
        {#each filter ? resultValue.filter( (it) => filter.has(it), ) : resultValue as id (id)}
-          <li><ActionListItem {id} on:click={() => select(id)} /></li>
+          <li><ActionListItem {id} onclick={() => 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 } from "svelte";
+  import { getContext, mount, unmount } 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");
  }

-  export let visualLayout: VisualLayout;
-  $: layoutInfo = compileLayout(visualLayout);
+  let { visualLayout }: { visualLayout: VisualLayout } = $props();
+  let layoutInfo = $state(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,11 +127,26 @@
    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 = new ActionSelector({
+    const component = mount(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;
@@ -167,22 +182,8 @@

      await dialogAnimation.finished;

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

-  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]];
+  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();
 </script>

 {#each positions as position, layer}
--- a/src/lib/components/layout/KeyboardKey.svelte
+++ b/src/lib/components/layout/KeyboardKey.svelte
@@ -3,24 +3,41 @@
  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;

-  $: posX = key.pos[0] * scale;
-  $: posY = key.pos[1] * scale;
-  $: sizeX = key.size[0] * scale;
-  $: sizeY = key.size[1] * scale;
+  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);
 </script>

 <g
  class="key-group"
-  on:click
-  on:keypress
-  on:focusin
+  {onclick}
+  {onkeypress}
+  {onfocusin}
  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";

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

  const layers = [
@@ -21,6 +21,10 @@
      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,
@@ -29,6 +33,10 @@
      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,
+      ),
  };
 </script>

@@ -40,7 +48,7 @@
          <button
            class="icon"
            use:action={{ title, shortcut: `alt+${value + 1}` }}
-            on:click={() => ($activeLayer = value)}
+            onclick={() => ($activeLayer = value)}
            class:active={$activeLayer === value}
          >
            {icon}
--- a/src/lib/dialogs/ConfirmDialog.svelte
+++ b/src/lib/dialogs/ConfirmDialog.svelte
@@ -1,16 +1,24 @@
 <script lang="ts">
-  import { createEventDispatcher } from "svelte";
  import Dialog from "$lib/dialogs/Dialog.svelte";
  import ActionString from "$lib/components/ActionString.svelte";

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

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

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

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

 <dialog bind:this={modal}>
-  <slot />
+  {@render children()}
 </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
@@ -0,0 +1,101 @@
+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
@@ -0,0 +1,11 @@
+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,25 +1,28 @@
 import tippy from "tippy.js";
 import type { Action } from "svelte/action";
-import type { ComponentType, SvelteComponent } from "svelte";
+import { unmount, mount, type Component } from "svelte";

-export const popup: Action<HTMLButtonElement, ComponentType> = (
+export const popup: Action<HTMLButtonElement, Component> = (
  node,
  Component,
 ) => {
-  let component: SvelteComponent | undefined;
+  let component: {} | 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 ??= new Component({ target });
+      component ??= mount(Component, { target });
    },
    onHidden() {
-      component?.$destroy();
+      if (component) {
+        unmount(component);
+        component = undefined;
+      }
      target?.classList.remove("active");
-      component = undefined;
    },
  });

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

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

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

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

-  <button on:click={() => dispatch("confirm", undefined)}>Cancel</button>
+  <button onclick={() => onconfirm(undefined)}>Cancel</button>
  <button
-    on:click={() =>
-      dispatch(
-        "confirm",
-        ports.find((it) => it.getInfo().name === selected),
-      )}>Ok</button
+    onclick={() =>
+      onconfirm(ports.find((it) => it.getInfo().name === selected))}>Ok</button
  >
 </dialog>
--- a/src/lib/serial/chord.ts
+++ b/src/lib/serial/chord.ts
@@ -55,3 +55,19 @@ 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/device.ts
+++ b/src/lib/serial/device.ts
@@ -12,15 +12,19 @@ import { browser } from "$app/environment";

 const PORT_FILTERS: Map<string, SerialPortFilter> = new Map([
  ["ONE M0", { usbProductId: 32783, usbVendorId: 9114 }],
+  ["TWO S3", { usbProductId: 0x0056, usbVendorId: 0x2886 }],
  ["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,
 } as const;

 if (
@@ -86,9 +90,9 @@ export class CharaDevice {
  private suspendDebounceId?: number;

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

  get portInfo() {
@@ -124,9 +128,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 "CHARACHORDER";
-      this.device = device as "ONE" | "LITE" | "X";
-      this.chipset = chipset as "M0" | "S2";
+      this.company = company as typeof this.company;
+      this.device = device as typeof this.device;
+      this.chipset = chipset as typeof this.chipset;
      this.keyCount = KEY_COUNTS[this.device];
    } catch (e) {
      alert(e);
@@ -435,4 +439,81 @@ 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;
+      });
+
+      await this.suspend();
+
+      if (result !== "OTA OK") {
+        throw new Error(result);
+      }
+    } finally {
+      delete this.lock;
+      resolveLock!(true);
+    }
+  }
 }
--- a/src/lib/share/share-url.ts
+++ b/src/lib/share/share-url.ts
@@ -72,7 +72,6 @@ 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,10 +9,17 @@ export function persistentWritable<T>(
 ): Writable<T> {
  if (browser) {
    const persistedValue = localStorage.getItem(key);
-    const store =
-      persistedValue !== null
-        ? writable(JSON.parse(persistedValue))
-        : writable(value);
+    let store: Writable<T>;
+    try {
+      store =
+        persistedValue !== null
+          ? writable(JSON.parse(persistedValue))
+          : writable(value);
+    } catch (e) {
+      console.error(e);
+    } finally {
+      store = 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
@@ -0,0 +1,4 @@
+* {
+  box-sizing: border-box;
+  appearance: none;
+}
--- a/src/lib/style/elements/_h1.scss
+++ b/src/lib/style/elements/_h1.scss
@@ -0,0 +1,6 @@
+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,10 +1,35 @@
+@import "./reset";
+
@import "./form/button";
@import "./form/toggle";
@import "./form/checkbox";
+
@import "./kbd";
@import "./print";

-* {
-  box-sizing: border-box;
-  appearance: none;
+@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;
 }
--- 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 type { SvelteComponent } from "svelte";
+import { mount, unmount, type SvelteComponent } from "svelte";
 import Tooltip from "$lib/components/Tooltip.svelte";

 export const hotkeys = new Map<string, HTMLElement>();
@@ -9,20 +9,22 @@ export const action: Action<Element, { title?: string; shortcut?: string }> = (
  node: Element,
  { title, shortcut },
 ) => {
-  let component: SvelteComponent | undefined;
+  let component: {} | undefined;
  const tooltip = tippy(node, {
    arrow: false,
    theme: "tooltip",
    animation: "fade",
    onShow(instance) {
-      component ??= new Tooltip({
+      component ??= mount(Tooltip, {
        target: instance.popper.querySelector(".tippy-content") as Element,
        props: { title, shortcut },
      });
    },
    onHidden() {
-      component?.$destroy();
-      component = undefined;
+      if (component) {
+        unmount(component);
+        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 type { Chord } from "$lib/serial/chord";
+import { hashChord, type Chord } from "$lib/serial/chord";
 import {
  deviceChords,
  deviceLayout,
@@ -158,3 +158,9 @@ 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)/+error.svelte
+++ b/src/routes/(app)/+error.svelte
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -4,32 +4,32 @@
  import "$lib/style/scrollbar.scss";
  import "$lib/style/tippy.scss";
  import "$lib/style/theme.scss";
-  import { onDestroy, onMount } from "svelte";
+  import Sidebar from "./Sidebar.svelte";
+  import { onDestroy, onMount, type Snippet } from "svelte";
  import {
    applyTheme,
    argbFromHex,
    themeFromSourceColor,
  } from "@material/material-color-utilities";
-  import Navigation from "./Navigation.svelte";
  import { canAutoConnect } from "$lib/serial/device";
  import { initSerial } from "$lib/serial/connection";
  import type { LayoutData } from "./$types";
  import { browser } from "$app/environment";
-  import BrowserWarning from "./BrowserWarning.svelte";
  import "tippy.js/animations/shift-away.css";
  import "tippy.js/dist/tippy.css";
  import tippy from "tippy.js";
  import { theme, userPreferences } from "$lib/preferences.js";
-  import { LL, setLocale } from "../i18n/i18n-svelte";
-  import { loadLocale } from "../i18n/i18n-util.sync";
-  import { detectLocale } from "../i18n/i18n-util";
-  import type { Locales } from "../i18n/i18n-types";
+  import { LL, setLocale } from "$i18n/i18n-svelte";
+  import { loadLocale } from "$i18n/i18n-util.sync";
+  import { detectLocale } from "$i18n/i18n-util";
+  import type { Locales } from "$i18n/i18n-types";
  import Footer from "./Footer.svelte";
  import { osLayout, runLayoutDetection } from "$lib/os-layout.js";
  import PageTransition from "./PageTransition.svelte";
  import { restoreFromFile } from "$lib/backup/backup";
  import { goto } from "$app/navigation";
  import { hotkeys } from "$lib/title";
+  import { initMatrixClient } from "$lib/chat/chat";

  const locale =
    ((browser && localStorage.getItem("locale")) as Locales) || detectLocale();
@@ -49,7 +49,7 @@
    });
  }

-  export let data: LayoutData;
+  let { data, children }: { data: LayoutData; children: Snippet } = $props();

  onMount(async () => {
    theme.subscribe((it) => {
@@ -66,6 +66,9 @@
    if (browser && $userPreferences.autoConnect && (await canAutoConnect())) {
      await initSerial();
    }
+    if (browser) {
+      await initMatrixClient();
+    }

    if (data.importFile) {
      restoreFromFile(data.importFile);
@@ -79,7 +82,7 @@
    stopLayoutDetection?.();
  });

-  let webManifestLink = "";
+  let webManifestLink = $state("");

  function handleHotkey(event: KeyboardEvent) {
    let key = $osLayout.get(event.code);
@@ -108,57 +111,38 @@
 </script>

 <svelte:head>
-  {@html webManifestLink}
+  <!--{@html webManifestLink}-->
  <title>{$LL.TITLE()}</title>
  <meta name="description" content={$LL.DESCRIPTION()} />
  <meta name="theme-color" content={data.themeColor} />
 </svelte:head>

-<svelte:window on:keydown={handleHotkey} />
+<svelte:window onkeydown={handleHotkey} />

-<Navigation />
+<div class="layout">
+  <Sidebar />

-<!-- <PickChangesDialog /> -->
+  <!-- <PickChangesDialog /> -->

-<PageTransition>
-  <slot />
-</PageTransition>
+  <PageTransition>
+    {#if children}
+      {@render children()}
+    {/if}
+  </PageTransition>

-<Footer />
-
-{#if import.meta.env.TAURI_FAMILY === undefined && browser && !("serial" in navigator)}
-  <BrowserWarning />
-{/if}
-
-<style lang="scss" global>
-  body {
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
+  <Footer />
+</div>

+<style lang="scss">
+  .layout {
    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;
-  }
-
-  h1 {
-    margin-block-start: 0;
-    font-size: 4rem;
-    font-weight: 700;
-    color: var(--md-sys-color-secondary);
+    display: grid;
+    grid-template-areas:
+      "sidebar main"
+      "sidebar footer";
+    grid-template-columns: auto 1fr;
+    grid-template-rows: 1fr;
  }
 </style>
--- a/src/routes/(app)/+layout.ts
+++ b/src/routes/(app)/+layout.ts
@@ -0,0 +1,16 @@
+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)/BackupPopup.svelte
+++ b/src/routes/(app)/BackupPopup.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
  import { preference } from "$lib/preferences";
-  import LL from "../i18n/i18n-svelte";
+  import LL from "$i18n/i18n-svelte";
  import {
    createChordBackup,
    createLayoutBackup,
@@ -25,25 +25,25 @@
  </p>
  <fieldset>
    <legend>{$LL.backup.INDIVIDUAL()}</legend>
-    <button on:click={() => downloadFile(createChordBackup())}>
+    <button onclick={() => downloadFile(createChordBackup())}>
      <span class="icon">piano</span>
      {$LL.configure.chords.TITLE()}
    </button>
-    <button on:click={() => downloadFile(createLayoutBackup())}>
+    <button onclick={() => downloadFile(createLayoutBackup())}>
      <span class="icon">keyboard</span>
      {$LL.configure.layout.TITLE()}
    </button>
-    <button on:click={() => downloadFile(createSettingsBackup())}>
+    <button onclick={() => downloadFile(createSettingsBackup())}>
      <span class="icon">settings</span>
      {$LL.configure.settings.TITLE()}
    </button>
  </fieldset>
  <div class="save">
-    <button class="primary" on:click={downloadBackup}
+    <button class="primary" onclick={downloadBackup}
      ><span class="icon">download</span>{$LL.backup.DOWNLOAD()}</button
    >
    <label class="button"
-      ><input on:input={restoreBackup} type="file" /><span class="icon"
+      ><input oninput={restoreBackup} type="file" /><span class="icon"
        >settings_backup_restore</span
      >{$LL.backup.RESTORE()}</label
    >
--- a/src/routes/(app)/BrowserWarning.svelte
+++ b/src/routes/(app)/BrowserWarning.svelte
@@ -1,5 +1,5 @@
 <script>
-  import LL from "../i18n/i18n-svelte";
+  import LL from "$i18n/i18n-svelte";
 </script>

 <dialog open>
--- a/src/routes/(app)/ConnectionPopup.svelte
+++ b/src/routes/(app)/ConnectionPopup.svelte
@@ -3,7 +3,7 @@
  import { browser } from "$app/environment";
  import { slide, fade } from "svelte/transition";
  import { preference } from "$lib/preferences";
-  import LL from "../i18n/i18n-svelte";
+  import LL from "$i18n/i18n-svelte";
  import { downloadBackup } from "$lib/backup/backup";

  function reboot() {
@@ -34,13 +34,9 @@
    }
  }

-  let rebootInfo = false;
-  let terminal = false;
-  let powerDialog = false;
-
-  $: if ($serialPort) {
-    rebootInfo = false;
-  }
+  let rebootInfo = $derived($serialPort !== undefined);
+  let terminal = $state(false);
+  let powerDialog = $state(false);
 </script>

 <section>
@@ -117,7 +113,7 @@
      {#if $serialPort}
        <button
          class="secondary"
-          on:click={() => {
+          onclick={() => {
            $serialPort?.forget();
            $serialPort = undefined;
          }}
@@ -125,7 +121,7 @@
          >{$LL.deviceManager.DISCONNECT()}</button
        >
      {:else}
-        <button class="error" on:click={connect}
+        <button class="error" onclick={connect}
          ><span class="icon">usb</span>{$LL.deviceManager.CONNECT()}</button
        >
      {/if}
@@ -135,13 +131,13 @@
          title={$LL.deviceManager.TERMINAL()}
          class="icon"
          class:disabled={$serialPort === undefined}
-          on:click={() => (terminal = !terminal)}>terminal</a
+          onclick={() => (terminal = !terminal)}>terminal</a
        >
        <button
          class="icon"
          title={$LL.deviceManager.bootMenu.TITLE()}
          disabled={$serialPort === undefined}
-          on:click={() => (powerDialog = !powerDialog)}>settings_power</button
+          onclick={() => (powerDialog = !powerDialog)}>settings_power</button
        >
      </div>
    </div>
@@ -151,18 +147,18 @@
        role="button"
        tabindex="-1"
        transition:fade={{ duration: 250 }}
-        on:click={() => (powerDialog = !powerDialog)}
-        on:keypress={(event) => {
+        onclick={() => (powerDialog = !powerDialog)}
+        onkeypress={(event) => {
          if (event.key === "Enter") powerDialog = !powerDialog;
        }}
-      />
+      ></div>
      <dialog open transition:slide={{ duration: 250 }}>
        <h3>{$LL.deviceManager.bootMenu.TITLE()}</h3>
-        <button on:click={reboot}
+        <button onclick={reboot}
          ><span class="icon">restart_alt</span
          >{$LL.deviceManager.bootMenu.REBOOT()}</button
        >
-        <button on:click={bootloader}
+        <button onclick={bootloader}
          ><span class="icon">rule_settings</span
          >{$LL.deviceManager.bootMenu.BOOTLOADER()}</button
        >
--- a/src/routes/(app)/Footer.svelte
+++ b/src/routes/(app)/Footer.svelte
@@ -1,23 +1,25 @@
 <script lang="ts">
  import { browser, version } from "$app/environment";
  import { action } from "$lib/title";
-  import LL, { setLocale } from "../i18n/i18n-svelte";
+  import LL, { setLocale } from "$i18n/i18n-svelte";
  import { theme } from "$lib/preferences.js";
-  import type { Locales } from "../i18n/i18n-types";
-  import { detectLocale, locales } from "../i18n/i18n-util";
-  import { loadLocaleAsync } from "../i18n/i18n-util.async";
+  import type { Locales } from "$i18n/i18n-types";
+  import { detectLocale, locales } from "$i18n/i18n-util";
+  import { loadLocaleAsync } from "$i18n/i18n-util.async";
  import { tick } from "svelte";
  import SyncOverlay from "./SyncOverlay.svelte";
  import { serialPort } from "$lib/serial/connection";

-  let locale =
-    (browser && (localStorage.getItem("locale") as Locales)) || detectLocale();
-  $: if (browser)
-    (async () => {
-      localStorage.setItem("locale", locale);
-      await loadLocaleAsync(locale);
+  let locale = $state(
+    (browser && (localStorage.getItem("locale") as Locales)) || detectLocale(),
+  );
+  $effect(() => {
+    if (!browser) return;
+    localStorage.setItem("locale", locale);
+    loadLocaleAsync(locale).then(() => {
      setLocale(locale);
-    })();
+    });
+  });

  function switchTheme() {
    const mode = $theme.mode === "light" ? "dark" : "light";
@@ -37,7 +39,6 @@
 <footer>
  <ul>
    <li>
-      <!-- svelte-ignore not-defined -->
      <a
        href={import.meta.env.VITE_HOMEPAGE_URL}
        rel="noreferrer"
@@ -86,7 +87,7 @@
        <button
          use:action={{ title: $LL.profile.theme.DARK_MODE() }}
          class="icon"
-          on:click={switchTheme}
+          onclick={switchTheme}
        >
          dark_mode
        </button>
@@ -94,25 +95,27 @@
        <button
          use:action={{ title: $LL.profile.theme.LIGHT_MODE() }}
          class="icon"
-          on:click={switchTheme}
+          onclick={switchTheme}
        >
          light_mode
        </button>
      {/if}
    </li>
    <li>
-      <button
+      <div
+        role="button"
        class="icon"
        use:action={{ title: $LL.profile.LANGUAGE() }}
-        on:click={() => languageSelect.click()}
-        >translate
+        onclick={() => languageSelect.click()}
+      >
+        translate

        <select bind:value={locale} bind:this={languageSelect}>
          {#each locales as code}
            <option value={code}>{code}</option>
          {/each}
        </select>
-      </button>
+      </div>
    </li>
  </ul>
 </footer>
--- a/src/routes/(app)/PageTransition.svelte
+++ b/src/routes/(app)/PageTransition.svelte
@@ -2,13 +2,16 @@
  import { fly } from "svelte/transition";
  import { afterNavigate, beforeNavigate } from "$app/navigation";
  import { expoIn, expoOut } from "svelte/easing";
+  import type { Snippet } from "svelte";

-  let inDirection = 0;
-  let outDirection = 0;
-  let outroEnd: undefined | (() => void) = undefined;
+  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 = false;
+  let isNavigating = $state(false);

  const routeOrder = [
    "/config/chords/",
@@ -48,8 +51,14 @@
  <main
    in:fly={{ x: inDirection * 24, duration: 150, easing: expoOut }}
    out:fly={{ x: outDirection * 24, duration: 150, easing: expoIn }}
-    on:outroend={outroEnd}
+    onoutroend={outroEnd}
  >
-    <slot />
+    {@render children()}
  </main>
 {/if}
+
+<style lang="scss">
+  main {
+    padding: 0;
+  }
+</style>
--- a/src/routes/(app)/Sidebar.svelte
+++ b/src/routes/(app)/Sidebar.svelte
@@ -0,0 +1,134 @@
+<script lang="ts">
+  import { browser } from "$app/environment";
+  import { LL } from "$i18n/i18n-svelte";
+  import { popup } from "$lib/popup";
+  import { userPreferences } from "$lib/preferences";
+  import { serialPort, syncStatus } from "$lib/serial/connection";
+  import { action } from "$lib/title";
+  import BackupPopup from "./BackupPopup.svelte";
+  import ConnectionPopup from "./ConnectionPopup.svelte";
+  import { onMount } from "svelte";
+
+  onMount(async () => {
+    if (browser && !$userPreferences.autoConnect) {
+      connectButton.click();
+    }
+  });
+
+  const routes = [
+    [
+      { href: "/config/chords/", icon: "dictionary", title: "Chords" },
+      { href: "/config/layout/", icon: "keyboard", title: "Layout" },
+      { href: "/config/settings/", icon: "tune", title: "Config" },
+    ],
+    [
+      { href: "/learn", icon: "school", title: "Learn", wip: true },
+      { href: "/learn", icon: "description", title: "Docs" },
+      { href: "/editor", icon: "edit_document", title: "Editor", wip: true },
+    ],
+    [
+      { href: "/chat", icon: "chat", title: "Chat", wip: true },
+      { href: "/plugin", icon: "code", title: "Plugin", wip: true },
+    ],
+  ] satisfies { href: string; icon: string; title: string; wip?: boolean }[][];
+
+  let connectButton: HTMLButtonElement;
+</script>
+
+<div class="sidebar">
+  <nav>
+    {#each routes as group}
+      <ul>
+        {#each group as { href, icon, title, wip }}
+          <li>
+            <a class:wip {href}>
+              <div class="icon">{icon}</div>
+              <div class="content">
+                {title}
+              </div>
+            </a>
+          </li>
+        {/each}
+      </ul>
+    {/each}
+  </nav>
+  <ul class="sidebar-footer">
+    <li>
+      <button
+        bind:this={connectButton}
+        use:action={{ title: $LL.deviceManager.TITLE() }}
+        use:popup={ConnectionPopup}
+        class="icon connect"
+        class:error={$serialPort === undefined}
+      >
+        cable
+      </button>
+    </li>
+    <li>
+      <button
+        use:action={{ title: $LL.backup.TITLE() }}
+        use:popup={BackupPopup}
+        class="icon {$syncStatus}"
+      >
+        account_circle
+      </button>
+    </li>
+  </ul>
+</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;
+    }
+
+    > .content {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
+  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)/SyncOverlay.svelte
+++ b/src/routes/(app)/SyncOverlay.svelte
@@ -5,7 +5,7 @@
    syncStatus,
    sync,
  } from "$lib/serial/connection";
-  import LL from "../i18n/i18n-svelte";
+  import LL from "$i18n/i18n-svelte";
  import { slide } from "svelte/transition";
 </script>

@@ -23,7 +23,7 @@
      {/if}
    </div>
  {:else if $serialPort}
-    <button transition:slide on:click={sync}
+    <button transition:slide onclick={sync}
      ><span class="icon">refresh</span>{$LL.sync.RELOAD()}</button
    >
  {/if}
--- a/src/routes/(app)/api/firmware/+page.json
+++ b/src/routes/(app)/api/firmware/+page.json
--- a/src/routes/(app)/chat/+page.svelte
+++ b/src/routes/(app)/chat/+page.svelte
@@ -0,0 +1,84 @@
+<script lang="ts">
+  import { isLoggedIn, matrix } from "$lib/chat/chat";
+  import { flip } from "svelte/animate";
+  import { slide } from "svelte/transition";
+  import Login from "./Login.svelte";
+
+  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
@@ -0,0 +1,33 @@
+<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
@@ -0,0 +1,12 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+  import Navigation from "./Navigation.svelte";
+
+  let { children }: { children?: Snippet } = $props();
+</script>
+
+<Navigation />
+
+{#if children}
+  {@render children()}
+{/if}
--- a/src/routes/(app)/config/+page.ts
+++ b/src/routes/(app)/config/+page.ts
@@ -2,5 +2,5 @@ import { redirect } from "@sveltejs/kit";
 import type { PageLoad } from "./$types";

 export const load = (() => {
-  throw redirect(302, "/config/");
+  redirect(302, "/config/layout/");
 }) satisfies PageLoad;
--- a/src/routes/(app)/config/ConfigTabs.svelte
+++ b/src/routes/(app)/config/ConfigTabs.svelte
@@ -1,8 +1,11 @@
-<script>
+<script lang="ts">
  import { page } from "$app/stores";
-  import LL from "../i18n/i18n-svelte";
+  import LL from "$i18n/i18n-svelte";
+  import type { Snippet } from "svelte";

-  $: paths = [
+  let { children }: { children?: Snippet } = $props();
+
+  let paths = $derived([
    {
      href: "/config/chords/",
      title: $LL.configure.chords.TITLE(),
@@ -18,7 +21,7 @@
      title: $LL.configure.settings.TITLE(),
      icon: "settings",
    },
-  ];
+  ]);
 </script>

 <nav>
@@ -30,7 +33,9 @@
  {/each}
 </nav>

-<slot />
+{#if children}
+  {@render children()}
+{/if}

 <style lang="scss">
  nav {
--- a/src/routes/(app)/config/EditActions.svelte
+++ b/src/routes/(app)/config/EditActions.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import LL from "../i18n/i18n-svelte";
+  import LL from "$i18n/i18n-svelte";
  import {
    changes,
    ChangeType,
@@ -25,7 +25,7 @@
    if (event.shiftKey) {
      changes.set([]);
    } else {
-      redoQueue = [$changes.pop()!, ...redoQueue];
+      redoQueue.unshift($changes.pop()!);
      changes.update((it) => it);
    }
  }
@@ -39,7 +39,7 @@
      });
    }
  }
-  let redoQueue: Change[] = [];
+  let redoQueue: Change[] = $state([]);

  async function save() {
    try {
@@ -138,19 +138,19 @@
  use:action={{ title: $LL.saveActions.UNDO(), shortcut: "ctrl+z" }}
  class="icon"
  disabled={$changes.length === 0}
-  on:click={undo}>undo</button
+  onclick={undo}>undo</button
 >
 <button
  use:action={{ title: $LL.saveActions.REDO(), shortcut: "ctrl+y" }}
  class="icon"
  disabled={redoQueue.length === 0}
-  on:click={redo}>redo</button
+  onclick={redo}>redo</button
 >
 {#if $changes.length !== 0}
  <button
    transition:fly={{ x: 10 }}
    use:action={{ title: $LL.saveActions.SAVE(), shortcut: "ctrl+shift+s" }}
-    on:click={save}
+    onclick={save}
    class="click-me"
    ><span class="icon">save</span>{$LL.saveActions.SAVE()}</button
  >
--- a/src/routes/(app)/config/Navigation.svelte
+++ b/src/routes/(app)/config/Navigation.svelte
@@ -1,25 +1,10 @@
 <script lang="ts">
-  import { serialPort, syncStatus } from "$lib/serial/connection";
-  import { slide, fly } from "svelte/transition";
+  import { fly } from "svelte/transition";
  import { canShare, triggerShare } from "$lib/share";
-  import { popup } from "$lib/popup";
-  import BackupPopup from "./BackupPopup.svelte";
-  import ConnectionPopup from "./ConnectionPopup.svelte";
-  import { browser } from "$app/environment";
-  import { userPreferences } from "$lib/preferences";
  import { action } from "$lib/title";
-  import LL from "../i18n/i18n-svelte";
+  import LL from "$i18n/i18n-svelte";
  import ConfigTabs from "./ConfigTabs.svelte";
  import EditActions from "./EditActions.svelte";
-  import { onMount } from "svelte";
-
-  onMount(async () => {
-    if (browser && !$userPreferences.autoConnect) {
-      connectButton.click();
-    }
-  });
-
-  let connectButton: HTMLButtonElement;
 </script>

 <nav>
@@ -35,52 +20,24 @@
        use:action={{ title: $LL.share.TITLE() }}
        transition:fly={{ x: -8 }}
        class="icon"
-        on:click={triggerShare}>share</button
+        onclick={triggerShare}>share</button
      >
      <button
        use:action={{ title: $LL.print.TITLE() }}
        transition:fly={{ x: -8 }}
        class="icon"
-        on:click={() => print()}>print</button
+        onclick={() => print()}>print</button
      >
-      <div transition:slide class="separator" />
    {/if}
    {#if import.meta.env.TAURI_FAMILY === undefined}
      {#await import("$lib/components/PwaStatus.svelte") then { default: PwaStatus }}
        <PwaStatus />
      {/await}
    {/if}
-    <button
-      use:action={{ title: $LL.backup.TITLE() }}
-      use:popup={BackupPopup}
-      class="icon {$syncStatus}"
-    >
-      {#if $userPreferences.backup}
-        history
-      {:else}
-        history_toggle_off
-      {/if}
-    </button>
-    <button
-      bind:this={connectButton}
-      use:action={{ title: $LL.deviceManager.TITLE() }}
-      use:popup={ConnectionPopup}
-      class="icon connect"
-      class:error={$serialPort === undefined}
-    >
-      cable
-    </button>
  </div>
 </nav>

 <style lang="scss">
-  .separator {
-    width: 1px;
-    height: 24px;
-    margin-inline: 4px;
-    background: var(--md-sys-color-outline-variant);
-  }
-
  nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
--- a/src/routes/(app)/config/SharePopup.svelte
+++ b/src/routes/(app)/config/SharePopup.svelte
@@ -1,5 +1,5 @@
 <script>
-  import LL from "../../i18n/i18n-svelte";
+  import LL from "$i18n/i18n-svelte";
 </script>

 {$LL.share.URL_COPIED()}
--- a/src/routes/(app)/config/chords/+page.svelte
+++ b/src/routes/(app)/config/chords/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { KEYMAP_CATEGORIES, KEYMAP_CODES } from "$lib/serial/keymap-codes";
+  import { KEYMAP_CODES } from "$lib/serial/keymap-codes";
  import FlexSearch from "flexsearch";
-  import LL from "../../../i18n/i18n-svelte";
+  import LL from "$i18n/i18n-svelte";
  import { action } from "$lib/title";
  import { onDestroy, onMount, setContext, tick } from "svelte";
  import { changes, ChangeType, chords } from "$lib/undo-redo";
@@ -21,7 +21,7 @@
  let resizeObserver: ResizeObserver;

  let abortIndexing: (() => void) | undefined;
-  let progress = 0;
+  let progress = $state(0);

  onMount(() => {
    resizeObserver = new ResizeObserver(() => {
@@ -37,11 +37,11 @@

  let index = new FlexSearch.Index();
  let searchIndex = writable<FlexSearch.Index | undefined>(undefined);
-  $: {
+  $effect(() => {
    abortIndexing?.();
    progress = 0;
    buildIndex($chords, $osLayout).then(searchIndex.set);
-  }
+  });

  function encodeChord(chord: ChordInfo, osLayout: Map<string, string>) {
    const plainPhrase: string[] = [""];
@@ -144,7 +144,6 @@
      progress = i;

      if ("phrase" in chord) {
-        console.log(encodeChord(chord, osLayout));
        await index.addAsync(i, encodeChord(chord, osLayout));
      }
    }
@@ -211,7 +210,7 @@

  setContext("cursor-crossfade", crossfade({}));

-  let page = 0;
+  let page = $state(0);
 </script>

 <svelte:head>
@@ -223,7 +222,7 @@
  <input
    type="search"
    placeholder={$LL.configure.chords.search.PLACEHOLDER(progress + 1)}
-    on:input={(event) => $searchIndex && search($searchIndex, event)}
+    oninput={(event) => $searchIndex && search($searchIndex, event)}
    class:loading={progress !== $chords.length - 1}
  />
  <div class="paginator">
@@ -235,12 +234,12 @@
  </div>
  <button
    class="icon"
-    on:click={() => (page = Math.max(page - 1, 0))}
+    onclick={() => (page = Math.max(page - 1, 0))}
    use:action={{ shortcut: "ctrl+left" }}>navigate_before</button
  >
  <button
    class="icon"
-    on:click={() => (page = Math.min(page + 1, $lastPage))}
+    onclick={() => (page = Math.min(page + 1, $lastPage))}
    use:action={{ shortcut: "ctrl+right" }}>navigate_next</button
  >
 </div>
@@ -251,22 +250,22 @@
    <div class="results">
      <table transition:fly={{ y: 48, easing: expoOut }}>
        {#if $lastPage !== -1}
-          {#if page === 0}
-            <tr
-              ><th class="new-chord"
-                ><ChordActionEdit
-                  on:submit={({ detail }) => insertChord(detail)}
-                /></th
-              ><td /><td /></tr
-            >
-          {/if}
-          {#each $items.slice(page * $pageSize - (page === 0 ? 0 : 1), (page + 1) * $pageSize - 1) as [chord] (JSON.stringify(chord?.id))}
-            {#if chord}
-              <tr>
-                <ChordEdit {chord} on:duplicate={() => (page = 0)} />
-              </tr>
+          <tbody>
+            {#if page === 0}
+              <tr
+                ><th class="new-chord"
+                  ><ChordActionEdit
+                    onsubmit={(action) => insertChord(action)}
+                  /></th
+                ><td></td><td></td></tr
+              >
            {/if}
-          {/each}
+            {#each $items.slice(page * $pageSize - (page === 0 ? 0 : 1), (page + 1) * $pageSize - 1) as [chord] (JSON.stringify(chord?.id))}
+              {#if chord}
+                <ChordEdit {chord} onduplicate={() => (page = 0)} />
+              {/if}
+            {/each}</tbody
+          >
        {:else}
          <caption>{$LL.configure.chords.search.NO_RESULTS()}</caption>
        {/if}
@@ -278,7 +277,7 @@
          "\n\nDid you know? " +
          randomTips[Math.floor(randomTips.length * Math.random())]}
      ></textarea>
-      <button on:click={downloadVocabulary}
+      <button onclick={downloadVocabulary}
        ><span class="icon">download</span>
        {$LL.configure.chords.VOCABULARY()}</button
      >
@@ -396,7 +395,7 @@

  table {
    height: fit-content;
-    overflow: hidden;
+    overflow-y: hidden;
    transition: all 1s ease;
  }
 </style>
--- a/src/routes/(app)/config/chords/ChordActionEdit.svelte
+++ b/src/routes/(app)/config/chords/ChordActionEdit.svelte
@@ -1,41 +1,44 @@
 <script lang="ts">
  import type { ChordInfo } from "$lib/undo-redo";
-  import { changes, ChangeType } from "$lib/undo-redo";
-  import { createEventDispatcher } from "svelte";
-  import LL from "../../../i18n/i18n-svelte";
+  import { SvelteSet } from "svelte/reactivity";
+  import { changes, chordHashes, ChangeType } from "$lib/undo-redo";
+  import LL from "$i18n/i18n-svelte";
  import ActionString from "$lib/components/ActionString.svelte";
  import { selectAction } from "./action-selector";
  import { serialPort } from "$lib/serial/connection";
  import { get } from "svelte/store";
  import { inputToAction } from "./input-converter";
+  import { hashChord, type Chord } from "$lib/serial/chord";

-  export let chord: ChordInfo | undefined = undefined;
+  let {
+    chord = undefined,
+    onsubmit,
+  }: { chord?: ChordInfo; onsubmit: (actions: number[]) => void } = $props();

-  const dispatch = createEventDispatcher();
-
-  let pressedKeys = new Set<number>();
-  let editing = false;
+  let pressedKeys = new SvelteSet<number>();
+  let editing = $state(false);

  function compare(a: number, b: number) {
    return a - b;
  }

  function makeChordInput(...actions: number[]) {
-    const compound = compoundIndices ?? [];
+    const compound = compoundInputs[0]
+      ? hashChord(compoundInputs[0].actions)
+      : 0;
    return [
-      ...compound,
      ...Array.from(
        {
-          length: 12 - (compound.length + actions.length + 1),
+          length: 12 - actions.length,
        },
-        () => 0,
+        (_, i) => (compound >> (i * 10)) & 0x3ff,
      ),
      ...actions.toSorted(compare),
    ];
  }

  function edit() {
-    pressedKeys = new Set();
+    pressedKeys.clear();
    editing = true;
  }

@@ -50,14 +53,13 @@
      return;
    }
    pressedKeys.add(input);
-    pressedKeys = pressedKeys;
  }

  function keyup() {
    if (!editing) return;
    editing = false;
    if (pressedKeys.size < 1) return;
-    if (!chord) return dispatch("submit", makeChordInput(...pressedKeys));
+    if (!chord) return onsubmit(makeChordInput(...pressedKeys));
    changes.update((changes) => {
      changes.push({
        type: ChangeType.Chord,
@@ -71,9 +73,9 @@
  }

  function addSpecial(event: MouseEvent) {
+    event.stopPropagation();
    selectAction(event, (action) => {
      changes.update((changes) => {
-        console.log(compoundIndices, chordActions, action);
        changes.push({
          type: ChangeType.Chord,
          id: chord!.id,
@@ -85,10 +87,30 @@
    });
  }

-  $: chordActions = chord?.actions
-    .slice(chord.actions.lastIndexOf(0) + 1)
-    .toSorted(compare);
-  $: compoundIndices = chord?.actions.slice(0, chord.actions.indexOf(0));
+  function* resolveCompound(chord?: ChordInfo) {
+    if (!chord) return;
+    let current: Chord = chord;
+    for (let i = 0; i < 10; i++) {
+      if (current.actions[3] !== 0) return;
+      const compound = current.actions
+        .slice(0, 3)
+        .reduce((a, b, i) => a | (b << (i * 10)));
+      if (compound === 0) return;
+      const next = $chordHashes.get(compound);
+      if (!next) {
+        return null;
+      }
+
+      current = next;
+      yield next;
+    }
+    return;
+  }
+
+  let chordActions = $derived(
+    chord?.actions.slice(chord.actions.lastIndexOf(0) + 1).toSorted(compare),
+  );
+  let compoundInputs = $derived([...resolveCompound(chord)].reverse());
 </script>

 <button
@@ -99,10 +121,10 @@
    (chordActions.length < 2 ||
      chordActions.some((it, i) => chordActions[i] !== it))}
  class="chord"
-  on:click={edit}
-  on:keydown={keydown}
-  on:keyup={keyup}
-  on:blur={keyup}
+  onclick={edit}
+  onkeydown={keydown}
+  onkeyup={keyup}
+  onblur={keyup}
 >
  {#if editing && pressedKeys.size === 0}
    <span>{$LL.configure.chords.HOLD_KEYS()}</span>
@@ -110,21 +132,22 @@
    <span>{$LL.configure.chords.NEW_CHORD()}</span>
  {/if}
  {#if !editing}
-    {#each compoundIndices ?? [] as index}
-      <sub>{index}</sub>
-    {/each}
-    {#if compoundIndices?.length}
+    {#each compoundInputs as compound}
+      <sub
+        ><ActionString
+          display="keys"
+          actions={compound.actions.slice(compound.actions.lastIndexOf(0) + 1)}
+        ></ActionString>
+      </sub>
      <span>&rarr;</span>
-    {/if}
+    {/each}
  {/if}
  <ActionString
    display="keys"
-    actions={editing ? [...pressedKeys].sort(compare) : chordActions ?? []}
+    actions={editing ? [...pressedKeys].sort(compare) : (chordActions ?? [])}
  />
  <sup>•</sup>
-  <button class="icon add" on:click|stopPropagation={addSpecial}
-    >add_circle</button
-  >
+  <div role="button" class="icon add" onclick={addSpecial}>add_circle</div>
 </button>

 <style lang="scss">
--- a/src/routes/(app)/config/chords/ChordEdit.svelte
+++ b/src/routes/(app)/config/chords/ChordEdit.svelte
@@ -8,11 +8,10 @@
  import { charaFileToUriComponent } from "$lib/share/share-url";
  import SharePopup from "../SharePopup.svelte";
  import tippy from "tippy.js";
-  import { createEventDispatcher } from "svelte";
+  import { mount, unmount } from "svelte";

-  export let chord: ChordInfo;
-
-  const dispatch = createEventDispatcher<{ duplicate: void }>();
+  let { chord, onduplicate }: { chord: ChordInfo; onduplicate: () => void } =
+    $props();

  function remove() {
    changes.update((changes) => {
@@ -47,7 +46,7 @@
    id.splice(id.indexOf(0), 1);
    id.push(0);
    while ($chords.some((it) => JSON.stringify(it.id) === JSON.stringify(id))) {
-      id[id.length - 1]++;
+      id[id.length - 1]!++;
    }

    changes.update((changes) => {
@@ -60,7 +59,7 @@
      return changes;
    });

-    dispatch("duplicate");
+    onduplicate();
  }

  async function share(event: Event) {
@@ -74,49 +73,53 @@
      }),
    );
    await navigator.clipboard.writeText(url.toString());
-    let shareComponent: SharePopup;
+    let shareComponent = {};
    tippy(event.target as HTMLElement, {
      onCreate(instance) {
        const target = instance.popper.querySelector(".tippy-content")!;
-        shareComponent = new SharePopup({ target });
+        shareComponent = mount(SharePopup, { target });
      },
      onHidden(instance) {
        instance.destroy();
      },
      onDestroy(_instance) {
-        shareComponent.$destroy();
+        unmount(shareComponent);
      },
    }).show();
  }
 </script>

-<th>
-  <ChordActionEdit {chord} />
-</th>
-<td>
-  <ChordPhraseEdit {chord} />
-</td>
-<td class="table-buttons">
-  {#if !chord.deleted}
-    <button transition:slide class="icon compact" on:click={remove}
-      >delete</button
-    >
-  {:else}
-    <button transition:slide class="icon compact" on:click={restore}
-      >restore_from_trash</button
-    >
-  {/if}
-  <button disabled={chord.deleted} class="icon compact" on:click={duplicate}
-    >content_copy</button
-  >
-  <button
-    class="icon compact"
-    class:disabled={chord.isApplied}
-    on:click={restore}>undo</button
-  >
-  <div class="separator" />
-  <button class="icon compact" on:click={share}>share</button>
-</td>
+<tr>
+  <th>
+    <ChordActionEdit {chord} onsubmit={() => {}} />
+  </th>
+  <td class="phrase-edit">
+    <ChordPhraseEdit {chord} />
+  </td>
+  <td>
+    <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>
+  </td>
+</tr>

 <style lang="scss">
  .separator {
@@ -133,17 +136,29 @@
    transition: opacity 75ms ease;
  }

-  td {
+  .phrase-edit {
+    position: relative;
+  }
+
+  tr {
    position: relative;
  }

  .table-buttons {
    opacity: 0;
    transition: opacity 75ms ease;
+    position: absolute;
+    top: 0;
+    right: 0;
+    transform: translate(100%, -50%);
+    background: var(--md-sys-color-surface-variant);
  }

-  :global(tr):focus-within > .table-buttons,
-  :global(tr):hover > .table-buttons {
+  .icon {
+    font-size: 18px;
+  }
+
+  tr:hover .table-buttons {
    opacity: 1;
  }
 </style>
--- a/src/routes/(app)/config/chords/ChordEditActions.svelte
+++ b/src/routes/(app)/config/chords/ChordEditActions.svelte
@@ -0,0 +1,21 @@
+<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)/config/chords/ChordPhraseEdit.svelte
+++ b/src/routes/(app)/config/chords/ChordPhraseEdit.svelte
@@ -9,11 +9,11 @@
  import { serialPort } from "$lib/serial/connection";
  import { get } from "svelte/store";

-  export let chord: ChordInfo;
+  let { chord }: { chord: ChordInfo } = $props();

  onMount(() => {
    if (chord.phrase.length === 0) {
-      box.focus();
+      box?.focus();
    }
  });

@@ -40,6 +40,7 @@
  }

  function moveCursor(to: number) {
+    if (!box) return;
    cursorPosition = Math.max(0, Math.min(to, chord.phrase.length));
    const item = box.children.item(cursorPosition) as HTMLElement;
    cursorOffset = item.offsetLeft + item.offsetWidth;
@@ -71,7 +72,7 @@
  }

  function clickCursor(event: MouseEvent) {
-    if (event.target === button) return;
+    if (box === undefined || event.target === button) return;
    const distance = (event as unknown as { layerX: number }).layerX;

    let i = 0;
@@ -93,37 +94,36 @@
        insertAction(cursorPosition, action);
        tick().then(() => moveCursor(cursorPosition + 1));
      },
-      () => box.focus(),
+      () => box?.focus(),
    );
  }

-  let button: HTMLButtonElement;
-  let box: HTMLDivElement;
+  let button: HTMLButtonElement | undefined = $state();
+  let box: HTMLDivElement | undefined = $state();
  let cursorPosition = 0;
-  let cursorOffset = 0;
+  let cursorOffset = $state(0);

-  let hasFocus = false;
+  let hasFocus = $state(false);
 </script>

-<!-- svelte-ignore a11y-autofocus -->
 <div
-  on:keydown={keypress}
-  on:mousedown={clickCursor}
+  onkeydown={keypress}
+  onmousedown={clickCursor}
  role="textbox"
  tabindex="0"
  bind:this={box}
  class:edited={!chord.deleted && chord.phraseChanged}
-  on:focusin={() => (hasFocus = true)}
-  on:focusout={(event) => {
+  onfocusin={() => (hasFocus = true)}
+  onfocusout={(event) => {
    if (event.relatedTarget !== button) hasFocus = false;
  }}
 >
  {#if hasFocus}
    <div transition:scale class="cursor" style:translate="{cursorOffset}px 0">
-      <button class="icon" bind:this={button} on:click={addSpecial}>add</button>
+      <button class="icon" bind:this={button} onclick={addSpecial}>add</button>
    </div>
  {:else}
-    <div />
+    <div></div>
    <!-- placeholder for cursor placement -->
  {/if}
  <ActionString actions={chord.phrase} />
--- a/src/routes/(app)/config/chords/action-selector.ts
+++ b/src/routes/(app)/config/chords/action-selector.ts
@@ -1,12 +1,21 @@
 import ActionSelector from "$lib/components/layout/ActionSelector.svelte";
-import { tick } from "svelte";
+import { mount, unmount, tick } from "svelte";

 export function selectAction(
  event: MouseEvent | KeyboardEvent,
  select: (action: number) => void,
  dismissed?: () => void,
 ) {
-  const component = new ActionSelector({ target: document.body });
+  const component = mount(ActionSelector, {
+    target: document.body,
+    props: {
+      onclose: () => closed(),
+      onselect: (action: number) => {
+        select(action);
+        closed();
+      },
+    },
+  });
  const dialog = document.querySelector("dialog > div") as HTMLDivElement;
  const backdrop = document.querySelector("dialog") as HTMLDialogElement;
  const dialogRect = dialog.getBoundingClientRect();
@@ -40,14 +49,8 @@ export function selectAction(

    await dialogAnimation.finished;

-    component.$destroy();
+    unmount(component);
    await tick();
    dismissed?.();
  }
-
-  component.$on("close", closed);
-  component.$on("select", ({ detail }) => {
-    select(detail);
-    closed();
-  });
 }
--- a/src/routes/(app)/config/chords/input-converter.ts
+++ b/src/routes/(app)/config/chords/input-converter.ts
--- a/src/routes/(app)/config/layout/+page.svelte
+++ b/src/routes/(app)/config/layout/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
  import { share } from "$lib/share";
  import tippy from "tippy.js";
-  import { setContext } from "svelte";
+  import { mount, setContext, unmount } from "svelte";
  import Layout from "$lib/components/layout/Layout.svelte";
  import { charaFileToUriComponent } from "$lib/share/share-url";
  import SharePopup from "../SharePopup.svelte";
@@ -25,17 +25,17 @@
      }),
    );
    await navigator.clipboard.writeText(url.toString());
-    let shareComponent: SharePopup;
+    let shareComponent: {};
    tippy(event.target as HTMLElement, {
      onCreate(instance) {
        const target = instance.popper.querySelector(".tippy-content")!;
-        shareComponent = new SharePopup({ target });
+        shareComponent = mount(SharePopup, { target });
      },
      onHidden(instance) {
        instance.destroy();
      },
      onDestroy() {
-        shareComponent.$destroy();
+        unmount(shareComponent);
      },
    }).show();
  }
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Thea Schöbl	1f4604bcbc	fix: correctly show compatibility	2024-09-29 22:34:12 +02:00
Thea Schöbl	68faf57a22	ota update flow	2024-09-29 22:25:03 +02:00
Thea Schöbl	1d976947e1	fix: server load interferes with spa	2024-09-29 20:27:06 +02:00
Thea Schöbl	ca8bfac3bc	update deployment	2024-09-29 19:33:20 +02:00
Thea Schöbl	2f0d8f2e1d	feat: matrix	2024-09-29 02:00:52 +02:00
Thea Schöbl	236e23086c	ota suppor	2024-09-29 02:00:29 +02:00
Thea Schöbl	d1fefb88a1	feat: matrix	2024-09-13 21:35:52 +02:00
Thea Schöbl	26c43b1966	feat: learn	2024-08-21 18:20:04 +02:00
Thea Schöbl	8b2bfee099	feat: multi-purpose site feat: editor feat: plugin editor	2024-08-01 01:31:04 +02:00
Thea Schöbl	b8b903c5e1	refactor: update to Svelte 5 preview feat: add charrecorder feat: dynamic os layouts for CC1	2024-08-01 00:28:38 +02:00
Thea Schöbl	6201cf5b0c	feat: update dynamic library description	2024-07-24 19:19:20 +02:00
Thea Schöbl	aaafadf732	fix: pid/vid wrong	2024-07-24 19:07:18 +02:00
Thea Schöbl	fe80867ce4	feat: M4G support	2024-07-24 18:28:47 +02:00
Thea Schöbl	72a8e084ce	fix: plugins can't execute plugins	2024-07-16 15:21:34 +02:00
Thea Schöbl	989e844190	fix: compound order	2024-07-11 13:40:31 +02:00
Thea Schöbl	500221f39a	feat: experimental support for compounds	2024-07-11 13:38:19 +02:00
Raymond Li	d91273d27b	Update CONTRIBUTING.md	2024-07-10 00:22:40 +02:00
Thea Schöbl	888df6dd66	1.5.2	2024-07-09 16:43:06 +02:00
Thea Schöbl	7ad9612037	fix: add pnpm to pipeline	2024-07-09 16:39:21 +02:00
Thea Schöbl	3f9674b399	fix: pwa prevents layout share url from being loaded	2024-07-09 16:29:28 +02:00
Thea Schöbl	92ba5bcb24	fix: build	2024-07-09 16:28:42 +02:00
Thea Schöbl	2163a63a7c	fix: release build pipeline	2024-07-08 18:51:09 +02:00
Thea Schöbl	65a5a2517e	feat: improvements	2024-07-08 18:43:06 +02:00
Thea Schöbl	21e8c291b0	fix: compatibility issues	2024-07-08 09:26:51 +02:00
Thea Schöbl	4106a80d53	feat: improve device support	2024-06-08 17:34:18 +02:00
John de St Germain	01fb61d27c	Fix misspelling	2024-05-13 21:39:14 +02:00