2.5.0

refactor: rename auto-backup to fast connect
v2.4.0
2025-12-27 05:06:17 +00:00 · 2025-10-02 13:59:05 +02:00 · 2025-10-02 13:58:01 +02:00 · 2025-09-23 14:14:11 +02:00 · 2025-09-23 14:08:14 +02:00 · 2025-09-02 18:41:46 +02:00
182 changed files with 16592 additions and 7762 deletions
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -2,19 +2,21 @@ name: Build

 on:
  push:
+    branches:
+      - master
    tags:
-      - "v*"
-  workflow_dispatch:
+      - v*
+  pull_request:

 jobs:
-  CI:
+  build:
    name: 🔨🚀 Build and deploy
    runs-on: ubuntu-latest
    steps:
      - name: 🚚 Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
      - name: 🐍 Use Python 3.x
-        uses: actions/setup-python@v3.1.4
+        uses: actions/setup-python@v5
        with:
          python-version: 3.x
          cache: pip
@@ -24,11 +26,11 @@ jobs:
      - name: Install pnpm
        uses: pnpm/action-setup@v4
        with:
-          version: 8
-      - name: 🐉 Use Node.js 18.16.x
-        uses: actions/setup-node@v3
+          version: 10
+      - name: 🐉 Use Node.js 22.14.x
+        uses: actions/setup-node@v4
        with:
-          node-version: 18.16.x
+          node-version: 22.14.x
          cache: "pnpm"
      - name: ⏬ Install Node dependencies
        run: pnpm install
@@ -38,17 +40,18 @@ jobs:
      - name: 🔨 Build site
        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/tags/v*' && !github.event.pull_request.head.repo.fork }}
+        run: rsync -rav --mkpath --delete build/ deploy@charachorder.io:/home/deploy/www/
+
+      - name: Publish Branch
+        if: ${{ !github.event.pull_request.head.repo.fork }}
+        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/.prettierignore
+++ b/.prettierignore
@@ -7,6 +7,8 @@ node_modules
 .env.*
 !.env.example
 /src-tauri/target
+/openssl*
+/src/i18n/i18n*

 # Ignore files for PNPM, NPM and YARN
 pnpm-lock.yaml
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,4 +1,4 @@
 {
-  "plugins": ["prettier-plugin-svelte"],
+  "plugins": ["prettier-plugin-svelte", "prettier-plugin-css-order"],
  "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
 }
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -3,7 +3,6 @@
    "stylelint-config-standard-scss",
    "stylelint-config-recommended-scss",
    "stylelint-config-html/svelte",
-    "stylelint-config-clean-order",
    "stylelint-config-prettier-scss"
  ],
  "rules": {
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -29,9 +29,15 @@ 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.

 In other words, either have python as a development dependency or
 serve a 3.5MB icons font of which 99.5% is completely unused.
+
+To generate the icons use the following command:
+
+```shell
+npm run minify-icons
+```
--- a/flake.lock
+++ b/flake.lock
@@ -5,29 +5,11 @@
        "systems": "systems"
      },
      "locked": {
-        "lastModified": 1689068808,
-        "narHash": "sha256-6ixXo3wt24N/melDWjq70UuHQLxGV8jZvooRanIHXw0=",
+        "lastModified": 1731533236,
+        "narHash": "sha256-l0KFg5HjrsfsO/JpG+r7fRrqm12kzFHyUHqHCVpMMbI=",
        "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": "11707dc2f618dd54ca8739b309ec4fc024de578b",
        "type": "github"
      },
      "original": {
@@ -38,11 +20,11 @@
    },
    "nixpkgs": {
      "locked": {
-        "lastModified": 1689752456,
-        "narHash": "sha256-VOChdECcEI8ixz8QY+YC4JaNEFwQd1V8bA0G4B28Ki0=",
+        "lastModified": 1743259260,
+        "narHash": "sha256-ArWLUgRm1tKHiqlhnymyVqi5kLNCK5ghvm06mfCl4QY=",
        "owner": "NixOS",
        "repo": "nixpkgs",
-        "rev": "7f256d7da238cb627ef189d56ed590739f42f13b",
+        "rev": "eb0e0f21f15c559d2ac7633dc81d079d1caf5f5f",
        "type": "github"
      },
      "original": {
@@ -54,11 +36,11 @@
    },
    "nixpkgs_2": {
      "locked": {
-        "lastModified": 1681358109,
-        "narHash": "sha256-eKyxW4OohHQx9Urxi7TQlFBTDWII+F+x2hklDOQPB50=",
+        "lastModified": 1736320768,
+        "narHash": "sha256-nIYdTAiKIGnFNugbomgBJR+Xv5F1ZQU+HfaBqJKroC0=",
        "owner": "NixOS",
        "repo": "nixpkgs",
-        "rev": "96ba1c52e54e74c3197f4d43026b3f3d92e83ff9",
+        "rev": "4bc9c909d9ac828a039f288cf872d16d38185db8",
        "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": 1743388531,
+        "narHash": "sha256-OBcNE+2/TD1AMgq8HKMotSQF8ZPJEFGZdRoBJ7t/HIc=",
        "owner": "oxalica",
        "repo": "rust-overlay",
-        "rev": "aa3994f054038262df55122dfa552b9eab71a994",
+        "rev": "011de3c895927300651d9c2cb8e062adf17aa665",
        "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
@@ -14,7 +14,13 @@
    flake-utils.lib.eachDefaultSystem (
      system:
      let
-        overlays = [ (import rust-overlay) ];
+        overlays = [
+          (import rust-overlay)
+          (final: prev: {
+            nodejs = prev.nodejs_22;
+            corepack = prev.corepack_22;
+          })
+        ];
        pkgs = import nixpkgs { inherit system overlays; };
        rust-bin = pkgs.rust-bin.stable.latest.default.override {
          extensions = [
@@ -46,8 +52,8 @@
        ];
        packages =
          (with pkgs; [
-            nodejs_18
-            nodePackages.pnpm
+            nodejs
+            pnpm
            rust-bin
            fontMin
          ])
@@ -59,7 +65,7 @@
            openssl_3
            glib
            gtk3
-            libsoup
+            libsoup_2_4
            webkitgtk
            librsvg
            # serial plugin
@@ -70,7 +76,7 @@
        devShell = pkgs.mkShell {
          buildInputs = packages;
          shellHook = ''
-            export LD_LIBRARY_PATH=${pkgs.lib.makeLibraryPath libraries}:$LD_LIBRARY_PATH
+            #export LD_LIBRARY_PATH=${pkgs.lib.makeLibraryPath libraries}:$LD_LIBRARY_PATH
          '';
        };
      }
--- a/icons.config.js
+++ b/icons.config.js
@@ -4,6 +4,8 @@ const config = {
    "node_modules/@fontsource-variable/material-symbols-rounded/files/material-symbols-rounded-latin-full-normal.woff2",
  outputPath: "src/lib/assets/icons.min.woff2",
  icons: [
+    "rocket_launch",
+    "deployed_code_update",
    "adjust",
    "add",
    "piano",
@@ -18,6 +20,8 @@ const config = {
    "update",
    "offline_pin",
    "warning",
+    "dangerous",
+    "check",
    "cable",
    "person",
    "sync",
@@ -39,7 +43,23 @@ const config = {
    "arrow_back",
    "arrow_back_ios_new",
    "save",
+    "step_over",
+    "step_into",
+    "step_out",
    "settings_backup_restore",
+    "sound_detection_loud_sound",
+    "ring_volume",
+    "wifi",
+    "power_settings_circle",
+    "graphic_eq",
+    "mail",
+    "calculate",
+    "open_in_browser",
+    "chevron_backward",
+    "chevron_forward",
+    "bookmark",
+    "drag_pan",
+    "markdown_copy",
    "sort",
    "shopping_bag",
    "filter_list",
@@ -63,14 +83,24 @@ const config = {
    "delete",
    "remove_selection",
    "bolt",
+    "thunderstorm",
+    "join_inner",
+    "uppercase",
    "undo",
    "redo",
+    "replay",
+    "reply",
    "navigate_before",
    "navigate_next",
+    "library_add",
+    "reset_wrench",
+    "reset_settings",
+    "delete_sweep",
    "print",
    "restore_from_trash",
    "history",
    "history_toggle_off",
+    "text_to_speech",
    "sentiment_satisfied",
    "sentiment_dissatisfied",
    "sentiment_very_satisfied",
@@ -84,6 +114,7 @@ const config = {
    "sentiment_sad",
    "sentiment_content",
    "sentiment_worried",
+    "construction",
    "timer",
    "target",
    "download",
@@ -91,9 +122,23 @@ const config = {
    "upload_2",
    "stat_minus_2",
    "stat_2",
+    "send",
+    "more_horiz",
+    "add_reaction",
+    "stop",
    "description",
    "add_circle",
    "refresh",
+    "tune",
+    "edit_document",
+    "chat",
+    "account_circle",
+    "experiment",
+    "code",
+    "dictionary",
+    "developer_board",
+    "developer_board_off",
+    "memory",
  ],
  codePoints: {
    speed: "e9e4",
@@ -113,6 +158,8 @@ const config = {
    stat_minus_2: "e69c",
    stat_2: "e699",
    routine: "e20c",
+    experiment: "e686",
+    dictionary: "f539",
  },
 };

--- a/package.json
+++ b/package.json
@@ -1,11 +1,11 @@
 {
  "name": "charachorder-device-manager",
-  "version": "1.5.2",
+  "version": "2.5.0",
  "license": "AGPL-3.0-or-later",
  "private": true,
  "engines": {
-    "node": ">=18.16",
-    "pnpm": ">=8.6"
+    "node": ">=22.14",
+    "pnpm": ">=10.7"
  },
  "repository": {
    "type": "git",
@@ -34,55 +34,66 @@
    "typesafe-i18n": "typesafe-i18n"
  },
  "devDependencies": {
-    "@codemirror/autocomplete": "^6.17.0",
-    "@codemirror/commands": "^6.6.0",
-    "@codemirror/lang-javascript": "^6.2.2",
-    "@codemirror/language": "^6.10.2",
-    "@codemirror/state": "^6.4.1",
-    "@codemirror/view": "^6.28.4",
-    "@fontsource-variable/material-symbols-rounded": "^5.0.34",
-    "@fontsource-variable/noto-sans-mono": "^5.0.20",
-    "@lezer/highlight": "^1.2.0",
+    "@codemirror/autocomplete": "^6.18.6",
+    "@codemirror/commands": "^6.8.1",
+    "@codemirror/lang-javascript": "^6.2.4",
+    "@codemirror/language": "^6.11.2",
+    "@codemirror/state": "^6.5.2",
+    "@codemirror/view": "^6.38.1",
+    "@fontsource-variable/material-symbols-rounded": "^5.2.17",
+    "@fontsource-variable/noto-sans-mono": "^5.2.7",
+    "@lezer/highlight": "^1.2.1",
    "@material/material-color-utilities": "^0.3.0",
-    "@modyfi/vite-plugin-yaml": "^1.1.0",
-    "@sveltejs/adapter-static": "^3.0.2",
-    "@sveltejs/kit": "^2.5.18",
-    "@sveltejs/vite-plugin-svelte": "^3.1.1",
+    "@melt-ui/pp": "^0.3.2",
+    "@melt-ui/svelte": "^0.86.6",
+    "@modyfi/vite-plugin-yaml": "^1.1.1",
+    "@sveltejs/adapter-static": "^3.0.8",
+    "@sveltejs/kit": "^2.26.1",
+    "@sveltejs/vite-plugin-svelte": "^6.1.0",
    "@tauri-apps/api": "^1.6.0",
    "@tauri-apps/cli": "^1.6.0",
-    "@types/dom-view-transitions": "^1.0.4",
-    "@types/flexsearch": "^0.7.6",
-    "@types/w3c-web-serial": "^1.0.6",
+    "@types/dom-view-transitions": "^1.0.6",
+    "@types/semver": "^7.7.0",
+    "@types/w3c-web-serial": "^1.0.8",
    "@types/w3c-web-usb": "^1.0.10",
-    "@vite-pwa/sveltekit": "^0.6.0",
-    "autoprefixer": "^10.4.19",
-    "codemirror": "^6.0.1",
-    "cypress": "^13.13.0",
-    "flexsearch": "^0.7.43",
-    "fontkit": "^2.0.2",
-    "glob": "^10.4.3",
-    "jsdom": "^24.1.0",
+    "@types/wicg-file-system-access": "^2023.10.6",
+    "@vite-pwa/sveltekit": "^1.0.0",
+    "autoprefixer": "^10.4.21",
+    "codemirror": "^6.0.2",
+    "cypress": "^14.5.3",
+    "d3": "^7.9.0",
+    "esptool-js": "^0.5.6",
+    "flexsearch": "^0.8.205",
+    "fontkit": "^2.0.4",
+    "glob": "^11.0.3",
+    "jsdom": "^26.1.0",
+    "matrix-js-sdk": "^37.12.0",
    "npm-run-all": "^4.1.5",
-    "prettier": "^3.3.2",
-    "prettier-plugin-svelte": "^3.2.5",
-    "sass": "^1.77.6",
-    "stylelint": "^16.6.1",
-    "stylelint-config-clean-order": "^6.1.0",
+    "prettier": "^3.6.2",
+    "prettier-plugin-css-order": "^2.1.2",
+    "prettier-plugin-svelte": "^3.4.0",
+    "rxjs": "^7.8.2",
+    "sass": "^1.89.2",
+    "semver": "^7.7.2",
+    "socket.io-client": "^4.8.1",
+    "stylelint": "^16.23.0",
+    "stylelint-config-clean-order": "^7.0.0",
    "stylelint-config-html": "^1.1.0",
    "stylelint-config-prettier-scss": "^1.0.0",
-    "stylelint-config-recommended-scss": "^14.0.0",
-    "stylelint-config-standard-scss": "^13.1.0",
-    "svelte": "^4.2.18",
-    "svelte-check": "^3.8.4",
-    "svelte-preprocess": "^6.0.1",
+    "stylelint-config-recommended-scss": "^15.0.1",
+    "stylelint-config-standard-scss": "^15.0.1",
+    "svelte": "5.37.1",
+    "svelte-check": "^4.3.0",
+    "svelte-preprocess": "^6.0.3",
    "tippy.js": "^6.3.7",
    "typesafe-i18n": "^5.26.2",
-    "typescript": "^5.5.3",
-    "vite": "^5.3.3",
-    "vite-plugin-mkcert": "^1.17.5",
-    "vite-plugin-pwa": "^0.20.0",
-    "vitest": "^1.6.0",
-    "workbox-window": "^7.1.0"
+    "typescript": "^5.8.3",
+    "vite": "^7.0.6",
+    "vite-plugin-mkcert": "^1.17.8",
+    "vite-plugin-pwa": "^1.0.2",
+    "vitest": "^3.2.4",
+    "web-serial-polyfill": "^1.0.15",
+    "workbox-window": "^7.3.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.2"
+version = "2.5.0"
 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.2" },
+  "package": { "productName": "amacc1ng", "version": "2.5.0" },
  "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/i18n/de/index.ts
+++ b/src/i18n/de/index.ts
@@ -17,11 +17,11 @@ const de = {
    RELOAD: "Neu laden",
  },
  backup: {
-    TITLE: "Lokale Kopie",
-    INDIVIDUAL: "Einzeldateien",
+    TITLE: "Backup",
+    AUTO_BACKUP: "Beschleunigtes Verbinden",
    DISCLAIMER:
-      "Das Backup in diesem Browser gespeichert und bleibt nur auf diesem Computer.",
-    DOWNLOAD: "Alles herunterladen",
+      "<b>Nicht auf öffentlichen oder geteilten Computern einschalten.</b> Gerätedaten werden für schnelleren Zugriff lokal zwischengespeichert.",
+    DOWNLOAD: "Komplettes Profil",
    RESTORE: "Wiederherstellen",
  },
  modal: {
@@ -109,7 +109,7 @@ const de = {
  },
  configure: {
    chords: {
-      TITLE: "Akkorde",
+      TITLE: "Bibliothek",
      HOLD_KEYS: "Akkord halten",
      NEW_CHORD: "Neuer Akkord",
      DUPLICATE: "Akkord existiert bereits",
@@ -131,7 +131,7 @@ const de = {
      TITLE: "Layout",
    },
    settings: {
-      TITLE: "Einstellungen",
+      TITLE: "Gerät",
    },
  },
  plugin: {
--- a/src/i18n/en/index.ts
+++ b/src/i18n/en/index.ts
@@ -13,11 +13,11 @@ const en = {
    TITLE: "Update your device",
  },
  backup: {
-    TITLE: "Local backup",
-    INDIVIDUAL: "Individual backups",
+    TITLE: "Backup",
+    AUTO_BACKUP: "Fast Connect",
    DISCLAIMER:
-      "A backup is made and stored in this browser, and always remains only on your computer.",
-    DOWNLOAD: "Download Everything",
+      "<b>Turn off if using a shared or public computer.</b> Caches your device's data locally for quick access next time you connect.",
+    DOWNLOAD: "Full profile",
    RESTORE: "Restore",
  },
  sync: {
@@ -108,7 +108,7 @@ const en = {
  },
  configure: {
    chords: {
-      TITLE: "Chords",
+      TITLE: "Library",
      HOLD_KEYS: "Hold chord",
      NEW_CHORD: "New chord",
      DUPLICATE: "Chord already exists",
@@ -130,7 +130,7 @@ const en = {
      TITLE: "Layout",
    },
    settings: {
-      TITLE: "Settings",
+      TITLE: "Device",
    },
  },
  plugin: {
--- a/src/lib/PageTransition.svelte
+++ b/src/lib/PageTransition.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+  import { fly } from "svelte/transition";
+  import { afterNavigate, beforeNavigate } from "$app/navigation";
+  import { expoIn, expoOut } from "svelte/easing";
+  import type { Snippet } from "svelte";
+
+  let { children, routeOrder }: { children: Snippet; routeOrder: string[] } =
+    $props();
+
+  let inDirection = $state(0);
+  let outDirection = $state(0);
+  let outroEnd: undefined | (() => void) = $state(undefined);
+  let animationDone: Promise<void>;
+
+  let isNavigating = $state(false);
+
+  function routeIndex(route: string | undefined): number {
+    return routeOrder.findIndex((it) => route?.startsWith(it));
+  }
+
+  beforeNavigate((navigation) => {
+    const from = routeIndex(navigation.from?.url.pathname);
+    const to = routeIndex(navigation.to?.url.pathname);
+    if (from === -1 || to === -1 || from === to) return;
+    isNavigating = true;
+
+    inDirection = from > to ? -1 : 1;
+    outDirection = from > to ? 1 : -1;
+
+    animationDone = new Promise((resolve) => {
+      outroEnd = resolve;
+    });
+  });
+
+  afterNavigate(async () => {
+    await animationDone;
+    isNavigating = false;
+  });
+</script>
+
+{#if !isNavigating}
+  <main
+    in:fly={{ y: inDirection * 24, duration: 150, easing: expoOut }}
+    out:fly={{ y: outDirection * 24, duration: 150, easing: expoIn }}
+    onoutroend={outroEnd}
+  >
+    {@render children()}
+  </main>
+{/if}
+
+<style lang="scss">
+  main {
+    padding: 0;
+  }
+</style>
--- a/src/lib/assets/CC1_Default_Chord_Library.csv
+++ b/src/lib/assets/CC1_Default_Chord_Library.csv
@@ -1,497 +0,0 @@
-s + Dup,say
-y + b,by
-y + Dup,why
-n + Dup,no
-n + f,find
-l + f,life
-l + p,people
-l + s + p,spell
-l + n,line
-l + n + p,plant
-t + h,that
-t + n + h,than
-t + n + p,plant
-t + l + f,left
-a + f,after
-a + d,add
-a + d + f,had
-a + h,has
-a + s,as
-a + s + h,has
-a + y + d,day
-a + y + s,say
-a + n,an
-a + n + d,and
-a + n + d + f,hand
-a + n + h,hand
-a + n + y,any
-a + l,all
-a + l + d,land
-a + l + p,plant
-a + l + s,last
-a + l + y + p,play
-a + l + n + d,land
-a + t,at
-a + t + h,that
-a + t + n + h,than
-a + t + l + s,last
-a + t + l + n + p,plant
- + ?,question
-w + h,who
-w + s,saw
-w + y + h,why
-w + t,without
-w + t + h,watch
-w + t + n,went
-w + a,was
-w + a + h,what
-w + a + s,saw
-w + a + y,way
-w + a + y + Dup,away
-w + a + n,want
-w + a + l + f,walk
-w + a + l + y,always
-w + a + l + y + s,always
-w + a + t,watch
-w + a + t + h,watch
-w + a + t + n,want
-g + b,begin
-g + Dup,question
-g + h,here
-g + p,page
-g + l + n,long
-g + t,get
-k + q,quick
-k + f,and
-k + l + y + q,quickly
-k + t + l,talk
-k + a + b,back
-k + a + s,ask
-k + a + t + l,talk
-k + w + a + l,walk
-m + f,form
-m + y,my
-m + t + Dup,mountain
-m + a + f,family
-m + a + s,small
-m + a + y,may
-m + a + n,man
-m + a + n + y,many
-m + a + l,almost
-m + a + l + s,small
-m + a + l + s + Dup,small
-c + b,because
-c + Dup,sea
-c + h,head
-c + a + n,can
-c + a + n + h,change
-c + a + l,call
-c + a + l + p,place
-c + k + a + b,back
-u + p,us
-u + y,you
-u + j,just
-u + j + s,just
-u + t + b,but
-u + t + p,put
-u + t + s + d,study
-u + t + n,until
-u + t + j + s,just
-u + a + l,last
-u + k + q,quick
-u + k + l + y + q,quickly
-u + m + h,much
-u + m + n,number
-u + m + t + s,must
-u + m + c + h,much
-u + c + s + h,such
-u + c + t,cut
-u + c + t + n,country
-' + a + s,say
-' + a + n,any
-' + m + a + n,many
-o + Dup,off
-o + f,of
-o + f + f,food
-o + d,do
-o + s,so
-o + y + b,boy
-o + n,on
-o + n + s + Dup,soon
-o + l,line
-o + l + Dup,oil
-o + l + d,old
-o + l + y,only
-o + l + n + y,only
-o + t,to
-o + t + b,both
-o + t + Dup,too
-o + t + s,stop
-o + t + s + p,stop
-o + t + n,not
-o + t + n + f,often
-o + t + n + d,don't
-o + t + n + p,point
-o + a + n + h,another
-o + a + l,also
-o + a + l + s,also
-o + w,own
-o + w + h,how
-o + w + s + h,show
-o + w + n,now
-o + w + n + d,down
-o + w + l + f,follow
-o + w + t,two
-o + g,go
-o + g + Dup,good
-o + g + n + s,song
-o + g + l + n,long
-o + g + t,got
-o + g + a + l,along
-o + g + a + l + n,along
-o + k + b,book
-o + k + n,know
-o + k + l,look
-o + k + t,took
-o + k + t + Dup,took
-o + k + w + n,know
-o + v + a + b,above
-o + v + k,move
-o + m + s,some
-o + m + t + s,most
-o + m + a + l,almost
-o + m + a + l + s,almost
-o + m + a + t + l + s,almost
-o + c + f,food
-o + c + l + s + h,school
-o + u,our
-o + u + f,four
-o + u + s + h,should
-o + u + y,you
-o + u + n + f,found
-o + u + n + f + f,found
-o + u + n + s,sound
-o + u + n + s + d,sound
-o + u + l + s + d + f,should
-o + u + l + s + h,should
-o + u + t,out
-o + u + a + b,about
-o + u + a + t + b,about
-o + u + w + l + d,would
-o + u + g + n + y,young
-o + u + g + t + h,thought
-o + u + m + t + n,mountain
-o + u + m + t + n + Dup,mountain
-o + u + c + l + d,could
-o + ' + t + n + d,don't
-o + o + l,oil
-o + o + t + n,into
-o + o + t + n + p,point
-o + o + u + w + t + h,without
-o + o + u + m + a + t + n,mountain
-i + f,if
-i + f + f,different
-i + d,did
-i + RH_Thumb_1_Center,different
-i + s,is
-i + s + d,side
-i + s + h,his
-i + n,in
-i + n + f + f,find
-i + l,list
-i + l + n,line
-i + t,it
-i + t + s + Dup,still
-i + t + s + h,this
-i + t + n,into
-i + t + l + s,list
-i + t + l + s + Dup,still
-i + a + s,said
-i + a + s + d,said
-i + a + n,animal
-i + w + h,which
-i + w + h + Dup,which
-i + w + l,will
-i + w + l + Dup,will
-i + w + l + h,while
-i + w + t + h,with
-i + g,give
-i + g + b,big
-i + g + h,high
-i + g + n + h,night
-i + g + l + h,light
-i + g + t + n + h,thing
-i + g + t + l + h,light
-i + g + a + n,again
-i + g + a + n + Dup,again
-i + k + n + d,kind
-i + k + l,like
-i + k + t + n + h,think
-i + v + l,live
-i + m + h,him
-i + m + p,important
-i + m + s,miss
-i + m + s + Dup,miss
-i + m + l,mile
-i + m + t,time
-i + m + t + h,might
-i + m + a + n,animal
-i + m + a + n + Dup,animal
-i + m + a + l + n,another
-i + m + g + t + h,might
-i + c + p,picture
-i + c + t + y,city
-i + u + t + l + n,until
-i + u + w + t + h,without
-i + u + k + q,quick
-i + u + k + l + y + q,quickly
-i + u + c + k + q,quick
-i + u + c + k + l + y + q,quickly
-i + ' + t,it's
-i + ' + t + s,it's
-e + b,be
-e + Dup,earth
-e + x,example
-e + f + b,before
-e + h,he
-e + h + Dup,here
-e + s,state
-e + s + Dup,see
-e + s + h,she
-e + y + Dup,eye
-e + n,name
-e + n + b,been
-e + n + Dup,need
-e + n + d,end
-e + l + h,help
-e + l + h + f,help
-e + l + s + p,spell
-e + t,the
-e + t + Dup,eat
-e + t + f,feet
-e + t + h,there
-e + t + s,set
-e + t + s + h,these
-e + t + y + h,they
-e + t + n + x,next
-e + t + n + h,then
-e + t + l,let
-e + t + l + Dup,tell
-e + t + l + f,left
-e + a,at
-e + a + f,father
-e + a + d + f,head
-e + a + h,hear
-e + a + p,paper
-e + a + s,sea
-e + a + y,year
-e + a + n,name
-e + a + t,eat
-e + a + t + s + Dup,state
-e + w,we
-e + w + f,few
-e + w + n,new
-e + w + n + h,when
-e + w + l,well
-e + w + l + Dup,well
-e + w + t + b,between
-e + w + t + n,went
-e + w + t + n + b,between
-e + g + h,here
-e + g + t,get
-e + g + a + p,page
-e + g + a + n + b,began
-e + k,keep
-e + k + p,keep
-e + k + t,take
-e + k + a + t,take
-e + v + y,every
-e + v + n,even
-e + v + a + h,have
-e + v + a + l,leave
-e + v + a + l + Dup,leave
-e + m,me
-e + m + s,seem
-e + m + s + Dup,seem
-e + m + n,men
-e + m + t + h,them
-e + m + a,make
-e + m + a + d,made
-e + m + a + s,same
-e + m + a + n,mean
-e + m + a + l + p + x,example
-e + m + c + a,came
-e + c + s,second
-e + c + t + n + s,sentence
-e + c + a,came
-e + c + a + f,face
-e + c + a + h,each
-e + c + a + l + p,place
-e + LH_Thumb_1_Center + a,make
-e + u + s,use
-e + u + s + q,question
-e + u + n + d,under
-e + u + t + q,quite
-e + u + c + a + s + b,because
-e + o + p,open
-e + o + s + d,does
-e + o + n,one
-e + o + n + p,open
-e + o + l + b,below
-e + o + l + h,hello
-e + o + l + h + Dup,hello
-e + o + l + p,people
-e + o + t + f,often
-e + o + t + h,other
-e + o + t + s + h,those
-e + o + t + n + f,often
-e + o + w + l + b,below
-e + o + g + t + h,together
-e + o + v,over
-e + o + v + a + b,above
-e + o + v + k,move
-e + o + m,move
-e + o + m + h,home
-e + o + m + s,some
-e + o + m + t + s,sometime
-e + o + m + t + s + h,something
-e + o + m + g + t + n + s + h,something
-e + o + m + c,come
-e + o + c,come
-e + o + c + n,once
-e + o + c + n + s + d,second
-e + o + c + l + s,close
-e + o + u + s + h,house
-e + o + u + n,enough
-e + o + u + g + n + h,enough
-e + i + s + d,side
-e + i + l + f,life
-e + i + l + n,line
-e + i + t + q,quite
-e + i + t + l,little
-e + i + t + l + Dup,little
-e + i + a + d,idea
-e + i + w + l + h,while
-e + i + w + t + h,white
-e + i + g,give
-e + i + g + p,give
-e + i + g + n + b,begin
-e + i + k + l,like
-e + i + v + l,live
-e + i + m + l,mile
-e + i + m + t,time
-e + i + u + t + q,quite
-e + i + u + u + t + n + s + q,question
-r + e + h,her
-r + e + t + Dup,tree
-r + e + t + h,there
-r + e + t + h + Dup,three
-r + e + t + l,letter
-r + e + a,are
-r + e + a + d,read
-r + e + a + h,hear
-r + e + a + p,paper
-r + e + a + n,near
-r + e + a + l + y,really
-r + e + a + l + y + Dup,really
-r + e + a + t + f,after
-r + e + a + t + h,earth
-r + e + a + t + RH_Thumb_1_Center,father
-r + e + a + t + l,learn
-r + e + w,were
-r + e + w + Dup,were
-r + e + w + h,where
-r + e + w + a + n + s,answer
-r + e + w + a + t,water
-r + e + g + h,here
-r + e + g + a + l,large
-r + e + g + a + t,great
-r + e + v + y,very
-r + e + v + y + Dup,every
-r + e + v + n,never
-r + e + u + n + d,under
-r + e + u + m + n + b,number
-r + e + o + f + b,before
-r + e + o + t + h,other
-r + e + o + g + t + h,together
-r + e + o + v,over
-r + e + o + m,more
-r + e + o + m + t + h,mother
-r + e + i + t + h,their
-r + e + i + t + n + f + f,different
-r + e + i + v,river
-r + e + i + c + l + d + f,children
-r + e + i + u + c + t + p,picture
-r + f,for
-r + h,her
-r + y,your
-r + n,near
-r + l,learn
-r + t + Dup,tree
-r + t + f,father
-r + t + s + Dup,start
-r + t + y,try
-r + t + l,letter
-r + t + l + Dup,letter
-r + a,are
-r + a + f,far
-r + a + d,read
-r + a + d + f,hard
-r + a + h,hard
-r + a + p,part
-r + a + l + y,really
-r + a + l + y + Dup,really
-r + a + t + p,part
-r + a + t + s + Dup,start
-r + w,were
-r + w + h,where
-r + w + t,water
-r + w + a + n + s,answer
-r + g + t,great
-r + g + a + l,large
-r + v + y,very
-r + v + n,never
-r + v + l,later
-r + m + f,form
-r + c + a,car
-r + c + a + y,carry
-r + c + a + y + Dup,carry
-r + u + n,run
-r + u + t + h,through
-r + u + t + n,turn
-r + ' + t + s,story
-r + o,or
-r + o + f,for
-r + o + t + y + s,story
-r + o + a + n + h,another
-r + o + w,work
-r + o + w + d,word
-r + o + w + l + d,world
-r + o + g,grow
-r + o + LeftDoubleClick,grow
-r + o + k + w,work
-r + o + m,more
-r + o + m + f,from
-r + o + m + t + h,mother
-r + o + u,our
-r + o + u + f,four
-r + o + u + y,your
-r + o + u + a,around
-r + o + u + a + n,around
-r + o + u + a + n + d,around
-r + o + u + g,group
-r + o + u + g + p,group
-r + o + u + g + t + h,through
-r + o + u + c + t + n,country
-r + o + u + c + t + n + y,country
-r + i + t + h,their
-r + i + t + s + f,first
-r + i + a,air
-r + i + w + t,write
-r + i + g + h,right
-r + i + g + l,girl
-r + i + g + t + h,right
-r + i + v,river
-r + i + v + Dup,river
-r + i + m + t + n + p,important
-r + i + c + l + h,children
--- 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
@@ -104,6 +104,23 @@ actions:
    <<: *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/keymap.d.ts
+++ b/src/lib/assets/keymaps/keymap.d.ts
@@ -16,4 +16,7 @@ export interface ActionInfo {
  variant: "left" | "right";
  variantOf: number;
  keyCode: string;
+  printable?: boolean;
+  separator?: boolean;
+  breaking?: boolean;
 }
--- 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: { e: 26, n: 27, w: 28, s: 29 }
+      - switch: { e: 21, n: 22, w: 23, s: 24 }
+      - offset: [4, 0]
+        switch: { w: 66, n: 67, e: 68, s: 69 }
+      - switch: { w: 71, n: 72, e: 73, s: 74 }
+  - offset: [2, 0]
+    row:
+      - switch: { e: 41, n: 42, w: 43, s: 44 }
+      - switch: { e: 36, n: 37, w: 38, s: 39 }
+      - offset: [4, 0]
+        switch: { w: 81, n: 82, e: 83, s: 84 }
+      - switch: { w: 86, n: 87, e: 88, s: 89 }
+  # Pinkie / Index
+  - offset: [0, -3]
+    row:
+      - switch: { e: 31, n: 32, w: 33, s: 34 }
+      - offset: [4, 0]
+        switch: { e: 16, n: 17, w: 18, s: 19 }
+      - switch: { w: 61, n: 62, e: 63, s: 64 }
+      - offset: [4, 0]
+        switch: { w: 76, n: 77, e: 78, s: 79 }
+  # Thumbs
+  - row:
+      - offset: [5.5, 0.5]
+        switch: { e: 11, n: 12, w: 13, s: 14 }
+      - offset: [1, 0.5]
+        switch: { w: 56, n: 57, e: 58, s: 59 }
+  - row:
+      - offset: [4.5, -0.25]
+        switch: { e: 6, n: 7, w: 8, s: 9 }
+      - offset: [3, -0.25]
+        switch: { w: 51, n: 52, e: 53, s: 54 }
--- a/src/lib/assets/layouts/m4gr.yml
+++ b/src/lib/assets/layouts/m4gr.yml
@@ -0,0 +1,37 @@
+name: M4G
+col:
+  # Ring / Middle
+  - offset: [2, 0]
+    row:
+      - switch: { e: 26, n: 27, w: 28, s: 29 }
+      - switch: { e: 21, n: 22, w: 23, s: 24 }
+      - offset: [4, 0]
+        switch: { w: 66, n: 67, e: 68, s: 69 }
+      - switch: { w: 71, n: 72, e: 73, s: 74 }
+  - offset: [2, 0]
+    row:
+      - switch: { e: 41, n: 42, w: 43, s: 44 }
+      - switch: { e: 36, n: 37, w: 38, s: 39 }
+      - offset: [4, 0]
+        switch: { w: 81, n: 82, e: 83, s: 84 }
+      - switch: { w: 86, n: 87, e: 88, s: 89 }
+  # Pinkie / Index
+  - offset: [0, -3]
+    row:
+      - switch: { e: 31, n: 32, w: 33, s: 34 }
+      - offset: [4, 0]
+        switch: { e: 16, n: 17, w: 18, s: 19 }
+      - switch: { w: 61, n: 62, e: 63, s: 64 }
+      - offset: [4, 0]
+        switch: { w: 76, n: 77, e: 78, s: 79 }
+  # Thumbs
+  - row:
+      - offset: [5.5, 0.5]
+        switch: { e: 11, n: 12, w: 13, s: 14 }
+      - offset: [1, 0.5]
+        switch: { w: 56, n: 57, e: 58, s: 59 }
+  - row:
+      - offset: [4.5, -0.25]
+        switch: { e: 6, n: 7, w: 8, s: 9 }
+      - offset: [3, -0.25]
+        switch: { w: 51, n: 52, e: 53, s: 54 }
--- a/src/lib/assets/layouts/t4g.yml
+++ b/src/lib/assets/layouts/t4g.yml
@@ -0,0 +1,10 @@
+name: T4G
+col:
+  - row:
+      - switch: { e: 3, n: 5, w: 4, s: 6 }
+  - offset: [0.5, 0]
+    row:
+      - key: 2
+  - row:
+      - key: 0
+      - key: 1
--- a/src/lib/assets/random-tips/en.json
+++ b/src/lib/assets/random-tips/en.json
@@ -13,7 +13,7 @@
  "GTM stands for Generative Text Menu and can be used to change your device's settings anywhere",
  "Ambidextrous Throwover (aka Mirror Mode) is a mode designed for one-handed use",
  "Chentry stands for character entry, or typing letter by letter on a chording enabled device",
-  "Chord modifiers are hard-coded (as of now) and can be used in the English language to add conjucations and more",
+  "Chord modifiers are hard-coded (as of now) and can be used in the English language to add conjugations and more",
  "You can use 'cursor warping' by adding arrow key actions to a chord, for example to chord '()' with the cursor in the middle of the brackets",
  "An arpeggiate is a single key press that modifies the preceding chord. Modifiers can be arpeggiated",
  "Some actions are marked as a 'macro', which means the output is generated by a key sequence rather than a pure key press. Be cautious with those, as they can affect other keys when held together!",
--- a/src/lib/assets/settings.yml
+++ b/src/lib/assets/settings.yml
@@ -1,118 +1,154 @@
-settings:
-  0x1:
-    title: Enable Serial Header
-    description: boolean 0 or 1, default is 0
-  0x2:
-    title: Enable Serial Logging
-    description: boolean 0 or 1, default is 0
-  0x3:
-    title: Enable Serial Debugging
-    description: boolean 0 or 1, default is 0
-  0x4:
-    title: Enable Serial Raw
-    description: boolean 0 or 1, default is 0
-  0x5:
-    title: Enable Serial Chord
-    description: boolean 0 or 1, default is 0
-  0x6:
-    title: Enable Serial Keyboard
-    description: boolean 0 or 1, default is 0
-  0x7:
-    title: Enable Serial Mouse
-    description: boolean 0 or 1, default is 0
-  0x11:
-    title: Enable USB HID Keyboard
-    description: boolean 0 or 1, default is 1
-  0x12:
-    title: Enable Character Entry
-    description: boolean 0 or 1
-  0x13:
-    title: GUI-CTRL Swap Mode
-    description: boolean 0 or 1; 1 swaps keymap 0 and 1. (CCL only)
-  0x14:
-    title: Key Scan Duration
-    description: scan rate described in milliseconds; default is 2ms = 500Hz
-  0x15:
-    title: Key Debounce Press Duration
-    description: debounce time in milliseconds; default is 7ms on the One and 20ms on the Lite
-  0x16:
-    title: Key Debounce Release Duration
-    description: debounce time in milliseconds; default is 7ms on the One and 20ms on the Lite
-  0x17:
-    title: Keyboard Output Character Microsecond Delays
-    description: delay time in microseconds (one delay for press and again for release); default is 480us; max is 10240us; increments of 40us
-  0x21:
-    title: Enable USB HID Mouse
-    description: boolean 0 or 1; default is 1
-  0x22:
-    title: Slow Mouse Speed
-    description: pixels to move at the mouse poll rate; default for CC1 is 5 = 250px/s
-  0x23:
-    title: Fast Mouse Speed
-    description: pixels to move at the mouse poll rate; default for CC1 is 25 = 1250px/s
-  0x24:
-    title: Enable Active Mouse
-    description: boolean 0 or 1; moves mouse back and forth every 60s
-  0x25:
-    title: Mouse Scroll Speed
-    description: default is 1; polls at 1/4th the rate of the mouse move updates
-  0x26:
-    title: Mouse Poll Duration
-    description: poll rate described in milliseconds; default is 20ms = 50Hz
-  0x31:
-    title: Enable Chording
-    description: boolean 0 or 1
-  0x32:
-    title: Enable Chording Character Counter Timeout
-    description: boolean 0 or 1; default is 1
-  0x33:
-    title: Chording Character Counter Timeout Timer
-    description: 0-255 deciseconds; default is 40 or 4.0 seconds
-  0x34:
-    title: Chord Detection Press Tolerance(ms)
-    description: 1-50 milliseconds
-  0x35:
-    title: Chord Detection Release Tolerance(ms)
-    description: 1-50 milliseconds
-  0x41:
-    title: Enable Spurring
-    description: boolean 0 or 1; default is 1
-  0x42:
-    title: Enable Spurring Character Counter Timeout
-    description: boolean 0 or 1; default is 1
-  0x43:
-    title: Spurring Character Counter Timeout Timer
-    description: 0-255 seconds; default is 240
-  0x51:
-    title: Enable Arpeggiates
-    description: boolean 0 or 1; default is 1
-  0x54:
-    title: Arpeggiate Tolerance
-    description: in milliseconds; default 800ms
-  0x61:
-    title: Enable Compound Chording (coming soon)
-    description: boolean 0 or 1; default is 0
-  0x64:
-    title: Compound Tolerance
-    description: in milliseconds; default 1500ms
-  0x81:
-    title: LED Brightness
-    description: 0-50 (CCL only); default is 5, which draws around 100 mA of current
-  0x82:
-    title: LED Color Code
-    description: Color Codes to be listed (CCL only)
-  0x83:
-    title: Enable LED Key Highlight (coming soon)
-    description: boolean 0 or 1 (CCL only)
-  0x84:
-    title: Enable LEDs
-    description: boolean 0 or 1; default is 1 (CCL only)
-  0x91:
-    title: Operating System
-    description: Operating system codes listed below
-  0x92:
-    title: Enable Realtime Feedback
-    description: boolean 0 or 1; default is 1
-  0x93:
-    title: Enable CharaChorder Ready on startup
-    description: boolean 0 or 1; default is 1
+- name: spurring
+  description: |
+    "Chording only" mode which tells your device to output chords on a press
+    rather than a press & release. It also enables you to jump from one
+    chord to another without releasing everything and can be activated in
+    GTM or by chording both mirror keys. It can provide significant speed
+    gains with chording, but also takes away the flexibility of character
+    entry.
+  items:
+    - id: 0x41
+      name: enable
+      range: [0, 1]
+    - id: 0x43
+      name: character counter timeout
+      range: [0, 240000]
+      step: 1000
+      scale: 0.001
+      unit: s
+- name: arpeggiates
+  description: |
+    Allows chord modifiers to be hit after instead of with a chord,
+    and enables select keys to be placed before auto-spaces.
+  items:
+    - id: 0x51
+      name: enable
+      range: [0, 1]
+    - id: 0x54
+      name: timeout
+      range: [0, 2550]
+      step: 10
+      unit: ms
+- name: keyboard
+  items:
+    - id: 0x11
+      name: enable
+      range: [0, 1]
+    - id: 0x12
+      name: character entry
+      range: [0, 1]
+    - id: 0x13
+      name: command option swap
+      range: [0, 1]
+      description: |
+        Swaps ⌥ and ⌘ to make transitioning between Mac and other systems easier.
+    - id: 0x14
+      name: poll rate
+      range: [0, 255]
+      unit: Hz
+      inverse: 1000
+    - id: 0x15
+      name: debounce press
+      range: [0, 255]
+      unit: ms
+    - id: 0x16
+      name: debounce release
+      range: [0, 255]
+      unit: ms
+    - id: 0x17
+      name: output delay
+      range: [0, 10200]
+      step: 40
+      unit: µs
+- name: mouse
+  items:
+    - id: 0x21
+      name: enable
+      range: [0, 1]
+    - id: 0x22
+      name: slow speed
+      range: [0, 255]
+      unit: px
+    - id: 0x23
+      name: fast speed
+      range: [0, 255]
+      unit: px
+    - id: 0x24
+      name: caffeine
+      range: [0, 1]
+      description: |
+        Keeps computer alive by moving the mouse back and forth one pixel every 60s
+    - id: 0x25
+      name: scroll speed
+      range: [0, 255]
+      unit: pg
+    - id: 0x26
+      name: poll rate
+      range: [0, 255]
+      unit: Hz
+      inverse: 1000
+- name: chording
+  items:
+    - id: 0x31
+      name: enable
+      range: [0, 1]
+    - id: 0x33
+      name: auto delete timeout
+      range: [0, 25500]
+      step: 100
+    - id: 0x34
+      name: press tolerance
+      description: |
+        Scales with the number of chord inputs.
+      range: [0, 255]
+      unit: ms
+    - id: 0x35
+      name: release tolerance
+      description: |
+        Scales with the number of chord inputs.
+      range: [0, 255]
+      unit: ms
+- name: leds
+  items:
+    - id: 0x84
+      name: enable
+      range: [0, 1]
+    - id: 0x81
+      name: brightness
+      range: [0, 50]
+    - id: 0x82
+      name: base color code
+      enum:
+        white: 0
+        red: 1
+        orange: 2
+        yellow: 3
+        charteuse: 4
+        green: 5
+        spring green: 6
+        cyan: 7
+        azure: 8
+        blue: 9
+        violet: 10
+        magenta: 11
+        rose: 12
+        rainbow: 13
+    - id: 0x83
+      name: highlight
+      range: [0, 1]
+- name: misc
+  items:
+    - id: 0x91
+      name: operating system
+      enum:
+        windows: 0
+        mac: 1
+        linux: 2
+        ios: 3
+        android: 4
+    - id: 0x92
+      name: GTM realtime feedback
+      range: [0, 1]
+    - id: 0x93
+      name: startup message
+      range: [0, 1]
--- a/src/lib/backup/backup.ts
+++ b/src/lib/backup/backup.ts
@@ -14,7 +14,7 @@ import {
  settings,
 } from "$lib/undo-redo.js";
 import { get } from "svelte/store";
-import { serialPort } from "../serial/connection";
+import { activeProfile, serialPort } from "../serial/connection";
 import { csvLayoutToJson, isCsvLayout } from "$lib/backup/compat/legacy-layout";
 import { isCsvChords, csvChordsToJson } from "./compat/legacy-chords";

@@ -50,11 +50,9 @@ export function createLayoutBackup(): CharaLayoutFile {
    charaVersion: 1,
    type: "layout",
    device: get(serialPort)?.device,
-    layout: get(layout).map((it) => it.map((it) => it.action)) as [
-      number[],
-      number[],
-      number[],
-    ],
+    layout: (get(layout)[get(activeProfile)]?.map((it) =>
+      it.map((it) => it.action),
+    ) ?? []) as [number[], number[], number[]],
  };
 }

@@ -70,7 +68,7 @@ export function createSettingsBackup(): CharaSettingsFile {
  return {
    charaVersion: 1,
    type: "settings",
-    settings: get(settings).map((it) => it.value),
+    settings: get(settings)[get(activeProfile)]?.map((it) => it.value) ?? [],
  };
 }

@@ -97,9 +95,11 @@ export function restoreFromFile(
      const recent = file.history[0];
      if (!recent) return;
      let backupDevice = recent[1].device;
-      if (backupDevice === "TWO") backupDevice = "ONE";
+      if (backupDevice === "TWO" || backupDevice === "M4G")
+        backupDevice = "ONE";
      let currentDevice = get(serialPort)?.device;
-      if (currentDevice === "TWO") currentDevice = "ONE";
+      if (currentDevice === "TWO" || backupDevice === "M4G")
+        currentDevice = "ONE";

      if (backupDevice !== currentDevice) {
        alert("Backup is incompatible with this device");
@@ -107,32 +107,32 @@ export function restoreFromFile(
      }

      changes.update((changes) => {
-        changes.push(
+        changes.push([
          ...getChangesFromChordFile(recent[0]),
          ...getChangesFromLayoutFile(recent[1]),
          ...getChangesFromSettingsFile(recent[2]),
-        );
+        ]);
        return changes;
      });
      break;
    }
    case "chords": {
      changes.update((changes) => {
-        changes.push(...getChangesFromChordFile(file));
+        changes.push(getChangesFromChordFile(file));
        return changes;
      });
      break;
    }
    case "layout": {
      changes.update((changes) => {
-        changes.push(...getChangesFromLayoutFile(file));
+        changes.push(getChangesFromLayoutFile(file));
        return changes;
      });
      break;
    }
    case "settings": {
      changes.update((changes) => {
-        changes.push(...getChangesFromSettingsFile(file));
+        changes.push(getChangesFromSettingsFile(file));
        return changes;
      });
      break;
@@ -167,12 +167,13 @@ export function getChangesFromChordFile(file: CharaChordFile) {
 export function getChangesFromSettingsFile(file: CharaSettingsFile) {
  const changes: Change[] = [];
  for (const [id, value] of file.settings.entries()) {
-    const setting = get(settings)[id];
+    const setting = get(settings)[get(activeProfile)]?.[id];
    if (setting !== undefined && setting.value !== value) {
      changes.push({
        type: ChangeType.Setting,
        id,
        setting: value,
+        profile: get(activeProfile),
      });
    }
  }
@@ -183,12 +184,13 @@ export function getChangesFromLayoutFile(file: CharaLayoutFile) {
  const changes: Change[] = [];
  for (const [layer, keys] of file.layout.entries()) {
    for (const [id, action] of keys.entries()) {
-      if (get(layout)[layer]?.[id]?.action !== action) {
+      if (get(layout)[get(activeProfile)]?.[layer]?.[id]?.action !== action) {
        changes.push({
          type: ChangeType.Layout,
          layer,
          id,
          action,
+          profile: get(activeProfile),
        });
      }
    }
--- 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/ccos/attachment.ts
+++ b/src/lib/ccos/attachment.ts
@@ -0,0 +1,26 @@
+import type { Attachment } from "svelte/attachments";
+import { browser } from "$app/environment";
+import { persistentWritable } from "$lib/storage";
+
+export const emulatedCCOS = persistentWritable("emulatedCCOS", false);
+
+export function ccosKeyInterceptor() {
+  return ((element: Window) => {
+    const ccos = browser
+      ? import("./ccos").then((module) => module.fetchCCOS(".test"))
+      : Promise.resolve(undefined);
+
+    function onEvent(event: KeyboardEvent) {
+      ccos.then((it) => it?.handleKeyEvent(event));
+    }
+
+    element.addEventListener("keydown", onEvent, true);
+    element.addEventListener("keyup", onEvent, true);
+
+    return () => {
+      ccos.then((it) => it?.destroy());
+      element.removeEventListener("keydown", onEvent, true);
+      element.removeEventListener("keyup", onEvent, true);
+    };
+  }) satisfies Attachment<Window>;
+}
--- a/src/lib/ccos/ccos-events.ts
+++ b/src/lib/ccos/ccos-events.ts
@@ -0,0 +1,37 @@
+export interface CCOSInitEvent {
+  type: "init";
+  url: string;
+}
+
+export interface CCOSKeyPressEvent {
+  type: "press";
+  code: number;
+}
+
+export interface CCOSKeyReleaseEvent {
+  type: "release";
+  code: number;
+}
+
+export interface CCOSSerialEvent {
+  type: "serial";
+  data: number;
+}
+
+export type CCOSInEvent =
+  | CCOSInitEvent
+  | CCOSKeyPressEvent
+  | CCOSKeyReleaseEvent
+  | CCOSSerialEvent;
+
+export interface CCOSReportEvent {
+  type: "report";
+  modifiers: number;
+  keys: number[];
+}
+
+export interface CCOSReadyEvent {
+  type: "ready";
+}
+
+export type CCOSOutEvent = CCOSReportEvent | CCOSReadyEvent | CCOSSerialEvent;
--- a/src/lib/ccos/ccos-interop.ts
+++ b/src/lib/ccos/ccos-interop.ts
@@ -0,0 +1,111 @@
+export const KEYCODE_TO_SCANCODE = new Map<string, number | undefined>(
+  Object.entries({
+    KeyA: 0x04,
+    KeyB: 0x05,
+    KeyC: 0x06,
+    KeyD: 0x07,
+    KeyE: 0x08,
+    KeyF: 0x09,
+    KeyG: 0x0a,
+    KeyH: 0x0b,
+    KeyI: 0x0c,
+    KeyJ: 0x0d,
+    KeyK: 0x0e,
+    KeyL: 0x0f,
+    KeyM: 0x10,
+    KeyN: 0x11,
+    KeyO: 0x12,
+    KeyP: 0x13,
+    KeyQ: 0x14,
+    KeyR: 0x15,
+    KeyS: 0x16,
+    KeyT: 0x17,
+    KeyU: 0x18,
+    KeyV: 0x19,
+    KeyW: 0x1a,
+    KeyX: 0x1b,
+    KeyY: 0x1c,
+    KeyZ: 0x1d,
+    Digit1: 0x1e,
+    Digit2: 0x1f,
+    Digit3: 0x20,
+    Digit4: 0x21,
+    Digit5: 0x22,
+    Digit6: 0x23,
+    Digit7: 0x24,
+    Digit8: 0x25,
+    Digit9: 0x26,
+    Digit0: 0x27,
+    Enter: 0x28,
+    Escape: 0x29,
+    Backspace: 0x2a,
+    Tab: 0x2b,
+    Space: 0x2c,
+    Minus: 0x2d,
+    Equal: 0x2e,
+    BracketLeft: 0x2f,
+    BracketRight: 0x30,
+    Backslash: 0x31,
+    Semicolon: 0x33,
+    Quote: 0x34,
+    Backquote: 0x35,
+    Comma: 0x36,
+    Period: 0x37,
+    Slash: 0x38,
+    CapsLock: 0x39,
+    F1: 0x3a,
+    F2: 0x3b,
+    F3: 0x3c,
+    F4: 0x3d,
+    F5: 0x3e,
+    F6: 0x3f,
+    F7: 0x40,
+    F8: 0x41,
+    F9: 0x42,
+    F10: 0x43,
+    F11: 0x44,
+    F12: 0x45,
+    PrintScreen: 0x46,
+    ScrollLock: 0x47,
+    Pause: 0x48,
+    Insert: 0x49,
+    Home: 0x4a,
+    PageUp: 0x4b,
+    Delete: 0x4c,
+    End: 0x4d,
+    PageDown: 0x4e,
+    ArrowRight: 0x4f,
+    ArrowLeft: 0x50,
+    ArrowDown: 0x51,
+    ArrowUp: 0x52,
+    NumLock: 0x53,
+    NumpadDivide: 0x54,
+    NumpadMultiply: 0x55,
+    NumpadSubtract: 0x56,
+    NumpadAdd: 0x57,
+    NumpadEnter: 0x58,
+    Numpad1: 0x59,
+    Numpad2: 0x5a,
+    Numpad3: 0x5b,
+    Numpad4: 0x5c,
+    Numpad5: 0x5d,
+    Numpad6: 0x5e,
+    Numpad7: 0x5f,
+    Numpad8: 0x60,
+    Numpad9: 0x61,
+    Numpad0: 0x62,
+    NumpadDecimal: 0x63,
+    ControlLeft: 0xe0,
+    ShiftLeft: 0xe1,
+    AltLeft: 0xe2,
+    MetaLeft: 0xe3,
+    ControlRight: 0xe4,
+    ShiftRight: 0xe5,
+    AltRight: 0xe6,
+    MetaRight: 0xe7,
+  }),
+);
+
+export const SCANCODE_TO_KEYCODE = new Map<number, string>(
+  KEYCODE_TO_SCANCODE.entries().map(([key, value]) => [value!, key]),
+);
--- a/src/lib/ccos/ccos.ts
+++ b/src/lib/ccos/ccos.ts
@@ -0,0 +1,210 @@
+import { getMeta } from "$lib/meta/meta-storage";
+import { connectable, from, multicast, Subject } from "rxjs";
+import type {
+  CCOSInitEvent,
+  CCOSKeyPressEvent,
+  CCOSKeyReleaseEvent,
+  CCOSOutEvent,
+} from "./ccos-events";
+import { KEYCODE_TO_SCANCODE, SCANCODE_TO_KEYCODE } from "./ccos-interop";
+
+const device = ".zero_wasm";
+
+class CCOSKeyboardEvent extends KeyboardEvent {
+  constructor(...params: ConstructorParameters<typeof KeyboardEvent>) {
+    super(...params);
+  }
+}
+
+const MASK_CTRL = 0b0001_0001;
+const MASK_SHIFT = 0b0010_0010;
+const MASK_ALT = 0b0100_0100;
+const MASK_ALT_GRAPH = 0b0000_0100;
+const MASK_GUI = 0b1000_1000;
+
+export class CCOS {
+  private readonly currKeys = new Set<number>();
+
+  private readonly layout = new Map<string, string>();
+
+  private readonly worker = new Worker("/ccos-worker.js", { type: "module" });
+
+  private ready = false;
+
+  private lastEvent?: KeyboardEvent;
+
+  private onKey(
+    type: ConstructorParameters<typeof KeyboardEvent>[0],
+    modifiers: number,
+    scanCode: number,
+  ) {
+    if (!this.lastEvent) {
+      return;
+    }
+
+    const code = SCANCODE_TO_KEYCODE.get(scanCode);
+    if (code === undefined) {
+      return;
+    }
+
+    const layoutKey = [code];
+    if (modifiers & MASK_SHIFT) {
+      layoutKey.push("Shift");
+    }
+    if (modifiers & MASK_ALT_GRAPH) {
+      layoutKey.push("AltGraph");
+    }
+    const key = this.layout.get(JSON.stringify(layoutKey)) ?? code;
+
+    const params: Required<KeyboardEventInit> = {
+      bubbles: true,
+      cancelable: true,
+      location: this.lastEvent.location,
+      repeat: this.lastEvent.repeat,
+      detail: this.lastEvent.detail,
+      view: this.lastEvent.view,
+      isComposing: this.lastEvent.isComposing,
+      which: this.lastEvent.which,
+      composed: this.lastEvent.composed,
+      key,
+      code,
+      charCode: key.charCodeAt(0),
+      keyCode: this.lastEvent.keyCode,
+      shiftKey: (modifiers & MASK_SHIFT) !== 0,
+      ctrlKey: (modifiers & MASK_CTRL) !== 0,
+      metaKey: (modifiers & MASK_GUI) !== 0,
+      altKey: (modifiers & MASK_ALT) !== 0,
+      modifierAltGraph: (modifiers & MASK_ALT_GRAPH) !== 0,
+      modifierCapsLock: this.lastEvent.getModifierState("CapsLock"),
+      modifierFn: this.lastEvent.getModifierState("Fn"),
+      modifierFnLock: this.lastEvent.getModifierState("FnLock"),
+      modifierHyper: this.lastEvent.getModifierState("Hyper"),
+      modifierNumLock: this.lastEvent.getModifierState("NumLock"),
+      modifierSuper: (modifiers & MASK_GUI) !== 0,
+      modifierSymbol: this.lastEvent.getModifierState("Symbol"),
+      modifierSymbolLock: this.lastEvent.getModifierState("SymbolLock"),
+      modifierScrollLock: this.lastEvent.getModifierState("ScrollLock"),
+    };
+
+    this.lastEvent.target?.dispatchEvent(new CCOSKeyboardEvent(type, params));
+  }
+
+  private onReport(modifiers: number, keys: number[]) {
+    const nextKeys = new Set<number>(keys);
+    nextKeys.delete(0);
+    for (const key of this.currKeys) {
+      if (!nextKeys.has(key)) {
+        this.onKey("keyup", modifiers, key);
+      }
+    }
+    for (const key of nextKeys) {
+      if (!this.currKeys.has(key)) {
+        this.onKey("keydown", modifiers, key);
+      }
+    }
+    this.currKeys.clear();
+    for (const key of keys) {
+      this.currKeys.add(key);
+    }
+    this.currKeys.delete(0);
+  }
+
+  private outStream = new Subject<number>();
+
+  private readonly buffer: number[] = [];
+  private readonly outStream = new WritableStream<number>({
+    start(controller) {},
+  });
+
+  readonly readable = connectable()
+  readonly writable = new WritableStream<string>();
+
+  constructor(url: string) {
+    this.worker.addEventListener(
+      "message",
+      (event: MessageEvent<CCOSOutEvent>) => {
+        switch (event.data.type) {
+          case "ready": {
+            this.ready = true;
+            break;
+          }
+          case "report": {
+            this.onReport(event.data.modifiers, event.data.keys);
+            break;
+          }
+          case "serial": {
+            this.outStream.next(event.data.data);
+            break;
+          }
+        }
+      },
+    );
+    (navigator as any).keyboard
+      ?.getLayoutMap()
+      ?.then((it: Map<string, string>) =>
+        it.entries().forEach(([key, value]) => {
+          this.layout.set(JSON.stringify([key]), value);
+        }),
+      );
+    this.worker.postMessage({
+      type: "init",
+      url,
+    } satisfies CCOSInitEvent);
+  }
+
+  async destroy() {
+    this.worker.terminate();
+  }
+
+  async handleKeyEvent(event: KeyboardEvent) {
+    if (
+      event.target instanceof HTMLInputElement ||
+      event.target instanceof HTMLTextAreaElement
+    ) {
+      console.error("CCOS does not support input elements");
+      return;
+    }
+
+    if (!this.ready || event instanceof CCOSKeyboardEvent) {
+      return;
+    }
+    event.stopImmediatePropagation();
+    event.preventDefault();
+    this.lastEvent = event;
+
+    const layoutKey = [event.code];
+    if (event.getModifierState("Shift")) {
+      layoutKey.push("Shift");
+    }
+    if (event.getModifierState("AltGraph")) {
+      layoutKey.push("AltGraph");
+    }
+    this.layout.set(JSON.stringify(layoutKey), event.key);
+
+    const scanCode = KEYCODE_TO_SCANCODE.get(event.code);
+    if (scanCode === undefined) return;
+    if (event.type === "keydown") {
+      this.worker.postMessage({
+        type: "press",
+        code: scanCode,
+      } satisfies CCOSKeyPressEvent);
+    } else {
+      this.worker.postMessage({
+        type: "release",
+        code: scanCode,
+      } satisfies CCOSKeyReleaseEvent);
+    }
+  }
+}
+
+export async function fetchCCOS(
+  version = ".test",
+  fetch: typeof window.fetch = window.fetch,
+): Promise<CCOS | undefined> {
+  const meta = await getMeta(device, version, fetch);
+  if (!meta?.update.js || !meta?.update.wasm) {
+    return undefined;
+  }
+
+  return new CCOS(`${meta.path}/${meta.update.js}`);
+}
--- 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;
+    color: inherit;
+    font-size: inherit;
+    font-family: inherit;
+    user-select: none;
+  }
+
+  svg > :global(text) {
+    font-size: inherit;
+    font-family: 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 {
+    display: grid;
+    position: relative;
+    margin: 1em;
+    margin-bottom: 0;
+    height: 3em;
+    font-size: 2em;
+  }
+
+  .rating {
+    font-style: italic;
+    font-weight: bold;
+    text-transform: uppercase;
+  }
+
+  .tile {
+    border-radius: 0.1em;
+    width: 100%;
+    height: 0.2em;
+  }
+
+  kbd {
+    font-size: 0.6em;
+  }
+
+  kbd + kbd {
+    margin-inline-start: 0.3em;
+  }
+
+  .chord {
+    display: flex;
+    position: absolute;
+    top: 0;
+    left: 50%;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    transition:
+      opacity 0.3s ease,
+      translate 0.3s ease,
+      scale 0.3s ease;
+    will-change: transform, opacity, scale;
+    margin-inline-end: 1em;
+    padding-inline: 0.1em;
+  }
+</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/TrackText.svelte
+++ b/src/lib/charrecorder/TrackText.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { getContext } from "svelte";
+  import type { ReplayPlayer } from "./core/player";
+  import { TextPlugin } from "./core/plugins/text";
+
+  const player: { player: ReplayPlayer | undefined } = getContext("replay");
+
+  let { text = $bindable("") } = $props();
+
+  $effect(() => {
+    if (!player.player) return;
+    const tracker = new TextPlugin();
+    tracker.register(player.player);
+    const unsubscribe = tracker.subscribe((value) => {
+      text = value;
+    });
+
+    return unsubscribe;
+  });
+</script>
--- a/src/lib/charrecorder/TrackWpm.svelte
+++ b/src/lib/charrecorder/TrackWpm.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { getContext } from "svelte";
+  import { WpmReplayPlugin } from "./core/plugins/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 WpmReplayPlugin();
+    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,111 @@
+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);
+          }
+        }
+      }
+
+      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/text.ts
+++ b/src/lib/charrecorder/core/plugins/text.ts
@@ -0,0 +1,23 @@
+import type { ReplayPlayer } from "../player";
+import type { ReplayPlugin, StoreContract } from "../types";
+
+export class TextPlugin implements StoreContract<string>, ReplayPlugin {
+  private subscribers = new Set<(value: string) => void>();
+
+  register(replay: ReplayPlayer) {
+    replay.subscribe(() => {
+      if (this.subscribers.size === 0) return;
+      const text = replay.stepper.text
+        .filter((it) => it.source !== "ghost")
+        .map((it) => it.text)
+        .join("");
+      for (const subscription of this.subscribers) {
+        subscription(text);
+      }
+    });
+  }
+  subscribe(subscription: (value: string) => 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,288 @@
+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.cursorNode.setAttribute("class", "cursor");
+    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 {
+    flex-shrink: 0;
+    border-radius: 50%;
+    width: 32px;
+    height: 32px;
+  }
+
+  .avatar-placeholder {
+    display: flex;
+    justify-content: center;
+    align-items: 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;
+    height: 100%;
+    overflow-y: auto;
+  }
+
+  span {
+    word-break: break-all;
+  }
+</style>
--- a/src/lib/chat/MatrixRooms.svelte
+++ b/src/lib/chat/MatrixRooms.svelte
@@ -0,0 +1,73 @@
+<script lang="ts">
+  import type { Room } from "matrix-js-sdk";
+  import { matrixClient, currentRoomId } from "./chat";
+
+  let { rooms }: { rooms: Room[] } = $props();
+</script>
+
+<div class="rooms">
+  {#each $matrixClient.getRooms() as room}
+    {@const avatar = room.getMxcAvatarUrl()}
+    <button
+      class:active={$currentRoomId === room.roomId}
+      class="room"
+      onclick={() => ($currentRoomId = room.roomId)}
+    >
+      {#if avatar}
+        <img
+          alt={room.name}
+          src={$matrixClient.mxcUrlToHttp(avatar, 16, 16)}
+          width="16"
+          height="16"
+        />
+      {:else}
+        <div>#</div>
+      {/if}
+      <div>{room.name}</div>
+    </button>
+  {/each}
+
+  {#await $matrixClient.publicRooms()}
+    <div>Loading...</div>
+  {:then rooms}
+    {#each rooms.chunk as room}
+      <button class="room" onclick={() => ($currentRoomId = room.roomId)}>
+        <div>#</div>
+        <div>{room.name}</div>
+      </button>
+    {/each}
+  {:catch error}
+    <div>{error.message}</div>
+  {/await}
+</div>
+
+<style lang="scss">
+  .rooms {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding: 8px;
+    padding-left: 0;
+    width: 100%;
+  }
+
+  .room {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 0.5rem;
+    cursor: pointer;
+    border-radius: 8px;
+    padding-inline: 16px;
+    padding-block: 2px;
+    padding-block: 4px;
+    width: 100%;
+    height: unset;
+    min-height: 0;
+
+    &.active {
+      background: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
+    }
+  }
+</style>
--- a/src/lib/style/form/_checkbox.scss
+++ b/src/lib/style/form/_checkbox.scss
--- a/src/lib/chat/MatrixTimeline.svelte
+++ b/src/lib/chat/MatrixTimeline.svelte
@@ -0,0 +1,231 @@
+<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;
+
+  .input {
+    flex-grow: 1;
+    cursor: text;
+    border: 1px solid var(--md-sys-color-outline);
+    border-radius: $border-radius;
+    padding: 0.5em;
+    font-size: 1rem;
+
+    text-wrap: wrap;
+    white-space: pre-wrap;
+    word-break: break-word;
+    overflow-wrap: break-word;
+
+    &:focus-visible {
+      outline: none;
+    }
+  }
+
+  .input-box {
+    display: flex;
+    flex-shrink: 0;
+    gap: 4px;
+    padding-block: 8px;
+    width: 100%;
+  }
+
+  .static-elements {
+    position: relative;
+    width: 100%;
+  }
+
+  .timeline {
+    display: flex;
+    flex-grow: 1;
+    flex-direction: column-reverse;
+    contain: content;
+    width: 100%;
+    height: auto;
+    overflow-x: hidden;
+    overflow-y: scroll;
+  }
+
+  section {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+</style>
--- a/src/lib/chat/chat-rx.ts
+++ b/src/lib/chat/chat-rx.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/chat.ts
+++ b/src/lib/chat/chat.ts
@@ -0,0 +1,35 @@
+import { writable, type Writable } from "svelte/store";
+import type { 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";
+
+export const matrixClient: Writable<MatrixClient> = writable();
+
+export const currentRoomId = persistentWritable<string | null>(
+  "currentRoomId",
+  null,
+);
+
+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,381 @@
+<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)}
+    >
+      {#if event.getType() === "m.room.message"}
+        {@const message = event.event.content?.["body"]}
+        <a
+          class="icon rocket"
+          href="/learn/sentence/?sentence={encodeURIComponent(message)}"
+          >rocket_launch</a
+        >
+      {/if}
+      <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;
+  }
+
+  @keyframes rocket {
+    0% {
+      transform: translate(0, 0);
+    }
+    90% {
+      transform: translate(4px, -4px);
+    }
+    100% {
+      transform: translate(0, 0);
+    }
+  }
+  .icon.rocket {
+    animation: rocket 2s;
+  }
+
+  .toolbar {
+    display: flex;
+    position: absolute;
+    top: -26px;
+    right: 0;
+    z-index: 100;
+    border-radius: 4px;
+    background: var(--md-sys-color-secondary-container);
+    padding: 4px;
+    color: var(--md-sys-color-on-secondary-container);
+
+    a,
+    button {
+      width: 24px;
+      height: 24px;
+      font-size: 16px;
+    }
+  }
+
+  .dots {
+    display: flex;
+    gap: 2px;
+  }
+
+  @keyframes bounce {
+    0%,
+    100% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(-4px);
+    }
+  }
+
+  .dot {
+    animation: bounce 1s infinite;
+    border-radius: 50%;
+    width: 6px;
+    height: 6px;
+  }
+
+  .sender,
+  .avatar {
+    margin-block: 2px 4px;
+  }
+
+  .avatar {
+    grid-area: avatar;
+    translate: 0 2px;
+    border-radius: 50%;
+    width: 32px;
+    height: 32px;
+  }
+
+  div.avatar {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .sender {
+    display: flex;
+    grid-area: sender;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .reactions {
+    display: flex;
+    grid-area: reactions;
+    gap: 4px;
+    margin-top: 2px;
+  }
+
+  .reaction {
+    display: flex;
+    border: 1px solid var(--md-sys-color-outline);
+    border-radius: 6px;
+    padding: 6px;
+    height: 24px;
+    font-size: 12px;
+
+    > .count {
+      font-size: 10px;
+    }
+  }
+
+  .event {
+    display: grid;
+    position: relative;
+    grid-template-columns: 32px 1fr auto;
+
+    grid-template-areas:
+      "avatar sender date"
+      "avatar content content"
+      "none reactions reactions";
+    margin-inline: 0.5em;
+    border-radius: 4px;
+    padding-inline: 0.5em;
+    padding-block: 0.25em;
+  }
+
+  .content {
+    grid-area: content;
+    text-wrap: wrap;
+    word-wrap: break-word;
+  }
+
+  .reactions,
+  .content,
+  .sender {
+    margin-inline: 8px;
+  }
+
+  .backdrop {
+    position: absolute;
+    opacity: 0.25;
+    z-index: -1;
+    inset: 0;
+
+    border-radius: 8px;
+
+    background: var(--md-sys-color-surface-variant);
+  }
+</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 {
+    border-radius: 8px;
+    max-width: 100%;
+    max-height: 16em;
+  }
+
+  .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
@@ -1,51 +1,66 @@
 <script lang="ts">
  import { KEYMAP_CODES } from "$lib/serial/keymap-codes";
  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";
+  import { tooltip } from "$lib/hover-popover";

-  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 =
-    `&lt;${info.id ?? `0x${info.code.toString(16)}`}&gt; ` +
-    (info.title ?? "") +
-    (info.variant === "left"
-      ? " (left)"
-      : info.variant === "right"
-        ? " (right)"
-        : "");
+  let popover: HTMLElement | undefined = $state(undefined);
 </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"}
+{#snippet popoverSnippet()}
+  <div bind:this={popover} popover="hint">
+    &lt;{info.id ?? `0x${info.code.toString(16)}`}&gt;
+    {#if info.title}
+      {info.title}
+    {/if}
+    {#if info.variant === "left"}
+      (Left)
+    {:else if info.variant === "right"}
+      (Right)
+    {/if}
+  </div>
+{/snippet}
+
+{#if display === "keys"}
  <kbd
    class:icon={!!info.icon}
    class:left={info.variant === "left"}
    class:right={info.variant === "right"}
-    use:title={{ title: tooltip }}
+    {@attach tooltip(popover)}
  >
-    {info.icon ?? info.display ?? info.id ?? `0x${info.code.toString(16)}`}
+    {dynamicMapping ??
+      info.icon ??
+      info.display ??
+      info.id ??
+      `0x${info.code.toString(16)}`}
+    {@render popoverSnippet()}
  </kbd>
 {:else if display === "inline-keys"}
-  {#if !info.icon && info.id?.length === 1}
+  {#if !info.icon && dynamicMapping?.length === 1}
    <span
+      {@attach tooltip(popover)}
      class:left={info.variant === "left"}
-      class:right={info.variant === "right"}>{info.id}</span
+      class:right={info.variant === "right"}
+      >{dynamicMapping}{@render popoverSnippet()}</span
+    >
+  {:else if !info.icon && info.id?.length === 1}
+    <span
+      {@attach tooltip(popover)}
+      class:left={info.variant === "left"}
+      class:right={info.variant === "right"}
+      >{info.id}{@render popoverSnippet()}</span
    >
  {:else}
    <kbd
@@ -53,21 +68,22 @@
      class:left={info.variant === "left"}
      class:right={info.variant === "right"}
      class:icon={!!info.icon}
-      use:title={{ title: tooltip }}
+      {@attach tooltip(popover)}
    >
-      {info.icon ??
+      {dynamicMapping ??
+        info.icon ??
        info.display ??
        info.id ??
-        `0x${info.code.toString(16)}`}</kbd
+        `0x${info.code.toString(16)}`}{@render popoverSnippet()}</kbd
    >
  {/if}
 {/if}

 <style lang="scss">
  kbd:not(.inline-kbd) {
-    height: 24px;
-    padding-block: auto;
    transition: color 250ms ease;
+    padding-block: auto;
+    height: 24px;
  }

  .left {
@@ -77,17 +93,6 @@
    border-right-width: 3px;
  }

-  .dynamic {
-    padding: 4px;
-    border-radius: 1px;
-    min-width: 8px;
-    background: var(--md-sys-color-surface-variant);
-
-    &.inline {
-      padding: 0px;
-    }
-  }
-
  .inline-kbd {
    margin-inline-end: 2px;
  }
--- a/src/lib/components/ActionListItem.svelte
+++ b/src/lib/components/ActionListItem.svelte
@@ -3,15 +3,22 @@
  import type { KeyInfo } from "$lib/serial/keymap-codes";
  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>
@@ -41,33 +48,33 @@
 <style lang="scss">
  button {
    display: flex;
-    gap: 4px;
    align-items: center;
+    gap: 4px;
+    margin: 0;
+    border-radius: 8px;
+    padding: 8px;

    width: 100%;
    height: auto;
-    margin: 0;
-    padding: 8px;

    font-family: "Noto Sans Mono", monospace;
-    border-radius: 8px;

    @media not (forced-colors: active) {
-      color: inherit;
-
-      background: transparent;
      border: none;

+      background: transparent;
+      color: inherit;
+
      &:focus-visible {
-        color: var(--md-sys-color-on-surface-variant);
-        background: var(--md-sys-color-surface-variant);
        outline: none;
+        background: var(--md-sys-color-surface-variant);
+        color: var(--md-sys-color-on-surface-variant);
      }
    }

    @media (forced-colors: active) {
-      border: 1px solid ButtonBorder;
      margin-block: 4px;
+      border: 1px solid ButtonBorder;

      &:hover {
        color: ActiveText;
@@ -79,8 +86,8 @@
    display: flex;
    flex: 1;
    flex-direction: column;
-    align-items: flex-start;
    justify-content: flex-start;
+    align-items: flex-start;

    text-align: start;
  }
--- 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/AnimatedNumber.svelte
+++ b/src/lib/components/AnimatedNumber.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+  import { fade, slide } from "svelte/transition";
+
+  let { value }: { value: number } = $props();
+
+  let digits: number[] = $derived(value.toString().split("").map(Number));
+  const nums = Array.from({ length: 10 }, (_, i) => i);
+</script>
+
+<div class="digits" style:width="{digits.length}ch">
+  {#each digits as digit, i (digits.length - i)}
+    <div
+      class="digit-wrapper"
+      style:right="{digits.length - 1 - i}ch"
+      transition:fade
+    >
+      {#each nums as num (num)}
+        <div
+          class="digit"
+          style:transform="translateY({(digit - num) / 4}em)"
+          style:opacity={digit === num ? 1 : 0}
+        >
+          {num}
+        </div>
+      {/each}
+    </div>
+  {/each}
+</div>
+
+<style lang="scss">
+  .digits {
+    display: inline-block;
+    position: relative;
+    transition: width 500ms ease;
+  }
+
+  .digit-wrapper {
+    display: inline-grid;
+    width: 1ch;
+    height: 1em;
+  }
+
+  .digit {
+    display: inline-block;
+    grid-row: 1;
+    grid-column: 1;
+    transition:
+      transform 500ms ease,
+      opacity 500ms ease;
+  }
+</style>
--- 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}
@@ -16,8 +16,8 @@
 <style lang="scss">
  button {
    cursor: pointer;
-    color: var(--md-sys-color-on-background);
-    background: transparent;
    border: none;
+    background: transparent;
+    color: var(--md-sys-color-on-background);
  }
 </style>
--- 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,72 +24,70 @@
        <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>

 <style lang="scss">
  form {
+    display: flex;
    position: relative;
+    flex-direction: column;

    contain: strict;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
+
+    border-radius: 16px;

    width: 100%;
    height: 100%;
+    overflow: hidden;
+    color: var(--md-sys-color-on-secondary);
+    font-size: 0.75rem;

    font-family: "Noto Sans Mono", monospace;
-    font-size: 0.75rem;
-    color: var(--md-sys-color-on-secondary);
-
-    border-radius: 16px;
  }

  fieldset::before {
-    content: "$";
-
    position: absolute;
    bottom: 8px;
    left: 8px;
+    content: "$";

    font-weight: 900;
  }

  input {
-    width: 100%;
+    appearance: none;
    margin-block-start: -16px;
+    border: none;
+    background: var(--md-sys-color-secondary);
    padding: 8px;
-    padding-block-start: 24px;
    padding-inline-start: calc(8px + 1.5ch);
+    padding-block-start: 24px;
+    width: 100%;
+    color: var(--md-sys-color-on-secondary);
+    font-weight: 600;

    font-family: "Noto Sans Mono", monospace;
-    font-weight: 600;
-    color: var(--md-sys-color-on-secondary);
-
-    appearance: none;
-    background: var(--md-sys-color-secondary);
-    border: none;
  }

  .io {
    --scrollbar-color: var(--md-sys-color-secondary);
+    flex: 1;

    z-index: 1;
+    border-radius: 0 0 16px 16px;

-    overflow-y: auto;
-    flex: 1;
+    background: var(--md-sys-color-secondary-container);

    padding: 12px;

-    color: var(--md-sys-color-on-secondary-container);
+    overflow-y: auto;

-    background: var(--md-sys-color-secondary-container);
-    border-radius: 0 0 16px 16px;
+    color: var(--md-sys-color-on-secondary-container);
  }

  :focus-visible {
@@ -99,10 +97,10 @@
  fieldset {
    all: unset;

-    position: relative;
-
    display: block;

+    position: relative;
+
    opacity: 0.8;

    transition: opacity 250ms ease;
@@ -113,16 +111,16 @@
  }

  .anchor {
-    overflow-anchor: auto;
    height: 1px;
+    overflow-anchor: auto;
  }

  code,
  samp,
  p {
    display: block;
-    overflow-anchor: none;
    margin-block: 0.15rem;
+    overflow-anchor: none;
  }

  p {
@@ -130,24 +128,24 @@
    justify-content: center;

    margin-block-end: 1rem;
+    border-radius: 8px;
+
+    background: var(--md-sys-color-secondary);
    padding: 0.25rem;

    color: var(--md-sys-color-on-secondary);
-
-    background: var(--md-sys-color-secondary);
-    border-radius: 8px;
  }

  code::before {
-    content: "> ";
    margin-block-end: 0.25rem;
-    font-weight: 900;
+    content: "> ";
    color: var(--md-sys-color-primary);
+    font-weight: 900;
  }

  ::selection {
-    color: var(--md-sys-color-background);
    background: var(--md-sys-color-on-background);
+    color: var(--md-sys-color-background);
  }

  @keyframes blink {
--- 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}
@@ -18,5 +17,11 @@
 <style lang="scss">
  p {
    margin-block: 0;
+
+    :global(kbd.icon) {
+      display: inline-flex;
+      translate: 0 0.2em;
+      font-size: inherit;
+    }
  }
 </style>
--- a/src/lib/components/layout/ActionSelector.svelte
+++ b/src/lib/components/layout/ActionSelector.svelte
@@ -3,25 +3,39 @@
    KEYMAP_CATEGORIES,
    KEYMAP_CODES,
    KEYMAP_IDS,
+    type KeyInfo,
  } 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 { action } from "$lib/title";
+  import { get } from "svelte/store";

-  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();
  });

  const index = new FlexSearch.Index({ tokenize: "full" });
-  createIndex();

-  async function createIndex() {
-    for (const [, action] of KEYMAP_CODES) {
+  $effect(() => {
+    createIndex($KEYMAP_CODES);
+  });
+
+  async function createIndex(codes: Map<number, KeyInfo>) {
+    for (const [, action] of codes) {
      await index?.addAsync(
        action.code,
        `${action.title || ""} ${action.variant || ""} ${action.category} ${action.id || ""} ${
@@ -33,19 +47,19 @@

  async function search() {
    results = (await index!.searchAsync(searchBox.value)) as number[];
-    exact = KEYMAP_IDS.get(searchBox.value)?.code;
+    exact = get(KEYMAP_IDS).get(searchBox.value)?.code;
    code = Number(searchBox.value);
  }

  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 +81,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: Set<number> | undefined = $state(undefined);
 </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">
@@ -113,7 +132,7 @@
          bind:group={filter}
        /></label
      >
-      {#each KEYMAP_CATEGORIES as category}
+      {#each $KEYMAP_CATEGORIES as category}
        <label
          >{category.name}<input
            name="category"
@@ -140,12 +159,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}
@@ -153,10 +172,10 @@
      {#if filter !== undefined || results.length > 0}
        {@const resultValue =
          results.length === 0
-            ? Array.from(KEYMAP_CODES, ([it]) => it)
+            ? 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>
@@ -170,18 +189,17 @@
    border: none;

    label {
-      height: unset;
-      padding-block: 2px;
+      border: 1px solid currentcolor;
+      border-radius: 6px;
      padding-inline: 4px;
+      padding-block: 2px;
+      height: unset;

      font-size: 14px;

-      border: 1px solid currentcolor;
-      border-radius: 6px;
-
      &:has(:checked) {
-        color: var(--md-sys-color-on-secondary);
        background: var(--md-sys-color-secondary);
+        color: var(--md-sys-color-on-secondary);
      }

      input {
@@ -192,34 +210,33 @@

  dialog {
    display: flex;
-    align-items: center;
    justify-content: center;
+    align-items: center;

-    width: 100%;
-    height: 100%;
+    border: none;

    background: rgba(0 0 0 / 60%);

-    border: none;
+    width: 100%;
+    height: 100%;
  }

  aside {
-    pointer-events: none;
+    opacity: 0.4;

    margin: 8px;
-
-    opacity: 0.4;
    border: 1px dashed var(--md-sys-color-outline);
    border-radius: 8px;
+    pointer-events: none;

    > h3 {
-      width: fit-content;
+      margin-inline-start: 16px;
      margin-block-start: -13px;
      margin-block-end: 0;
-      margin-inline-start: 16px;
-      padding-inline: 8px;

      background: var(--md-sys-color-background);
+      padding-inline: 8px;
+      width: fit-content;
    }

    @media (prefers-contrast: more) {
@@ -234,26 +251,26 @@

  .search-row {
    display: flex;
-    gap: 4px;
    align-items: center;
+    gap: 4px;
    margin-inline: 16px;
  }

  .content {
-    position: relative;
-    transform-origin: top left;
-
-    overflow: hidden;
    display: flex;
+    position: relative;
    flex-direction: column;
+    transform-origin: top left;
+    border-radius: 16px;
+
+    background: var(--md-sys-color-background);

    width: calc(min(30cm, 90%));
    height: calc(min(100% - 128px, 90%));

-    color: var(--md-sys-color-on-background);
+    overflow: hidden;

-    background: var(--md-sys-color-background);
-    border-radius: 16px;
+    color: var(--md-sys-color-on-background);

    @media (forced-colors: active) {
      border: 1px solid CanvasText;
@@ -261,39 +278,38 @@
  }

  input[type="search"] {
-    width: 100%;
-    height: 64px;
+    transition: all 250ms ease;
    margin-block-end: 8px;
-    padding-inline: 16px;
-
-    font-family: inherit;
-    font-size: 16px;
-    color: currentcolor;
-
-    background: none;
    border: none;
    border-bottom: 1px solid var(--md-sys-color-surface-variant);

-    transition: all 250ms ease;
+    background: none;
+    padding-inline: 16px;
+    width: 100%;
+    height: 64px;
+    color: currentcolor;
+    font-size: 16px;
+
+    font-family: inherit;

    &:focus {
-      border-bottom: 1px solid var(--md-sys-color-primary);
      outline: none;
+      border-bottom: 1px solid var(--md-sys-color-primary);
    }
  }

  ul {
    --scrollbar-color: var(--md-sys-color-surface-variant);

-    scrollbar-gutter: both-edges stable;
-
-    overflow-y: auto;
-
    box-sizing: border-box;
-    height: 100%;
    margin: 0;
    padding: 0;
    padding-inline: 4px;
+    height: 100%;
+
+    overflow-y: auto;
+
+    scrollbar-gutter: both-edges stable;
  }

  li {
@@ -303,27 +319,27 @@
  .exact {
    display: flex;
    flex-direction: column;
-    align-items: center;
    justify-content: center;
-
-    width: 100%;
+    align-items: center;
    margin-block-start: 8px;

    border: 1px solid var(--md-sys-color-primary);
    border-radius: 8px;

+    width: 100%;
+
    > i {
      display: flex;
-      gap: 4px;
-      align-items: center;
      justify-content: center;
+      align-items: center;
+      gap: 4px;
+      border-radius: 0 0 8px 8px;
+
+      background: var(--md-sys-color-primary);

      padding-inline: 6px;

      color: var(--md-sys-color-on-primary);
-
-      background: var(--md-sys-color-primary);
-      border-radius: 0 0 8px 8px;
    }

    @media (forced-colors: active) {
--- a/src/lib/components/layout/GenericLayout.svelte
+++ b/src/lib/components/layout/GenericLayout.svelte
@@ -8,17 +8,16 @@
  import { dev } from "$app/environment";
  import ActionSelector from "$lib/components/layout/ActionSelector.svelte";
  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";
  import { expoOut } from "svelte/easing";
+  import { activeLayer, activeProfile } from "$lib/serial/connection";

  const { scale, margin, strokeWidth, fontSize, iconFontSize } =
    getContext<VisualLayoutConfig>("visual-layout-config");
-  const activeLayer = getContext<Writable<number>>("active-layer");

  if (dev) {
    // you have absolutely no idea what a difference this makes for performance
@@ -30,8 +29,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];
@@ -125,13 +124,33 @@
    const keyInfo = layoutInfo.keys[index];
    if (!keyInfo) return;
    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 nextAction =
+      get(layout)[get(activeProfile)]![get(activeLayer)]?.[keyInfo.id];
+    const currentAction =
+      get(deviceLayout)[get(activeProfile)]![get(activeLayer)]?.[keyInfo.id];
+    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),
+                profile: get(activeProfile),
+                action,
+              },
+            ]);
+            return changes;
+          });
+          closed();
+        },
      },
    });
    const dialog = document.querySelector("dialog > div") as HTMLDivElement;
@@ -167,22 +186,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 +206,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);
        }
@@ -214,9 +219,9 @@

 <style lang="scss">
  svg {
-    overflow: visible;
    grid-area: "d";
    width: calc(min(100%, 35cm));
    max-height: calc(100% - 170px);
+    overflow: visible;
  }
 </style>
--- a/src/lib/components/layout/KeyText.svelte
+++ b/src/lib/components/layout/KeyText.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { getContext } from "svelte";
  import type { Writable } from "svelte/store";
  import type { VisualLayoutConfig } from "$lib/components/layout/visual-layout";
  import type { CompiledLayoutKey } from "$lib/serialization/visual-layout";
@@ -7,28 +6,41 @@
  import { osLayout } from "$lib/os-layout.js";
  import { KEYMAP_CODES } from "$lib/serial/keymap-codes";
  import { action } from "$lib/title";
+  import { activeProfile, activeLayer } from "$lib/serial/connection";
+  import { getContext } from "svelte";

  const { fontSize, margin, inactiveOpacity, inactiveScale, iconFontSize } =
    getContext<VisualLayoutConfig>("visual-layout-config");
-  const activeLayer = getContext<Writable<number>>("active-layer");
+  const currentAction = getContext<Writable<Set<number>> | undefined>(
+    "highlight-action",
+  );

-  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}
-  {@const { action: actionId, isApplied } = $layout[layer]?.[key.id] ?? {
+  {@const { action: actionId, isApplied } = $layout[$activeProfile]?.[layer]?.[
+    key.id
+  ] ?? {
    action: 0,
    isApplied: true,
  }}
  {@const { code, icon, id, display, title, keyCode, variant } =
-    KEYMAP_CODES.get(actionId) ?? { code: actionId }}
+    $KEYMAP_CODES.get(actionId) ?? { code: actionId }}
  {@const dynamicMapping = keyCode && $osLayout.get(keyCode)}
  {@const tooltip =
    (title ?? id ?? `0x${code.toString(16)}`) +
@@ -40,6 +52,7 @@
  ]}
  {@const hasIcon = !dynamicMapping && !!icon}
  <text
+    class:hidden={$currentAction?.has(actionId) === false}
    fill={isApplied ? "currentcolor" : "var(--md-sys-color-primary)"}
    font-weight={isApplied ? "" : "bold"}
    text-anchor="middle"
@@ -70,15 +83,15 @@
  $transition: 200ms;

  text {
-    will-change: translate, scale;
-    user-select: none;
-    transform-origin: center;
    transform-box: fill-box;
+    transform-origin: center;
    transition:
      fill #{$focus-transition} ease,
      opacity #{$transition} ease,
      translate #{$transition} ease,
      scale #{$transition} ease;
+    will-change: translate, scale;
+    user-select: none;

    @media (prefers-contrast: more) {
      --inactive-opacity: 0.8;
@@ -89,4 +102,8 @@
  text:focus-within {
    outline: none;
  }
+
+  text.hidden {
+    opacity: 0.2;
+  }
 </style>
--- a/src/lib/components/layout/KeyboardKey.svelte
+++ b/src/lib/components/layout/KeyboardKey.svelte
@@ -3,24 +3,46 @@
  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";
+  import { type Writable } from "svelte/store";

  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;
+  const highlight = getContext<Writable<Set<number>> | undefined>("highlight");
+
+  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
+  class:highlight={$highlight?.has(key.id) === true}
+  class:faded={$highlight?.has(key.id) === false}
+  {onclick}
+  {onkeypress}
+  {onfocusin}
  role="button"
  tabindex={i + 1}
 >
@@ -91,14 +113,14 @@
  $transition: 200ms;

  rect {
-    transform-origin: center;
    transform-box: fill-box;
+    transform-origin: center;
  }

  path,
  g {
-    transform-origin: top left;
    transform-box: fill-box;
+    transform-origin: top left;
  }

  path,
@@ -114,15 +136,17 @@
    stroke-opacity: 0.3;
  }

+  g.faded,
  g:hover {
-    cursor: default;
    opacity: 0.6;
    transition: opacity #{$transition} ease;
+    cursor: default;
  }

+  g.highlight,
  g:focus-within {
-    color: var(--md-sys-color-primary);
    outline: none;
+    color: var(--md-sys-color-primary);

    > path,
    > rect {
--- a/src/lib/components/layout/Layout.svelte
+++ b/src/lib/components/layout/Layout.svelte
@@ -1,20 +1,11 @@
 <script lang="ts">
-  import { serialPort } from "$lib/serial/connection";
+  import { deviceMeta, serialPort } from "$lib/serial/connection";
  import { action } from "$lib/title";
  import GenericLayout from "$lib/components/layout/GenericLayout.svelte";
-  import { getContext } from "svelte";
-  import type { Writable } from "svelte/store";
+  import { activeProfile, activeLayer } from "$lib/serial/connection";
  import type { VisualLayout } from "$lib/serialization/visual-layout";
-  import { fade } from "svelte/transition";
-
-  $: device = $serialPort?.device;
-  const activeLayer = getContext<Writable<number>>("active-layer");
-
-  const layers = [
-    ["Numeric Layer", "123", 1],
-    ["Primary Layer", "abc", 0],
-    ["Function Layer", "function", 2],
-  ] as const;
+  import { fade, fly } from "svelte/transition";
+  import { restoreFromFile } from "$lib/backup/backup";

  const layouts = {
    ONE: () =>
@@ -33,23 +24,51 @@
      import("$lib/assets/layouts/generic/103-key.yml").then(
        (it) => it.default as VisualLayout,
      ),
+    M4G: () =>
+      import("$lib/assets/layouts/m4g.yml").then(
+        (it) => it.default as VisualLayout,
+      ),
+    M4GR: () =>
+      import("$lib/assets/layouts/m4gr.yml").then(
+        (it) => it.default as VisualLayout,
+      ),
+    T4G: () =>
+      import("$lib/assets/layouts/t4g.yml").then(
+        (it) => it.default as VisualLayout,
+      ),
  };
 </script>

 <div class="container">
-  {#if device}
-    {#await layouts[device]() then visualLayout}
+  {#if $serialPort}
+    {#await layouts[$serialPort.device]() then visualLayout}
      <fieldset transition:fade>
-        {#each layers as [title, icon, value]}
+        <div class="layers">
+          {#each Array.from({ length: $serialPort.layerCount }, (_, i) => i) as layer}
+            <label>
+              <input
+                type="radio"
+                onclick={() => ($activeLayer = layer)}
+                name="layer"
+                value={layer}
+                checked={$activeLayer === layer}
+              />
+              {String.fromCodePoint(
+                "A".codePointAt(0)! + $activeProfile,
+              )}{layer + 1}
+            </label>
+          {/each}
+        </div>
+        {#if $deviceMeta?.factoryDefaults?.layout}
          <button
-            class="icon"
-            use:action={{ title, shortcut: `alt+${value + 1}` }}
-            on:click={() => ($activeLayer = value)}
-            class:active={$activeLayer === value}
+            use:action={{ title: "Reset Layout" }}
+            transition:fly={{ x: -8 }}
+            class="icon reset-layout"
+            onclick={() =>
+              restoreFromFile($deviceMeta!.factoryDefaults!.layout)}
+            >reset_wrench</button
          >
-            {icon}
-          </button>
-        {/each}
+        {/if}
      </fieldset>

      <GenericLayout {visualLayout} />
@@ -61,71 +80,32 @@
  .container {
    display: flex;
    flex-direction: column;
-    align-items: center;
    justify-content: center;
+    align-items: center;

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

  fieldset {
-    position: relative;
-
    display: flex;
-    align-items: center;
+    position: relative;
    justify-content: center;
+    align-items: center;
+
+    border: none;

    padding: 8px;
-
-    border: none;
  }

-  button.icon {
-    cursor: pointer;
+  .layers {
+    display: flex;
+    justify-content: center;
+    align-items: center;

-    z-index: 1;
+    gap: 2px;

-    font-size: 24px;
-    color: var(--md-sys-color-on-surface-variant);
-
-    background: var(--md-sys-color-surface-variant);
-    border: none;
-
-    transition: all 250ms ease;
-
-    &:nth-child(2) {
-      z-index: 2;
-
-      aspect-ratio: 1;
-
-      font-size: 32px;
-
-      border-radius: 50%;
-    }
-
-    &:first-child,
-    &:last-child {
-      aspect-ratio: unset;
-      height: unset;
-    }
-
-    &:first-child {
-      margin-inline-end: -8px;
-      padding-inline: 4px 24px;
-      border-radius: 16px 0 0 16px;
-    }
-
-    &:last-child {
-      margin-inline-start: -8px;
-      padding-inline: 24px 4px;
-      border-radius: 0 16px 16px 0;
-    }
-
-    &.active {
-      font-weight: 900;
-      color: var(--md-sys-color-on-tertiary);
-      background: var(--md-sys-color-tertiary);
-    }
+    margin-inline: auto;
  }
 </style>
--- a/src/lib/dialogs/ConfirmDialog.svelte
+++ b/src/lib/dialogs/ConfirmDialog.svelte
@@ -1,16 +1,25 @@
 <script lang="ts">
-  import { createEventDispatcher } from "svelte";
  import Dialog from "$lib/dialogs/Dialog.svelte";
-  import ActionString from "$lib/components/ActionString.svelte";
+  import type { Chord } from "$lib/serial/chord";
+  import ChordActionEdit from "../../routes/(app)/config/chords/ChordActionEdit.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,
+    chord,
+    onabort,
+    onconfirm,
+  }: {
+    title: string;
+    message?: string;
+    abortTitle: string;
+    confirmTitle: string;
+    chord: Chord & { deleted: boolean };
+    onabort: () => void;
+    onconfirm: () => void;
+  } = $props();
 </script>

 <Dialog>
@@ -18,12 +27,23 @@
  {#if message}
    <p>{@html message}</p>
  {/if}
-  <p><ActionString {actions} /></p>
+  <p>
+    <ChordActionEdit
+      chord={{
+        ...chord,
+        isApplied: false,
+        phraseChanged: false,
+        actionsChanged: false,
+        sortBy: "",
+        id: chord.actions,
+      }}
+      interactive={false}
+      onsubmit={() => {}}
+    />
+  </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/ConnectionFailed.svelte
+++ b/src/lib/dialogs/ConnectionFailed.svelte
@@ -0,0 +1,106 @@
+<script lang="ts">
+  import Dialog from "$lib/dialogs/Dialog.svelte";
+  import LL from "$i18n/i18n-svelte";
+
+  let {
+    message,
+    onclose,
+  }: {
+    message: string;
+    onclose: () => void;
+  } = $props();
+</script>
+
+<Dialog>
+  {#if !navigator.serial}
+    <h1>Incompatible Browser</h1>
+    <p>Your browser does not support the Web Serial API.</p>
+    <p>Supported browsers are any Chromium based Browsers, such as</p>
+    <ul>
+      <li>Google Chrome</li>
+      <li>Microsoft Edge</li>
+      <li>Opera</li>
+      <li>Brave</li>
+    </ul>
+  {:else}
+    <h1>Connection Failed</h1>
+    <pre>{message}</pre>
+    <h2>Troubleshooting Steps</h2>
+    <ul>
+      {#if navigator.userAgent.includes("Linux")}
+        <li>
+          <p>{@html $LL.deviceManager.LINUX_PERMISSIONS()}</p>
+          <p>
+            In most cases you can simply follow the <a
+              target="_blank"
+              href="https://docs.arduino.cc/software/ide-v1/tutorials/Linux#please-read"
+              >Arduino Guide</a
+            > on serial port permissions.
+          </p>
+          <p>Special systems:</p>
+          <ul>
+            <li>
+              <a
+                target="_blank"
+                href="https://wiki.archlinux.org/title/Arduino#Accessing_serial"
+                >Arch and Arch-based like Manjaro or EndeavourOS</a
+              >
+            </li>
+            <li>
+              <a
+                target="_blank"
+                href="https://gist.github.com/CMCDragonkai/d00201ec143c9f749fc49533034e5009?permalink_comment_id=4670311#gistcomment-4670311"
+                >NixOS</a
+              >
+            </li>
+            <li>
+              <a
+                target="_blank"
+                href="https://wiki.gentoo.org/wiki/Arduino#Grant_access_to_non-root_users"
+                >Gentoo</a
+              >
+            </li>
+          </ul>
+        </li>
+      {/if}
+      <li>
+        You device may be pre-CCOS. refer to <a
+          target="_blank"
+          href="https://docs.charachorder.com/CCOS.html#upgrade-to-ccos"
+          >Upgrade to CCOS</a
+        > on how to upgrade your device.
+      </li>
+      <li>
+        Some USB cables or hubs can cause issues, try directly connecting to a
+        port on your computer with the included cable.
+      </li>
+    </ul>
+  {/if}
+  <div class="buttons">
+    <button class="primary" onclick={onclose}>Close</button>
+  </div>
+</Dialog>
+
+<style lang="scss">
+  h1 {
+    color: var(--md-sys-color-error);
+    font-size: 2em;
+    text-align: center;
+  }
+
+  .buttons {
+    display: flex;
+    justify-content: flex-end;
+    width: 100%;
+  }
+
+  pre {
+    color: var(--md-sys-color-error);
+  }
+
+  a {
+    display: inline;
+    padding: 0;
+    color: var(--md-sys-color-primary);
+  }
+</style>
--- 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,20 +11,20 @@
 </script>

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

 <style lang="scss">
  dialog {
+    box-shadow: 0 0 48px rgba(0 0 0 / 60%);
+    border: none;
+    border-radius: 38px;
+
+    background: var(--md-sys-color-background);
    min-width: 300px;
    max-width: 512px;

    color: var(--md-sys-color-on-background);
-
-    background: var(--md-sys-color-background);
-    border: none;
-    border-radius: 38px;
-    box-shadow: 0 0 48px rgba(0 0 0 / 60%);
  }

  dialog::backdrop {
--- a/src/lib/dialogs/confirm-dialog.ts
+++ b/src/lib/dialogs/confirm-dialog.ts
@@ -1,33 +1,34 @@
 import ConfirmDialog from "$lib/dialogs/ConfirmDialog.svelte";
+import { mount, unmount } from "svelte";
+import type { Chord } from "$lib/serial/chord";

 export async function askForConfirmation(
  title: string,
  message: string,
  confirmTitle: string,
  abortTitle: string,
-  actions: number[],
+  chord: Chord,
 ): Promise<boolean> {
-  const dialog = new ConfirmDialog({
+  let resolvePromise: (value: boolean) => void;
+  const resultPromise = new Promise<boolean>((resolve) => {
+    resolvePromise = resolve;
+  });
+
+  const dialog = mount(ConfirmDialog, {
    target: document.body,
    props: {
      title,
      message,
      confirmTitle,
      abortTitle,
-      actions,
+      chord,
+      onabort: () => resolvePromise(false),
+      onconfirm: () => resolvePromise(true),
    },
  });

-  let resolvePromise: (value: boolean) => void;
-  const resultPromise = new Promise<boolean>((resolve) => {
-    resolvePromise = resolve;
-  });
-
-  dialog.$on("abort", () => resolvePromise(false));
-  dialog.$on("confirm", () => resolvePromise(true));
-
  const result = await resultPromise;
-  dialog.$destroy();
+  unmount(dialog);

  return result;
 }
--- a/src/lib/dialogs/connection-failed-dialog.ts
+++ b/src/lib/dialogs/connection-failed-dialog.ts
@@ -0,0 +1,24 @@
+import ConnectionFailed from "$lib/dialogs/ConnectionFailed.svelte";
+import { mount, unmount } from "svelte";
+
+export async function showConnectionFailedDialog(
+  message: string,
+): Promise<void> {
+  let resolvePromise: (value: void) => void;
+  const resultPromise = new Promise<void>((resolve) => {
+    resolvePromise = resolve;
+  });
+
+  const dialog = mount(ConnectionFailed, {
+    target: document.body,
+    props: {
+      message,
+      onclose: () => resolvePromise(),
+    },
+  });
+
+  const result = await resultPromise;
+  unmount(dialog);
+
+  return result;
+}
--- a/src/lib/fonts/material-symbols-rounded.scss
+++ b/src/lib/fonts/material-symbols-rounded.scss
@@ -1,33 +1,33 @@
@font-face {
-  font-family: "Material Symbols Rounded";
-  font-weight: 100 700;
  font-style: normal;
+  font-weight: 100 700;
  src: url("$lib/assets/icons.min.woff2") format("woff2");
+  font-family: "Material Symbols Rounded";
 }

 .icon {
-  user-select: none;
-
-  direction: ltr;
  display: inline-block;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 24px;
+  line-height: 1;

  /* stylelint-disable-next-line */
  font-family: "Material Symbols Rounded";
-  font-size: 24px;
-  font-feature-settings: "liga";
  font-variation-settings:
    "FILL" var(--icon-fill, 0),
    "wght" var(--icon-weigth, 400),
    "GRAD" var(--icon-grade, 0);
-  font-weight: normal;
-  font-style: normal;
-  line-height: 1;
-  text-transform: none;
+  font-feature-settings: "liga";
  letter-spacing: normal;
+
+  direction: ltr;
+  user-select: none;
+  text-transform: none;
  word-wrap: normal;
-  white-space: nowrap;

  transition: font-variation-settings 250ms ease;
+  white-space: nowrap;

  -moz-osx-font-smoothing: grayscale;
 }
--- a/src/lib/fonts/noto-sans-mono.scss
+++ b/src/lib/fonts/noto-sans-mono.scss
@@ -66,28 +66,30 @@

 /* noto-sans-mono-latin-ext-wght-normal */
@font-face {
-  font-family: "Noto Sans Mono Variable";
-  font-weight: 100 900;
  font-style: normal;
-  font-display: swap;
+  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  src: url("@fontsource-variable/noto-sans-mono/files/noto-sans-mono-latin-ext-wght-normal.woff2")
    format("woff2-variations");
-  unicode-range: U+0100-02AF, U+0300-0301, U+0303-0304, U+0308-0309, U+0323,
-    U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F,
+  font-family: "Noto Sans Mono Variable";
+  font-display: swap;
+  unicode-range:
+    U+0100-02AF, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
+    U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
 }

 /* noto-sans-mono-latin-wght-normal */
@font-face {
-  font-family: "Noto Sans Mono";
-  font-weight: 100 900;
  font-style: normal;
-  font-display: swap;
+  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  src: url("@fontsource-variable/noto-sans-mono/files/noto-sans-mono-latin-wght-normal.woff2")
    format("woff2-variations");
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
-    U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F,
-    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  font-family: "Noto Sans Mono";
+  font-display: swap;
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
+    U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074,
+    U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
--- a/src/lib/hover-popover.ts
+++ b/src/lib/hover-popover.ts
@@ -0,0 +1,39 @@
+import type { Attachment } from "svelte/attachments";
+
+export const hotkeys = new Map<string, HTMLElement>();
+
+export function tooltip(
+  target: HTMLElement | undefined,
+  shortcut?: string,
+): Attachment<HTMLElement> {
+  return (node: HTMLElement) => {
+    function show() {
+      if (!target) return;
+      target.showPopover({ source: node });
+    }
+    function hide() {
+      if (!target) return;
+      target.hidePopover();
+    }
+
+    node.addEventListener("mouseenter", show);
+    node.addEventListener("focus", show);
+    node.addEventListener("mouseout", hide);
+    node.addEventListener("blur", hide);
+
+    if (shortcut && node instanceof HTMLElement) {
+      hotkeys.set(shortcut, node);
+    }
+
+    return () => {
+      node.removeEventListener("mouseenter", show);
+      node.removeEventListener("focus", show);
+      node.removeEventListener("mouseout", hide);
+      node.removeEventListener("blur", hide);
+
+      if (shortcut && node instanceof HTMLElement) {
+        hotkeys.delete(shortcut);
+      }
+    };
+  };
+}
--- 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/meta/meta-storage.ts
+++ b/src/lib/meta/meta-storage.ts
@@ -0,0 +1,150 @@
+import type { RawVersionMeta, SettingsMeta, VersionMeta } from "./types/meta";
+import type { Listing } from "./types/listing";
+import type { KeymapCategory } from "./types/actions";
+import { browser } from "$app/environment";
+
+let lock: Promise<void> | undefined = undefined;
+
+export async function getMeta(
+  device: string,
+  version: string,
+  fetch: typeof window.fetch = window.fetch,
+): Promise<VersionMeta> {
+  while (lock) await lock;
+  let resolveLock!: () => void;
+  lock = new Promise((resolve) => (resolveLock = resolve));
+
+  try {
+    if (!browser) return fetchMeta(device, version, fetch);
+
+    const dbRequest = indexedDB.open("version-meta", 4);
+    const db = await new Promise<IDBDatabase>((resolve, reject) => {
+      dbRequest.onsuccess = () => resolve(dbRequest.result);
+      dbRequest.onerror = () => reject(dbRequest.error);
+      dbRequest.onupgradeneeded = () => {
+        const db = dbRequest.result;
+        if (db.objectStoreNames.contains("meta")) {
+          db.deleteObjectStore("meta");
+        }
+        db.createObjectStore("meta", { keyPath: ["device", "version"] });
+      };
+    });
+    console.log("upgrading version meta db");
+
+    try {
+      const readTransaction = db.transaction(["meta"], "readonly");
+      const store = readTransaction.objectStore("meta");
+      const itemRequest = store.get([device, version]);
+      const item = await new Promise<VersionMeta | undefined>((resolve) => {
+        itemRequest.onsuccess = () => resolve(itemRequest.result);
+        itemRequest.onerror = () => resolve(undefined);
+      });
+
+      if (item) return item;
+
+      const meta = await fetchMeta(device, version);
+
+      const putTransaction = db.transaction(["meta"], "readwrite");
+      const putStore = putTransaction.objectStore("meta");
+      const putRequest = putStore.put(meta);
+      await new Promise<void>((resolve, reject) => {
+        putRequest.onsuccess = () => resolve();
+        putRequest.onerror = () => reject(putRequest.error);
+      });
+      putTransaction.commit();
+
+      return meta;
+    } finally {
+      db.close();
+    }
+  } catch (error) {
+    console.error(error);
+  } finally {
+    resolveLock();
+    lock = undefined;
+  }
+  return fetchMeta(device, version, fetch);
+}
+
+async function fetchMeta(
+  device: string,
+  version: string,
+  fetch: typeof window.fetch = window.fetch,
+): Promise<VersionMeta> {
+  const path = `${import.meta.env.VITE_FIRMWARE_URL}/${device}/${version}`;
+  const files: Listing[] = await fetch(`${path}/`)
+    .then((res) => res.json())
+    .catch(() => []);
+  const meta: Partial<RawVersionMeta> | undefined = files.some(
+    (entry) => entry.type === "file" && entry.name === "meta.json",
+  )
+    ? await fetch(`${path}/meta.json`).then((res) => res.json())
+    : undefined;
+
+  return {
+    version: meta?.version ?? version,
+    device: meta?.target ?? device,
+    date: new Date(meta?.git_date ?? files[0]?.mtime ?? ""),
+    path,
+    commit: meta?.git_commit ?? undefined,
+    dirty: meta?.git_is_dirty ?? false,
+    public: meta?.public_build ?? !version.includes("+"),
+    developmentBuild: (meta?.development_mode ?? 0) === 1,
+    factoryDefaults: meta?.factory_defaults
+      ? {
+          layout: await fetch(`${path}/${meta.factory_defaults.layout}`).then(
+            (it) => it.json(),
+          ),
+          settings: await fetch(
+            `${path}/${meta.factory_defaults.settings}`,
+          ).then((it) => it.json()),
+          chords: Object.fromEntries(
+            await Promise.all(
+              Object.entries(meta.factory_defaults.chords).map(
+                async ([name, file]) => [
+                  name,
+                  await fetch(`${path}/${file}`).then((it) => it.json()),
+                ],
+              ),
+            ),
+          ),
+        }
+      : undefined,
+    settings: await (meta?.settings
+      ? fetch(`${path}/${meta.settings}`).then((it) => it.json())
+      : import("$lib/assets/settings.yml")
+          .then((it) => (it as any).default)
+          .then((settings: SettingsMeta[]) => {
+            if (!device.startsWith("lite_")) {
+              settings = settings.filter((it) => it.name !== "leds");
+            }
+            return settings;
+          })),
+    changelog: await (meta?.changelog
+      ? fetch(`${path}/${meta.changelog}`).then((it) => it.json())
+      : {}),
+    actions: await (meta?.actions
+      ? fetch(`${path}/${meta.actions}`).then((it) => it.json())
+      : Promise.all<KeymapCategory[]>(
+          Object.values(import.meta.glob("$lib/assets/keymaps/*.yml")).map(
+            async (load) => load().then((it) => (it as any).default),
+          ),
+        )),
+    update: {
+      uf2:
+        meta?.update?.uf2 ??
+        files.find(
+          (entry) => entry.type === "file" && entry.name === "CURRENT.UF2",
+        )?.name ??
+        undefined,
+      ota:
+        meta?.update?.ota ??
+        files.find(
+          (entry) => entry.type === "file" && entry.name === "firmware.bin",
+        )?.name ??
+        undefined,
+      esptool: meta?.update?.esptool ?? undefined,
+    },
+    spiFlash: meta?.spi_flash ?? undefined,
+  };
+}
--- a/src/lib/meta/types/actions.ts
+++ b/src/lib/meta/types/actions.ts
@@ -0,0 +1,19 @@
+export interface KeymapCategory {
+  name: string;
+  description: string;
+  icon?: string;
+  display?: string;
+  type?: "unassigned";
+  actions: Record<number, Partial<ActionInfo>>;
+}
+
+export interface ActionInfo {
+  id: string;
+  title: string;
+  icon: string;
+  display: string;
+  description: string;
+  variant: "left" | "right";
+  variantOf: number;
+  keyCode: string;
+}
--- a/src/lib/meta/types/listing.ts
+++ b/src/lib/meta/types/listing.ts
@@ -0,0 +1,14 @@
+export type Listing = FileListing | DirectoryListing;
+
+export interface DirectoryListing {
+  name: string;
+  type: "directory";
+  mtime: string;
+}
+
+export interface FileListing {
+  name: string;
+  type: "file";
+  mtime: string;
+  size: number;
+}
--- a/src/lib/meta/types/meta.ts
+++ b/src/lib/meta/types/meta.ts
@@ -0,0 +1,108 @@
+import type {
+  CharaChordFile,
+  CharaLayoutFile,
+  CharaSettingsFile,
+} from "$lib/share/chara-file";
+import type { KeymapCategory } from "./actions";
+
+export interface SettingsMeta {
+  name: string;
+  description?: string;
+  items: SettingsItemMeta[];
+}
+
+export interface SettingsItemMeta {
+  id: number;
+  description?: string;
+  enum?: string[];
+  range: [number, number];
+  step?: number;
+  unit?: string;
+  inverse?: number;
+  scale?: number;
+}
+
+export interface ChangelogEntry {
+  summary: string;
+  description: string;
+}
+
+export interface Changelog {
+  features: ChangelogEntry[];
+  fixes: ChangelogEntry[];
+}
+
+export interface RawVersionMeta {
+  version: string;
+  target: string;
+  git_commit: string;
+  git_is_dirty: boolean;
+  git_date: string;
+  public_build: boolean;
+  development_mode: number;
+  actions: string;
+  settings: string;
+  changelog: string;
+  factory_defaults: {
+    layout: string;
+    settings: string;
+    chords: Record<string, string>;
+  };
+  update: {
+    ota: string | null;
+    uf2: string | null;
+    esptool: EspToolData | null;
+  };
+  files: string[];
+  spi_flash: SPIFlashInfo | null;
+}
+
+export interface VersionMeta {
+  version: string;
+  device: string;
+  path: string;
+  date: Date;
+  public: boolean;
+  commit?: string;
+  dirty: boolean;
+  developmentBuild: boolean;
+  actions: KeymapCategory[];
+  settings: SettingsMeta[];
+  changelog: Changelog;
+  factoryDefaults?: {
+    layout: CharaLayoutFile;
+    settings: CharaSettingsFile;
+    chords: Record<string, CharaChordFile>;
+  };
+  update: {
+    ota?: string;
+    uf2?: string;
+    esptool?: EspToolData;
+  };
+  spiFlash?: SPIFlashInfo;
+}
+
+export interface SPIFlashInfo {
+  type: string;
+  size: string;
+  connection: SPIConnection;
+}
+
+export interface SPIConnection {
+  clk: number;
+  q: number;
+  d: number;
+  hd: number;
+  cs: number;
+}
+
+export interface EspToolData {
+  chip: string;
+  baud: string;
+  before: string;
+  after: string;
+  flash_mode: string;
+  flash_freq: string;
+  flash_size: string;
+  files: Record<string, string>;
+}
--- a/src/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,22 @@ 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);
+  }
+  if ((hash & 0xff) === 0xff) {
+    hash ^= 0xff;
+  }
+  return hash & 0x3fff_ffff;
+}
--- a/src/lib/serial/connection.ts
+++ b/src/lib/serial/connection.ts
@@ -5,7 +5,8 @@ import type { Writable } from "svelte/store";
 import type { CharaLayout } from "$lib/serialization/layout";
 import { persistentWritable } from "$lib/storage";
 import { userPreferences } from "$lib/preferences";
-import settingInfo from "$lib/assets/settings.yml";
+import { getMeta } from "$lib/meta/meta-storage";
+import type { VersionMeta } from "$lib/meta/types/meta";

 export const serialPort = writable<CharaDevice | undefined>();

@@ -28,71 +29,103 @@ export const deviceChords = persistentWritable<Chord[]>(
 /**
 * Layout as read from the device
 */
-export const deviceLayout = persistentWritable<CharaLayout>(
-  "layout",
-  [[], [], []],
+export const deviceLayout = persistentWritable<CharaLayout[]>(
+  "layout-profiles",
+  [],
  () => get(userPreferences).backup,
 );

 /**
 * Settings as read from the device
 */
-export const deviceSettings = persistentWritable<number[]>(
-  "device-settings",
+export const deviceSettings = persistentWritable<number[][]>(
+  "settings-profiles",
  [],
  () => get(userPreferences).backup,
 );

+export const activeProfile = persistentWritable<number>("active-profile", 0);
+export const activeLayer = persistentWritable<number>("active-profile", 0);
+
 export const syncStatus: Writable<
  "done" | "error" | "downloading" | "uploading"
 > = writable("done");

+export const deviceMeta = writable<VersionMeta | undefined>(undefined);
+
 export interface ProgressInfo {
  max: number;
  current: number;
 }
 export const syncProgress = writable<ProgressInfo | undefined>(undefined);

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

 export async function sync() {
  const device = get(serialPort);
  if (!device) return;
-  const chordCount = await device.getChordCount();
  syncStatus.set("downloading");
+  const meta = await getMeta(
+    `${device.device}_${device.chipset}`.toLowerCase(),
+    device.version.toString(),
+  );
+  deviceMeta.set(meta);
+  const chordCount = await device.getChordCount();
+
+  const maxSettings = meta.settings
+    .map((it) => it.items.length)
+    .reduce((a, b) => a + b, 0);

  const max =
-    Object.keys(settingInfo["settings"]).length +
-    device.keyCount * 3 +
+    (maxSettings + device.keyCount * device.layerCount) * device.profileCount +
    chordCount;
  let current = 0;
+  activeProfile.update((it) => Math.min(it, device.profileCount - 1));
+  activeLayer.update((it) => Math.min(it, device.layerCount - 1));
  syncProgress.set({ max, current });
  function progressTick() {
    current++;
    syncProgress.set({ max, current });
  }

-  const parsedSettings: number[] = [];
-  for (const key in settingInfo["settings"]) {
-    try {
-      parsedSettings[Number.parseInt(key)] = await device.getSetting(
-        Number.parseInt(key),
-      );
-    } catch {}
-    progressTick();
+  const parsedSettings: number[][] = Array.from(
+    { length: device.profileCount },
+    () => [],
+  );
+  for (const [profile, settings] of parsedSettings.entries()) {
+    for (const category of meta.settings) {
+      for (const setting of category.items) {
+        try {
+          settings[setting.id] = await device.getSetting(profile, setting.id);
+        } catch {}
+      }
+      progressTick();
+    }
  }
  deviceSettings.set(parsedSettings);

-  const parsedLayout: CharaLayout = [[], [], []];
-  for (let layer = 1; layer <= 3; layer++) {
-    for (let i = 0; i < device.keyCount; i++) {
-      parsedLayout[layer - 1]![i] = await device.getLayoutKey(layer, i);
-      progressTick();
+  const parsedLayout: CharaLayout[] = Array.from(
+    { length: device.profileCount },
+    () =>
+      Array.from({ length: device.layerCount }, () =>
+        Array.from({ length: device.keyCount }, () => 0),
+      ),
+  );
+  for (const [profile, layout] of parsedLayout.entries()) {
+    for (const [layer, keys] of layout.entries()) {
+      for (let i = 0; i < keys.length; i++) {
+        try {
+          keys[i] = await device.getLayoutKey(profile, layer + 1, i);
+        } catch {}
+        progressTick();
+      }
    }
  }
  deviceLayout.set(parsedLayout);
--- a/src/lib/serial/device.ts
+++ b/src/lib/serial/device.ts
@@ -1,7 +1,6 @@
 import { LineBreakTransformer } from "$lib/serial/line-break-transformer";
 import { serialLog } from "$lib/serial/connection";
 import type { Chord } from "$lib/serial/chord";
-import { SemVer } from "$lib/serial/sem-ver";
 import {
  parseChordActions,
  parsePhrase,
@@ -9,13 +8,18 @@ import {
  stringifyPhrase,
 } from "$lib/serial/chord";
 import { browser } from "$app/environment";
+import { showConnectionFailedDialog } from "$lib/dialogs/connection-failed-dialog";
+import semverGte from "semver/functions/gte";

 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 }],
+  ["TWO S3 (pre-production)", { usbProductId: 0x8252, usbVendorId: 0x303a }],
+  ["TWO S3", { usbProductId: 0x8253, usbVendorId: 0x303a }],
+  ["LITE S2", { usbProductId: 0x812e, usbVendorId: 0x303a }],
  ["LITE M0", { usbProductId: 32796, usbVendorId: 9114 }],
-  ["X", { usbProductId: 33163, usbVendorId: 12346 }],
+  ["X", { usbProductId: 0x818b, usbVendorId: 0x303a }],
+  ["M4G S3 (pre-production)", { usbProductId: 0x1001, usbVendorId: 0x303a }],
+  ["M4G S3", { usbProductId: 0x829a, usbVendorId: 0x303a }],
 ]);

 const KEY_COUNTS = {
@@ -23,6 +27,9 @@ const KEY_COUNTS = {
  TWO: 90,
  LITE: 67,
  X: 256,
+  M4G: 90,
+  M4GR: 90,
+  T4G: 7,
 } as const;

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

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

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

  get portInfo() {
    return this.port.getInfo();
@@ -122,18 +138,20 @@ export class CharaDevice {
      });
      await this.port.close();

-      this.version = new SemVer(
-        await this.send(1, "VERSION").then(([version]) => version),
+      this.version = 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" | "TWO" | "LITE" | "X";
-      this.chipset = chipset as "M0" | "S2" | "S3";
+      if (semverGte(this.version, "2.2.0-beta.4")) {
+        this.profileCount = 3;
+      }
+      const [company, device, chipset] = await this.send(3, ["ID"]);
+      this.company = company as typeof this.company;
+      this.device = device as typeof this.device;
+      this.chipset = chipset as typeof this.chipset;
      this.keyCount = KEY_COUNTS[this.device];
    } catch (e) {
-      alert(e);
      console.error(e);
-      throw e;
+      await showConnectionFailedDialog(String(e));
    }
  }

@@ -174,9 +192,12 @@ export class CharaDevice {
    });
  }

-  private async internalRead() {
+  private async internalRead(timeoutMs: number | undefined) {
    try {
-      const { value } = await timeout(this.reader.read(), 5000);
+      const { value } =
+        timeoutMs !== undefined
+          ? await timeout(this.reader.read(), timeoutMs)
+          : await this.reader.read();
      serialLog.update((it) => {
        it.push({
          type: "output",
@@ -267,14 +288,15 @@ export class CharaDevice {
   */
  async send<T extends number>(
    expectedLength: T,
-    ...command: string[]
+    command: string[],
+    timeout: number | undefined = 5000,
  ): Promise<LengthArray<string, T>> {
    return this.runWith(async (send, read) => {
      await send(...command);
      const commandString = command
        .join(" ")
        .replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
-      const readResult = await read();
+      const readResult = await read(timeout);
      if (readResult === undefined) {
        console.error("No response");
        return Array(expectedLength).fill("NO_RESPONSE") as LengthArray<
@@ -296,7 +318,7 @@ export class CharaDevice {
  }

  async getChordCount(): Promise<number> {
-    const [count] = await this.send(1, "CML C0");
+    const [count] = await this.send(1, ["CML", "C0"]);
    return Number.parseInt(count);
  }

@@ -304,7 +326,11 @@ export class CharaDevice {
   * Retrieves a chord by index
   */
  async getChord(index: number | number[]): Promise<Chord> {
-    const [actions, phrase] = await this.send(2, `CML C1 ${index}`);
+    const [actions, phrase] = await this.send(2, [
+      "CML",
+      "C1",
+      index.toString(),
+    ]);
    return {
      actions: parseChordActions(actions),
      phrase: parsePhrase(phrase),
@@ -315,29 +341,30 @@ export class CharaDevice {
   * Retrieves the phrase for a set of actions
   */
  async getChordPhrase(actions: number[]): Promise<number[] | undefined> {
-    const [phrase] = await this.send(
-      1,
-      `CML C2 ${stringifyChordActions(actions)}`,
-    );
+    const [phrase] = await this.send(1, [
+      "CML",
+      "C2",
+      stringifyChordActions(actions),
+    ]);
    return phrase === "2" ? undefined : parsePhrase(phrase);
  }

  async setChord(chord: Chord) {
-    const [status] = await this.send(
-      1,
+    const [status] = await this.send(1, [
      "CML",
      "C3",
      stringifyChordActions(chord.actions),
      stringifyPhrase(chord.phrase),
-    );
+    ]);
    if (status !== "0") console.error(`Failed with status ${status}`);
  }

  async deleteChord(chord: Pick<Chord, "actions">) {
-    const status = await this.send(
-      1,
-      `CML C4 ${stringifyChordActions(chord.actions)}`,
-    );
+    const status = await this.send(1, [
+      "CML",
+      "C4",
+      stringifyChordActions(chord.actions),
+    ]);
    if (status?.at(-1) !== "2" && status?.at(-1) !== "0")
      throw new Error(`Failed with status ${status}`);
  }
@@ -348,8 +375,19 @@ export class CharaDevice {
   * @param id id of the key, refer to the individual device for where each key is
   * @param action the assigned action id
   */
-  async setLayoutKey(layer: number, id: number, action: number) {
-    const [status] = await this.send(1, `VAR B4 A${layer} ${id} ${action}`);
+  async setLayoutKey(
+    profile: number,
+    layer: number,
+    id: number,
+    action: number,
+  ) {
+    const [status] = await this.send(1, [
+      "VAR",
+      "B4",
+      `${String.fromCodePoint("A".codePointAt(0)! + profile)}${layer}`,
+      id.toString(),
+      action.toString(),
+    ]);
    if (status !== "0") throw new Error(`Failed with status ${status}`);
  }

@@ -359,8 +397,13 @@ export class CharaDevice {
   * @param id id of the key, refer to the individual device for where each key is
   * @returns the assigned action id
   */
-  async getLayoutKey(layer: number, id: number) {
-    const [position, status] = await this.send(2, `VAR B3 A${layer} ${id}`);
+  async getLayoutKey(profile: number, layer: number, id: number) {
+    const [position, status] = await this.send(2, [
+      "VAR",
+      "B3",
+      `${String.fromCodePoint("A".codePointAt(0)! + profile)}${layer}`,
+      id.toString(),
+    ]);
    if (status !== "0") throw new Error(`Failed with status ${status}`);
    return Number(position);
  }
@@ -373,7 +416,7 @@ export class CharaDevice {
   * **This does not need to be called for chords**
   */
  async commit() {
-    const [status] = await this.send(1, "VAR B0");
+    const [status] = await this.send(1, ["VAR", "B0"]);
    if (status !== "0") throw new Error(`Failed with status ${status}`);
  }

@@ -383,22 +426,25 @@ export class CharaDevice {
   * Settings are applied until the next reboot or loss of power.
   * To permanently store the settings, you *must* call commit.
   */
-  async setSetting(id: number, value: number) {
-    const [status] = await this.send(
-      1,
-      `VAR B2 ${id.toString(16).toUpperCase()} ${value}`,
-    );
+  async setSetting(profile: number, id: number, value: number) {
+    const [status] = await this.send(1, [
+      "VAR",
+      "B2",
+      (id + profile * 0x100).toString(16).toUpperCase(),
+      value.toString(),
+    ]);
    if (status !== "0") throw new Error(`Failed with status ${status}`);
  }

  /**
   * Retrieves a setting from the device
   */
-  async getSetting(id: number): Promise<number> {
-    const [value, status] = await this.send(
-      2,
-      `VAR B1 ${id.toString(16).toUpperCase()}`,
-    );
+  async getSetting(profile: number, id: number): Promise<number> {
+    const [value, status] = await this.send(2, [
+      "VAR",
+      "B1",
+      (id + profile * 0x100).toString(16).toUpperCase(),
+    ]);
    if (status !== "0")
      throw new Error(
        `Setting "0x${id.toString(16)}" doesn't exist (Status code ${status})`,
@@ -410,14 +456,14 @@ export class CharaDevice {
   * Reboots the device
   */
  async reboot() {
-    await this.send(0, "RST");
+    await this.send(0, ["RST"]);
  }

  /**
   * Reboots the device to the bootloader
   */
  async bootloader() {
-    await this.send(0, "RST BOOTLOADER");
+    await this.send(0, ["RST", "BOOTLOADER"]);
  }

  /**
@@ -426,7 +472,12 @@ export class CharaDevice {
  async reset(
    type: "FACTORY" | "PARAMS" | "KEYMAPS" | "STARTER" | "CLEARCML" | "FUNC",
  ) {
-    await this.send(0, `RST ${type}`);
+    await this.send(0, ["RST", type]);
+  }
+
+  async queryKey(): Promise<number> {
+    const [value] = await this.send(1, ["QRY", "KEY"], undefined);
+    return Number(value);
  }

  /**
@@ -435,6 +486,101 @@ export class CharaDevice {
   * This is useful for debugging when there is a suspected heap or stack issue.
   */
  async getRamBytesAvailable(): Promise<number> {
-    return Number(await this.send(1, "RAM").then(([bytes]) => bytes));
+    return Number(await this.send(1, ["RAM"]).then(([bytes]) => bytes));
+  }
+
+  async updateFirmware(
+    file: ArrayBuffer,
+    progress: (transferred: number, total: number) => void,
+  ): 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;
+        });
+
+        // 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;
+        });
+
+        const chunkSize = 128;
+        for (let i = 0; i < file.byteLength; i += chunkSize) {
+          const chunk = file.slice(i, i + chunkSize);
+          await writer.write(new Uint8Array(chunk));
+          progress(i + chunk.byteLength, file.byteLength);
+        }
+
+        serialLog.update((it) => {
+          it.push({
+            type: "input",
+            value: `...${file.byteLength} bytes`,
+          });
+          return it;
+        });
+
+        const result = (await this.reader.read()).value!.trim();
+        serialLog.update((it) => {
+          it.push({
+            type: "output",
+            value: result!,
+          });
+          return it;
+        });
+
+        if (result !== "OTA OK") {
+          throw new Error(result);
+        }
+
+        await writer.write(new TextEncoder().encode(`RST RESTART\r\n`));
+        serialLog.update((it) => {
+          it.push({
+            type: "input",
+            value: "RST RESTART",
+          });
+          return it;
+        });
+      } finally {
+        writer.releaseLock();
+      }
+
+      await this.suspend();
+    } finally {
+      delete this.lock;
+      resolveLock!(true);
+    }
  }
 }
--- a/src/lib/serial/keymap-codes.ts
+++ b/src/lib/serial/keymap-codes.ts
@@ -1,38 +1,64 @@
 import type { ActionInfo, KeymapCategory } from "$lib/assets/keymaps/keymap";
+import { derived, type Readable } from "svelte/store";
+import { deviceMeta } from "./connection";

 export interface KeyInfo extends Partial<ActionInfo> {
  code: number;
  category?: KeymapCategory;
 }

-export const KEYMAP_CATEGORIES = (await Promise.all(
+const fallbackActions = await Promise.all<KeymapCategory>(
  Object.values(import.meta.glob("$lib/assets/keymaps/*.yml")).map(
    async (load) => load().then((it) => (it as any).default),
  ),
-)) as KeymapCategory[];
-
-export const KEYMAP_CODES = new Map<number, KeyInfo>(
-  KEYMAP_CATEGORIES.flatMap((category) =>
-    Object.entries(category.actions).map(([code, action]) => [
-      Number(code),
-      { ...action, code: Number(code), category },
-    ]),
-  ),
 );

-export const KEYMAP_KEYCODES = new Map<string, number>(
-  KEYMAP_CATEGORIES.flatMap((category) =>
-    Object.entries(category.actions).map(
-      ([code, action]) => [action.keyCode!, Number(code)] as const,
+export let KEYMAP_CATEGORIES: Readable<KeymapCategory[]> = derived(
+  deviceMeta,
+  (deviceMeta) => deviceMeta?.actions ?? fallbackActions,
+);
+
+export const KEYMAP_CODES: Readable<Map<number, KeyInfo>> = derived(
+  KEYMAP_CATEGORIES,
+  (categories) =>
+    new Map<number, KeyInfo>(
+      categories.flatMap((category) =>
+        Object.entries(category.actions).map(([code, action]) => [
+          Number(code),
+          { ...action, code: Number(code), category },
+        ]),
+      ),
    ),
-  ).filter(([keyCode]) => keyCode !== undefined),
 );

-export const KEYMAP_IDS = new Map<string, KeyInfo>(
-  KEYMAP_CATEGORIES.flatMap((category) =>
-    Object.entries(category.actions).map(
-      ([code, action]) =>
-        [action.id!, { ...action, code: Number(code), category }] as const,
+export const KEYMAP_KEYCODES: Readable<Map<string, number>> = derived(
+  KEYMAP_CATEGORIES,
+  (categories) =>
+    new Map<string, number>(
+      categories
+        .flatMap((category) =>
+          Object.entries(category.actions).map(
+            ([code, action]) => [action.keyCode!, Number(code)] as const,
+          ),
+        )
+        .filter(([keyCode]) => keyCode !== undefined),
+    ),
+);
+
+export const KEYMAP_IDS: Readable<Map<string, KeyInfo>> = derived(
+  KEYMAP_CATEGORIES,
+  (categories) =>
+    new Map<string, KeyInfo>(
+      categories
+        .flatMap((category) =>
+          Object.entries(category.actions).map(
+            ([code, action]) =>
+              [
+                action.id!,
+                { ...action, code: Number(code), category },
+              ] as const,
+          ),
+        )
+        .filter(([id]) => id !== undefined),
    ),
-  ).filter(([id]) => id !== undefined),
 );
--- a/src/lib/serial/sem-ver.ts
+++ b/src/lib/serial/sem-ver.ts
@@ -1,32 +0,0 @@
-export class SemVer {
-  major = 0;
-  minor = 0;
-  patch = 0;
-  preRelease?: string;
-  meta?: string;
-
-  constructor(versionString: string) {
-    const result =
-      /^([0-9]+)\.([0-9]+)\.([0-9]+)(?:-([0-9A-Za-z-]+(?:\.[0-9A-Za-z-]+)*))?(?:\+([0-9A-Za-z-]+))?$/.exec(
-        versionString,
-      );
-    if (!result) {
-      console.error("Invalid version string:", versionString);
-    } else {
-      const [, major, minor, patch, preRelease, meta] = result;
-      this.major = Number.parseInt(major ?? "NaN");
-      this.minor = Number.parseInt(minor ?? "NaN");
-      this.patch = Number.parseInt(patch ?? "NaN");
-      if (preRelease) this.preRelease = preRelease;
-      if (meta) this.meta = meta;
-    }
-  }
-
-  toString() {
-    return (
-      `${this.major}.${this.minor}.${this.patch}` +
-      (this.preRelease ? `-${this.preRelease}` : "") +
-      (this.meta ? `+${this.meta}` : "")
-    );
-  }
-}
--- a/src/lib/serialization/layout.ts
+++ b/src/lib/serialization/layout.ts
@@ -4,13 +4,10 @@ import { fromBase64, toBase64 } from "$lib/serialization/base64";
 export interface NewCharaLayout {
  charaLayoutVersion: 1;
  device: "one" | "lite" | string;
-  /**
-   * Layers A1-A3, with numeric action codes on each
-   */
-  layers: [number[], number[], number[]];
+  layers: number[][];
 }

-export type CharaLayout = [number[], number[], number[]];
+export type CharaLayout = number[][];

 /**
 * Serialize a layout into a micro package
--- a/src/lib/setting.ts
+++ b/src/lib/setting.ts
@@ -1,5 +1,88 @@
 import type { Action } from "svelte/action";
 import { changes, ChangeType, settings } from "$lib/undo-redo";
+import { activeProfile } from "./serial/connection";
+import { combineLatest, map } from "rxjs";
+import { fromReadable } from "./util/from-readable";
+import { get } from "svelte/store";
+
+/**
+ * https://gist.github.com/mjackson/5311256
+ */
+function rgbToHsv(r: number, g: number, b: number): [number, number, number] {
+  r /= 255;
+  g /= 255;
+  b /= 255;
+
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  let h = 0;
+  const v = max;
+
+  const d = max - min;
+  const s = max == 0 ? 0 : d / max;
+
+  if (max == min) {
+    h = 0; // achromatic
+  } else {
+    switch (max) {
+      case r:
+        h = (g - b) / d + (g < b ? 6 : 0);
+        break;
+      case g:
+        h = (b - r) / d + 2;
+        break;
+      case b:
+        h = (r - g) / d + 4;
+        break;
+    }
+
+    h /= 6;
+  }
+
+  return [Math.floor(h * 0xffff), Math.floor(s * 0xff), Math.floor(v * 0xff)];
+}
+
+/**
+ * https://gist.github.com/mjackson/5311256
+ */
+function hsvToRgb(h: number, s: number, v: number): [number, number, number] {
+  h /= 0xffff;
+  s /= 0xff;
+  v /= 0xff;
+
+  let r = 0;
+  let g = 0;
+  let b = 0;
+
+  const i = Math.floor(h * 6);
+  const f = h * 6 - i;
+  const p = v * (1 - s);
+  const q = v * (1 - f * s);
+  const t = v * (1 - (1 - f) * s);
+
+  switch (i % 6) {
+    case 0:
+      ((r = v), (g = t), (b = p));
+      break;
+    case 1:
+      ((r = q), (g = v), (b = p));
+      break;
+    case 2:
+      ((r = p), (g = v), (b = t));
+      break;
+    case 3:
+      ((r = p), (g = q), (b = v));
+      break;
+    case 4:
+      ((r = t), (g = p), (b = v));
+      break;
+    case 5:
+      ((r = v), (g = p), (b = q));
+      break;
+  }
+
+  return [Math.floor(r * 0xff), Math.floor(g * 0xff), Math.floor(b * 0xff)];
+}

 export const setting: Action<
  HTMLInputElement | HTMLSelectElement,
@@ -9,7 +92,12 @@ export const setting: Action<
  { id, inverse, scale },
 ) {
  node.setAttribute("disabled", "");
-  const type = node.getAttribute("type") as "number" | "checkbox" | "range";
+  const type = node.getAttribute("type") as
+    | "number"
+    | "checkbox"
+    | "range"
+    | "color";
+  const isColor = type === "color";
  const isNumeric =
    type === "number" || type === "range" || node instanceof HTMLSelectElement;
  const min = node.hasAttribute("min")
@@ -19,36 +107,50 @@ export const setting: Action<
    ? Number(node.getAttribute("max"))
    : undefined;

-  const unsubscribe = settings.subscribe(async (settings) => {
-    if (id in settings) {
-      const { value, isApplied } = settings[id]!;
-      if (isNumeric) {
-        node.value = (
-          inverse !== undefined
-            ? inverse / value
-            : scale !== undefined
-              ? scale * value
-              : value
-        ).toString();
+  const subscription = combineLatest([
+    fromReadable(settings),
+    fromReadable(activeProfile),
+  ])
+    .pipe(map(([settings, profile]) => settings[profile]!))
+    .subscribe(async (settings) => {
+      if (id in settings) {
+        const { value, isApplied } = settings[id]!;
+        if (isNumeric) {
+          node.value = (
+            inverse !== undefined
+              ? inverse / value
+              : scale !== undefined
+                ? scale * value
+                : value
+          ).toString();
+        } else if (isColor) {
+          const rgb = hsvToRgb(
+            settings[id]!.value,
+            settings[id + 1]!.value,
+            settings[id + 2]!.value,
+          );
+          node.value = `#${rgb.map((c) => c.toString(16).padStart(2, "0")).join("")}`;
+        } else {
+          node.checked = value !== 0;
+        }
+        if (isApplied) {
+          node.classList.remove("pending-changes");
+        } else {
+          node.classList.add("pending-changes");
+        }
+        node.removeAttribute("disabled");
      } else {
-        node.checked = value !== 0;
+        node.setAttribute("disabled", "");
      }
-      if (isApplied) {
-        node.classList.remove("pending-changes");
-      } else {
-        node.classList.add("pending-changes");
-      }
-      node.removeAttribute("disabled");
-    } else {
-      node.setAttribute("disabled", "");
-    }
-  });
+    });

  async function listener() {
    let value: number;
    if (isNumeric) {
      value = Number(node.value);
      if (Number.isNaN(value)) return;
+      if (min !== undefined) value = Math.max(min, value);
+      if (max !== undefined) value = Math.min(max, value);
      value = Math.floor(
        inverse !== undefined
          ? inverse / value
@@ -56,18 +158,36 @@ export const setting: Action<
            ? value / scale
            : value,
      );
-      if (min !== undefined) value = Math.max(min, value);
-      if (max !== undefined) value = Math.min(max, value);
+    } else if (isColor) {
+      const r = parseInt(node.value.slice(1, 3), 16);
+      const g = parseInt(node.value.slice(3, 5), 16);
+      const b = parseInt(node.value.slice(5, 7), 16);
+      const hsv = rgbToHsv(r, g, b);
+      changes.update((changes) => {
+        changes.push(
+          hsv.map((value, i) => ({
+            type: ChangeType.Setting,
+            id: id + i,
+            setting: value,
+            profile: get(activeProfile),
+          })),
+        );
+        return changes;
+      });
+      return;
    } else {
      value = node.checked ? 1 : 0;
    }

    changes.update((changes) => {
-      changes.push({
-        type: ChangeType.Setting,
-        id: id,
-        setting: value,
-      });
+      changes.push([
+        {
+          type: ChangeType.Setting,
+          id: id,
+          setting: value,
+          profile: get(activeProfile),
+        },
+      ]);
      return changes;
    });
  }
@@ -77,7 +197,7 @@ export const setting: Action<
  return {
    destroy() {
      node.removeEventListener("change", listener);
-      unsubscribe();
+      subscription.unsubscribe();
    },
  };
 };
--- a/src/lib/storage.ts
+++ b/src/lib/storage.ts
@@ -9,10 +9,16 @@ 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);
+      store = writable(value);
+    }
    store.subscribe((value) => {
      if (!condition || condition())
        localStorage.setItem(key, JSON.stringify(value));
--- a/src/lib/style/_kbd.scss
+++ b/src/lib/style/_kbd.scss
@@ -1,18 +1,18 @@
 kbd {
  display: inline-flex;
-  align-items: center;
  justify-content: center;
-
-  height: 20px;
+  align-items: center;
  margin-block: 6px;
-  padding: 4px;
-
-  font-size: 14px;
-  font-weight: normal;
-  color: currentcolor;

  border: 1px solid currentcolor;
  border-radius: 4px;
+  padding: 4px;
+
+  height: 20px;
+  color: currentcolor;
+  font-weight: normal;
+
+  font-size: 14px;

  &.icon {
    padding: 2px;
@@ -21,8 +21,8 @@ kbd {

  &:has(> kbd) {
    gap: 4px;
-    padding: 0;
    border: none;
+    padding: 0;
  }

  > kbd {
--- a/src/lib/style/_reset.scss
+++ b/src/lib/style/_reset.scss
@@ -0,0 +1,4 @@
+* {
+  appearance: none;
+  box-sizing: border-box;
+}
--- a/src/lib/style/elements/_h1.scss
+++ b/src/lib/style/elements/_h1.scss
@@ -0,0 +1,6 @@
+h1 {
+  margin-block-start: 0;
+  color: var(--md-sys-color-secondary);
+  font-weight: 700;
+  font-size: 4rem;
+}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Thea Schöbl	32c2ce2f45	2.5.0	2025-10-02 13:59:05 +02:00
Thea Schöbl	c6e2f59b05	refactor: rename auto-backup to fast connect	2025-10-02 13:58:01 +02:00
Thea Schöbl	2a872bafac	v2.4.0	2025-09-23 14:14:11 +02:00
Thea Schöbl	a940d1b480	feat: add upgrade flow for pre-2.0.0 (non-OTA) devices	2025-09-23 14:08:14 +02:00
Thea Schöbl	f3b1d76666	feat: t4g support	2025-09-02 18:41:46 +02:00
Thea Schöbl	0b2695a380	refactor: swap stylelint css order plugin for prettier plugin	2025-07-31 13:41:39 +02:00
Thea Schöbl	048dee0a6d	fix: can't select empty chord outputs update dependencies use new title popover	2025-07-29 20:18:13 +02:00
Thea Schöbl	977bdf3043	fix: revamp reset popup	2025-07-29 18:59:11 +02:00
Thea Schöbl	9ca30f412e	feat: update compound calculation feat: add "will my compound break" page	2025-07-29 16:40:54 +02:00
Thea Schöbl	f2a18cafe8	fix: use semver sort for ccos updates	2025-07-29 14:55:02 +02:00
Thea Schöbl	b27182dc35	fix: can't change profiles B/C fix: only add profiles starting beta.4	2025-07-11 17:56:42 +02:00
Thea Schöbl	74ce6af318	feat: profile support	2025-07-11 16:27:19 +02:00
Thea Schöbl	782f1fc38b	feat: autospace toggle	2025-06-13 20:29:05 +02:00
Shane O'Donnell	087ff36d5d	Fix stale search (#189 ) Fixes an issue where, after chord list is updated (e.g. by a deletion), the search results continue to use the old list and indices, resulting in incorrect search results.	2025-06-13 13:22:25 +02:00
Thea Schöbl	bd1c6147fd	2.3.0	2025-05-09 19:38:39 +02:00
Thea Schöbl	891abda0fb	refactor: remove wip esptool section	2025-05-07 21:26:19 +02:00
Thea Schöbl	3611f65e24	fix: build failure	2025-05-06 16:36:50 +02:00
Thea Schöbl	f76882a09c	feat: new settings page design	2025-05-06 16:34:34 +02:00
Thea Schöbl	ff7e4f7b2e	feat: add version changelog support	2025-05-06 15:04:44 +02:00
Thea Schöbl	1c1c86241f	fix: M4G isn't listed in the device manager	2025-05-02 17:40:04 +02:00
Thea Schöbl	dc8b3c3d66	fix: update product ids	2025-05-02 13:21:35 +02:00
Aleksandr Iushmanov	65911419b0	Remove unused `direction` with incomplete type definition. (#184 )	2025-04-27 23:14:21 +02:00
Aleksandr Iushmanov	ccfb09e261	exclude openssl and i18n from npm run format; + npm run format (#183 )	2025-04-27 15:43:16 +02:00
Thea Schöbl	b841469505	feat: add icons	2025-04-25 21:42:07 +02:00
Thea Schöbl	bc06e8ee80	feat: color picker for hsv settings	2025-04-23 15:56:58 +02:00
Thea Schöbl	24fc861ef4	fix: commit is not being sent when only settings or layout change	2025-04-22 19:56:24 +02:00
Thea Schöbl	5801e5fbbe	feat: ota progress bar fix: can't set settings with inverse/scale	2025-04-22 19:14:51 +02:00
Thea Schöbl	92b52e08f7	fix: progress bar is broken fixes #175	2025-04-22 15:19:00 +02:00
Thea Schöbl	4192210d27	fix: use different icons for consumer control fixes #174	2025-04-22 14:30:21 +02:00
Aleksandr Iushmanov	0e5640a1ee	[#167 ] Expand textarea for sentence input; use `untrack` to break recursive reactivity loops hanging the page on long sentences; Use better error message instead of `ERROR` (#182 )	2025-04-22 14:25:44 +02:00
Thea Schöbl	7f27499003	ci: update gh actions	2025-04-17 13:55:27 +02:00
Aleksandr Iushmanov	b6ded5f94c	Remove unused CSS selectors. (#181 )	2025-04-17 13:13:53 +02:00
Aleksandr Iushmanov	63d0ad7ae8	Use modern compiler for css processing in vite (to remove SASS 2.0.0 warnings on deprecated JS API usage); (#180 ) Resolve some of SASS deprecation warnings; Add note to readme about icons generation	2025-04-08 11:51:36 +02:00
Aleksandr Iushmanov	1c8f53caf6	Allow adding arrows as chord actions when shift is pressed (#179 )	2025-04-06 17:41:14 +02:00
Thea Schöbl	1d60b12d43	fix: settings not showing for older devices	2025-04-04 18:15:07 +02:00
Thea Schöbl	e85a731410	feat: fetch settings from build meta	2025-04-04 18:03:09 +02:00
Thea Schöbl	050af564ab	ci: add pull request workflows	2025-03-31 14:00:32 +02:00
Thea Schöbl	6545124aa2	refactor: update dependencies	2025-03-31 13:50:59 +02:00
Thea Schöbl	b93724add3	Merge pull request #178 from poweroftrue/master Improve chord loading speed	2025-03-31 13:13:17 +02:00
Mostafa Dahab	e1092113f6	Improve chord loading speed Signed-off-by: Mostafa Dahab <mostafa@dahab.io>	2025-03-30 16:29:58 +03:00
Izeren	0bb4bbe838	[#169 ] Fix autoConnect feature. Use value form persistent storage when it is available. (#170 ) Authored-by: izeren <yushalnik@bk.ru>	2025-02-24 11:30:19 +01:00
Thea Schöbl	089812c555	feat: better connection error messages resolve #159 fixes #158 fixes #153	2025-02-14 16:31:43 +01:00
Thea Schöbl	45c5f21cc4	fix: search shows 1 chord when there are 0 fixes #151	2025-02-14 15:42:19 +01:00
Thea Schöbl	fb5959998a	feat: sentence trainer custom prompt resolves #162	2025-02-14 15:31:17 +01:00
Thea Schöbl	f319714489	fix: duplicate chords crash fix: duplicate confirm dialog does not show affected chord fixes #137 fixes #163	2025-02-14 15:17:22 +01:00
Thea Schöbl	fb1f5b7ec7	fix: can't type in chords	2025-02-14 14:55:06 +01:00
Thea Schöbl	ac16cfd3bf	feat: use factory default meta feat: clear chords button resolves #64	2025-02-14 14:52:07 +01:00
Thea Schöbl	9d5b0e01d2	feat: add voicebox shortcut resolves #160	2025-02-14 14:04:45 +01:00
Thea Schöbl	e7517f821d	fix: action search does not work until selecting a filter fixes #149	2025-02-14 13:38:47 +01:00
Thea Schöbl	762f73063a	fix: vocabulary is eating spaces fixes #115	2025-02-14 13:33:44 +01:00
Thea Schöbl	7ca9e04dd3	feat: use version meta fixes #150	2025-02-13 16:17:46 +01:00
Thea Schöbl	4d73dad780	feat: learn chat message	2025-02-13 13:53:01 +01:00
Thea Schöbl	5419824c06	feat: re-add chat fixes #161	2025-02-13 13:33:12 +01:00
Thea Schöbl	075d05dd0b	feat: better update page feat: hide manual update steps as "unsafe" if OTA is available resolves #155	2025-02-12 16:00:50 +01:00
Thea Schöbl	9266702cbb	feat: add sentence wpm stage	2025-01-16 20:41:00 +01:00
Thea Schöbl	77e2d2b20e	feat: sentence trainer idle timeout	2025-01-16 17:50:52 +01:00
Thea Schöbl	7819f546a6	fix: package manager	2025-01-16 17:15:25 +01:00
Thea Schöbl	e37b38085d	feat: sentence trainer prototype feat: layout learner prototype	2025-01-16 17:12:56 +01:00
Thea Schöbl	a3bf9ac32b	2.2.3	2025-01-15 11:31:47 +01:00
David Villafaña	5bd3245084	fix: typographical error (#156 ) Co-authored-by: David Rog Desktop <dvillafanaiv@proton.me>	2025-01-15 11:30:46 +01:00
Thea Schöbl	1cd2ec318a	2.2.2	2025-01-14 13:35:53 +01:00
Thea Schöbl	6c8bfa0272	fix: ota update	2025-01-14 13:31:22 +01:00
Thea Schöbl	f69be14b5e	2.2.1	2025-01-06 19:34:28 +01:00
Thea Schöbl	dce554fc66	fix: set pnpm version in github actions correctly	2025-01-06 19:32:43 +01:00
Thea Schöbl	f152dbdcf5	fix: set node/pnpm versions correctly	2025-01-06 19:31:04 +01:00
Thea Schöbl	6a29e6a2fc	2.2.0	2025-01-06 19:25:45 +01:00
Thea Schöbl	9bf3801fef	Mark factory flash as wip	2025-01-06 19:25:27 +01:00
Thea Schöbl	d2accfb838	Squash merge fix-vocabulary-export into master	2024-12-09 18:41:26 +01:00
Thea Schöbl	b8a376b93b	feat: update m4g	2024-12-09 18:35:05 +01:00
Thea Schöbl	588719df91	feat: support factory flashing	2024-11-23 19:02:35 +01:00
Thea Schöbl	6a0dad9dad	feat: android support	2024-11-23 15:07:35 +01:00
Thea Schöbl	f3704e4051	2.1.0	2024-11-20 22:26:59 +01:00
Thea Schöbl	3e6298717e	feat: m4gr	2024-11-19 22:25:01 +01:00
Thea Schöbl	aced0bbbb7	feat: m4g support	2024-11-19 17:48:50 +01:00
Raymond Li	36874c59e3	Temporarily make chat available	2024-11-19 06:08:37 +00:00
Thea Schöbl	9dc61a3482	fix: exclude pre-rendered ccos update pages	2024-11-08 16:04:50 +01:00
Thea Schöbl	d9183f952a	2.0.2	2024-11-08 15:48:26 +01:00
Thea Schöbl	913a833824	fix: build	2024-11-08 15:47:20 +01:00
Thea Schöbl	0d6ef4d011	2.0.1	2024-11-08 15:43:23 +01:00
Thea Schöbl	232045964c	fix: firmware updates	2024-11-08 15:42:58 +01:00
Thea Schöbl	3659b80e41	fix: firmware cannot be linked	2024-11-08 15:21:53 +01:00
Thea Schöbl	3a02caeb6d	fix: pre-production devices are not recognized by the device manager	2024-11-07 21:53:59 +01:00
Thea Schöbl	259fd3a989	fix: stable pipeline	2024-11-05 02:51:21 +01:00
Thea Schöbl	dcf1d89fa0	2.0.0	2024-11-05 02:39:46 +01:00
Thea Schöbl	c79237ce22	move matrix init	2024-11-05 02:38:34 +01:00
Thea Schöbl	d68f1b19fa	update dependencies	2024-11-05 02:34:40 +01:00
Thea Schöbl	9cb36662b3	polish	2024-11-05 02:03:08 +01:00
Thea Schöbl	b4605fe84d	feat: improve UF2 flow	2024-11-03 14:39:35 +01:00
Thea Schöbl	06d122b5d6	feat: add changed pids	2024-10-18 12:18:49 +02:00
Thea Schöbl	3d25b030c6	feat: explicit reboot after ota update	2024-10-16 19:34:16 +02:00
Thea Schöbl	bf490ba823	fix: swapped pid/vid	2024-10-04 18:08:26 +02:00
Thea Schöbl	397f4bb6a9	update compatibility list	2024-10-03 21:32:58 +02:00
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