2.2.1

feat: editor
feat: plugin editor

.github/workflows/build.yml

@@ -1,13 +1,9 @@
 name: Build
 
-on:
-  push:
-    tags:
-      - "v*"
-  workflow_dispatch:
+on: [push]
 
 jobs:
-  CI:
+  build:
     name: 🔨🚀 Build and deploy
     runs-on: ubuntu-latest
     steps:
@@ -21,30 +17,34 @@ jobs:
       - name: ⏬ Install Python dependencies
         run: pip install -r requirements.txt
 
-      - name: 🐉 Use Node.js 18.16.x
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
+      - name: 🐉 Use Node.js 22.4.x
         uses: actions/setup-node@v3
         with:
-          node-version: 18.16.x
-          cache: "npm"
+          node-version: 22.4.x
+          cache: "pnpm"
       - name: ⏬ Install Node dependencies
-        run: npm ci
+        run: pnpm install
 
       - name: 🔥 Optimize icon font
-        run: npm run minify-icons
+        run: pnpm minify-icons
       - name: 🔨 Build site
-        run: npm run build
+        run: pnpm build
 
-      - name: 📦 Upload build artifacts
-        uses: actions/upload-artifact@v3.1.2
-        with:
-          name: build
-          path: build
-      - name: Disable jekyll
-        run: touch build/.nojekyll
-      - name: Custom domain
-        run: echo 'manager.charachorder.com' > build/CNAME
-      - run: git config user.name github-actions
-      - run: git config user.email github-actions@github.com
-      - run: git --work-tree build add --all
-      - run: git commit -m "Automatic Deploy action run by github-actions"
-      - run: git push origin HEAD:gh-pages --force
+      - name: Setup SSH
+        run: |
+          install -m 600 -D /dev/null ~/.ssh/id_rsa
+          echo "${{ secrets.DEPLOY_SSH_KEY }}" > ~/.ssh/id_rsa
+          echo "${{ secrets.DEPLOY_KNOWN_HOSTS }}" > ~/.ssh/known_hosts
+
+      - name: Publish Stable
+        if: ${{ github.ref == 'refs/tags/v*' }}
+        run: rsync -rav --mkpath --delete build/ deploy@charachorder.io:/home/deploy/www/
+
+      - name: Publish Branch
+        run: rsync -rav --mkpath --delete build/ deploy@charachorder.io:/home/deploy/ref/${GITHUB_REF##*/}
+      - name: Publish Commit
+        run: rsync -rav --mkpath --delete build/ deploy@charachorder.io:/home/deploy/ref/${{ github.sha }}

CONTRIBUTING.md

@@ -29,7 +29,7 @@ You may need to run through some additional setup to get Rust running inside Int
 - Python >=3.10
 - Rust Stable (For Tauri Development)
 
-I know, python in JS projects is extremely annoying, unfortunately,
+I know, python in JS projects is extremely annoying. Unfortunately,
 it seems to be the only platform that offers a functional
 way to subset variable woff2 fonts with ligatures.
 

flake.lock

@@ -5,29 +5,11 @@
         "systems": "systems"
       },
       "locked": {
-        "lastModified": 1689068808,
-        "narHash": "sha256-6ixXo3wt24N/melDWjq70UuHQLxGV8jZvooRanIHXw0=",
+        "lastModified": 1710146030,
+        "narHash": "sha256-SZ5L6eA7HJ/nmkzGG7/ISclqe6oZdOZTNoesiInkXPQ=",
         "owner": "numtide",
         "repo": "flake-utils",
-        "rev": "919d646de7be200f3bf08cb76ae1f09402b6f9b4",
-        "type": "github"
-      },
-      "original": {
-        "owner": "numtide",
-        "repo": "flake-utils",
-        "type": "github"
-      }
-    },
-    "flake-utils_2": {
-      "inputs": {
-        "systems": "systems_2"
-      },
-      "locked": {
-        "lastModified": 1681202837,
-        "narHash": "sha256-H+Rh19JDwRtpVPAWp64F+rlEtxUWBAQW28eAi3SRSzg=",
-        "owner": "numtide",
-        "repo": "flake-utils",
-        "rev": "cfacdce06f30d2b68473a46042957675eebb3401",
+        "rev": "b1d9ab70662946ef0850d488da1c9019f3a9752a",
         "type": "github"
       },
       "original": {
@@ -38,11 +20,11 @@
     },
     "nixpkgs": {
       "locked": {
-        "lastModified": 1689752456,
-        "narHash": "sha256-VOChdECcEI8ixz8QY+YC4JaNEFwQd1V8bA0G4B28Ki0=",
+        "lastModified": 1722415718,
+        "narHash": "sha256-5US0/pgxbMksF92k1+eOa8arJTJiPvsdZj9Dl+vJkM4=",
         "owner": "NixOS",
         "repo": "nixpkgs",
-        "rev": "7f256d7da238cb627ef189d56ed590739f42f13b",
+        "rev": "c3392ad349a5227f4a3464dce87bcc5046692fce",
         "type": "github"
       },
       "original": {
@@ -54,11 +36,11 @@
     },
     "nixpkgs_2": {
       "locked": {
-        "lastModified": 1681358109,
-        "narHash": "sha256-eKyxW4OohHQx9Urxi7TQlFBTDWII+F+x2hklDOQPB50=",
+        "lastModified": 1718428119,
+        "narHash": "sha256-WdWDpNaq6u1IPtxtYHHWpl5BmabtpmLnMAx0RdJ/vo8=",
         "owner": "NixOS",
         "repo": "nixpkgs",
-        "rev": "96ba1c52e54e74c3197f4d43026b3f3d92e83ff9",
+        "rev": "e6cea36f83499eb4e9cd184c8a8e823296b50ad5",
         "type": "github"
       },
       "original": {
@@ -77,15 +59,14 @@
     },
     "rust-overlay": {
       "inputs": {
-        "flake-utils": "flake-utils_2",
         "nixpkgs": "nixpkgs_2"
       },
       "locked": {
-        "lastModified": 1690942540,
-        "narHash": "sha256-eafSSO3Y+/TFuy+CHKyolYfGvC33IAWNx4W2NA7LfZM=",
+        "lastModified": 1722391647,
+        "narHash": "sha256-JTi7l1oxnatF1uX/gnGMlRnyFMtylRw4MqhCUdoN2K4=",
         "owner": "oxalica",
         "repo": "rust-overlay",
-        "rev": "aa3994f054038262df55122dfa552b9eab71a994",
+        "rev": "0fd4a5d2098faa516a9b83022aec7db766cd1de8",
         "type": "github"
       },
       "original": {
@@ -108,21 +89,6 @@
         "repo": "default",
         "type": "github"
       }
-    },
-    "systems_2": {
-      "locked": {
-        "lastModified": 1681028828,
-        "narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=",
-        "owner": "nix-systems",
-        "repo": "default",
-        "rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e",
-        "type": "github"
-      },
-      "original": {
-        "owner": "nix-systems",
-        "repo": "default",
-        "type": "github"
-      }
     }
   },
   "root": "root",

flake.nix

@@ -4,56 +4,75 @@
     rust-overlay.url = "github:oxalica/rust-overlay";
     flake-utils.url = "github:numtide/flake-utils";
   };
-  outputs = {
-    self,
-    nixpkgs,
-    flake-utils,
-    rust-overlay,
-  }:
-    flake-utils.lib.eachDefaultSystem (system: let
-      overlays = [(import rust-overlay)];
-      pkgs = import nixpkgs {inherit system overlays;};
-      rust-bin = pkgs.rust-bin.stable.latest.default.override {
-        extensions = ["rust-src" "rust-std" "clippy" "rust-analyzer"];
-      };
-      fontMin = pkgs.python311.withPackages (ps: with ps; [brotli fonttools] ++ (with fonttools.optional-dependencies; [woff]));
-      tauriPkgs = nixpkgs.legacyPackages.${system};
-      libraries = with tauriPkgs; [
-        webkitgtk
-        gtk3
-        cairo
-        gdk-pixbuf
-        glib
-        dbus
-        openssl_3
-        librsvg
-      ];
-      packages =
-        (with pkgs; [
-          nodejs_18
-          rust-bin
-          fontMin
-        ])
-        ++ (with tauriPkgs; [
-          curl
-          wget
-          pkg-config
+  outputs =
+    {
+      self,
+      nixpkgs,
+      flake-utils,
+      rust-overlay,
+    }:
+    flake-utils.lib.eachDefaultSystem (
+      system:
+      let
+        overlays = [ (import rust-overlay) ];
+        pkgs = import nixpkgs { inherit system overlays; };
+        rust-bin = pkgs.rust-bin.stable.latest.default.override {
+          extensions = [
+            "rust-src"
+            "rust-std"
+            "clippy"
+            "rust-analyzer"
+          ];
+        };
+        fontMin = pkgs.python311.withPackages (
+          ps:
+          with ps;
+          [
+            brotli
+            fonttools
+          ]
+          ++ (with fonttools.optional-dependencies; [ woff ])
+        );
+        tauriPkgs = nixpkgs.legacyPackages.${system};
+        libraries = with tauriPkgs; [
+          webkitgtk
+          gtk3
+          cairo
+          gdk-pixbuf
+          glib
           dbus
           openssl_3
-          glib
-          gtk3
-          libsoup
-          webkitgtk
           librsvg
-          # serial plugin
-          udev
-        ]);
-    in {
-      devShell = pkgs.mkShell {
-        buildInputs = packages;
-        shellHook = ''
-          export LD_LIBRARY_PATH=${pkgs.lib.makeLibraryPath libraries}:$LD_LIBRARY_PATH
-        '';
-      };
-    });
+        ];
+        packages =
+          (with pkgs; [
+            nodejs_22
+            nodePackages.pnpm
+            rust-bin
+            fontMin
+          ])
+          ++ (with tauriPkgs; [
+            curl
+            wget
+            pkg-config
+            dbus
+            openssl_3
+            glib
+            gtk3
+            libsoup
+            webkitgtk
+            librsvg
+            # serial plugin
+            udev
+          ]);
+      in
+      {
+        devShell = pkgs.mkShell {
+          buildInputs = packages;
+          shellHook = ''
+            export LD_LIBRARY_PATH=${pkgs.lib.makeLibraryPath libraries}:$LD_LIBRARY_PATH
+          '';
+        };
+      }
+    );
 }

icons.config.js

@@ -4,6 +4,7 @@ const config = {
     "node_modules/@fontsource-variable/material-symbols-rounded/files/material-symbols-rounded-latin-full-normal.woff2",
   outputPath: "src/lib/assets/icons.min.woff2",
   icons: [
+    "deployed_code_update",
     "adjust",
     "add",
     "piano",
@@ -18,6 +19,8 @@ const config = {
     "update",
     "offline_pin",
     "warning",
+    "dangerous",
+    "check",
     "cable",
     "person",
     "sync",
@@ -65,6 +68,8 @@ const config = {
     "bolt",
     "undo",
     "redo",
+    "replay",
+    "reply",
     "navigate_before",
     "navigate_next",
     "print",
@@ -91,9 +96,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",
@@ -112,6 +131,9 @@ const config = {
     upload_2: "ff52",
     stat_minus_2: "e69c",
     stat_2: "e699",
+    routine: "e20c",
+    experiment: "e686",
+    dictionary: "f539",
   },
 };
 

package.json

@@ -1,8 +1,12 @@
 {
   "name": "charachorder-device-manager",
-  "version": "1.5.0",
+  "version": "2.2.1",
   "license": "AGPL-3.0-or-later",
   "private": true,
+  "engines": {
+    "node": ">=22.4",
+    "pnpm": ">=9.4"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/CharaChorder/DeviceManager.git"
@@ -30,52 +34,64 @@
     "typesafe-i18n": "typesafe-i18n"
   },
   "devDependencies": {
-    "@codemirror/autocomplete": "^6.15.0",
-    "@codemirror/commands": "^6.3.3",
+    "@codemirror/autocomplete": "^6.18.2",
+    "@codemirror/commands": "^6.7.1",
     "@codemirror/lang-javascript": "^6.2.2",
-    "@codemirror/language": "^6.10.1",
+    "@codemirror/language": "^6.10.3",
     "@codemirror/state": "^6.4.1",
-    "@fontsource-variable/material-symbols-rounded": "^5.0.27",
-    "@fontsource-variable/noto-sans-mono": "^5.0.19",
-    "@material/material-color-utilities": "^0.2.7",
+    "@codemirror/view": "^6.34.1",
+    "@fontsource-variable/material-symbols-rounded": "^5.1.3",
+    "@fontsource-variable/noto-sans-mono": "^5.1.0",
+    "@lezer/highlight": "^1.2.1",
+    "@material/material-color-utilities": "^0.3.0",
+    "@melt-ui/pp": "^0.3.2",
+    "@melt-ui/svelte": "^0.86.0",
     "@modyfi/vite-plugin-yaml": "^1.1.0",
-    "@sveltejs/adapter-static": "^2.0.3",
-    "@sveltejs/kit": "^1.30.4",
-    "@sveltejs/vite-plugin-svelte": "^2.5.3",
-    "@tauri-apps/api": "^1.5.3",
-    "@tauri-apps/cli": "^1.5.11",
-    "@types/dom-view-transitions": "^1.0.4",
+    "@sveltejs/adapter-static": "^3.0.6",
+    "@sveltejs/kit": "^2.7.5",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "@tauri-apps/api": "^1.6.0",
+    "@tauri-apps/cli": "^1.6.0",
+    "@types/dom-view-transitions": "^1.0.5",
     "@types/flexsearch": "^0.7.6",
-    "@types/w3c-web-serial": "^1.0.6",
+    "@types/w3c-web-serial": "^1.0.7",
     "@types/w3c-web-usb": "^1.0.10",
-    "@vite-pwa/sveltekit": "^0.2.10",
-    "autoprefixer": "^10.4.19",
+    "@types/wicg-file-system-access": "^2023.10.5",
+    "@vite-pwa/sveltekit": "^0.6.6",
+    "autoprefixer": "^10.4.20",
     "codemirror": "^6.0.1",
-    "cypress": "^13.7.2",
+    "cypress": "^13.13.2",
+    "d3": "^7.9.0",
+    "esptool-js": "^0.4.7",
     "flexsearch": "^0.7.43",
-    "fontkit": "^2.0.2",
-    "glob": "^10.3.12",
-    "jsdom": "^22.1.0",
+    "fontkit": "^2.0.4",
+    "glob": "^11.0.0",
+    "jsdom": "^25.0.1",
+    "matrix-js-sdk": "^34.9.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.2.5",
-    "prettier-plugin-svelte": "^3.2.2",
-    "sass": "^1.74.1",
-    "stylelint": "^15.11.0",
-    "stylelint-config-clean-order": "^5.4.2",
+    "prettier": "^3.3.3",
+    "prettier-plugin-svelte": "^3.2.7",
+    "rxjs": "^7.8.1",
+    "sass": "^1.80.6",
+    "socket.io-client": "^4.8.1",
+    "stylelint": "^16.10.0",
+    "stylelint-config-clean-order": "^6.1.0",
     "stylelint-config-html": "^1.1.0",
     "stylelint-config-prettier-scss": "^1.0.0",
-    "stylelint-config-recommended-scss": "^13.1.0",
-    "stylelint-config-standard-scss": "^11.1.0",
-    "svelte": "^4.2.12",
-    "svelte-check": "^3.6.9",
-    "svelte-preprocess": "^5.1.3",
+    "stylelint-config-recommended-scss": "^14.1.0",
+    "stylelint-config-standard-scss": "^13.1.0",
+    "svelte": "5.1.9",
+    "svelte-check": "^4.0.5",
+    "svelte-preprocess": "^6.0.3",
     "tippy.js": "^6.3.7",
     "typesafe-i18n": "^5.26.2",
-    "typescript": "^5.4.4",
-    "vite": "^4.5.3",
-    "vite-plugin-mkcert": "^1.17.5",
-    "vite-plugin-pwa": "^0.17.5",
-    "vitest": "^0.34.6"
+    "typescript": "^5.6.3",
+    "vite": "^5.4.10",
+    "vite-plugin-mkcert": "^1.17.6",
+    "vite-plugin-pwa": "^0.20.5",
+    "vitest": "^2.1.4",
+    "web-serial-polyfill": "^1.0.15",
+    "workbox-window": "^7.3.0"
   },
   "type": "module"
 }

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "app"
-version = "1.5.0"
+version = "2.2.1"
 description = "A Tauri App"
 authors = ["Thea Schöbl <dev@theaninova.de>"]
 license = "AGPL-3"

src-tauri/tauri.conf.json

@@ -6,7 +6,7 @@
     "devPath": "http://localhost:5173",
     "distDir": "../build"
   },
-  "package": { "productName": "amacc1ng", "version": "1.5.0" },
+  "package": { "productName": "amacc1ng", "version": "2.2.1" },
   "tauri": {
     "allowlist": { "all": false },
     "bundle": {

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 {

src/i18n/de/index.ts

@@ -17,11 +17,11 @@ const de = {
     RELOAD: "Neu laden",
   },
   backup: {
-    TITLE: "Lokale Kopie",
-    INDIVIDUAL: "Einzeldateien",
+    TITLE: "Backup",
+    AUTO_BACKUP: "Auto-backup",
     DISCLAIMER:
       "Das Backup in diesem Browser gespeichert und bleibt nur auf diesem Computer.",
-    DOWNLOAD: "Alles herunterladen",
+    DOWNLOAD: "Alles",
     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: {

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: "Auto-backup",
     DISCLAIMER:
-      "A backup is made and stored in this browser, and always remains only on your computer.",
-    DOWNLOAD: "Download Everything",
+      "Whenever you connect this device to browser, a backup is made locally and kept only on your computer.",
+    DOWNLOAD: "Everything",
     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: {

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[]; direction: } =
+    $props();
+
+  let inDirection = $state(0);
+  let outDirection = $state(0);
+  let outroEnd: undefined | (() => void) = $state(undefined);
+  let animationDone: Promise<void>;
+
+  let isNavigating = $state(false);
+
+  function routeIndex(route: string | undefined): number {
+    return routeOrder.findIndex((it) => route?.startsWith(it));
+  }
+
+  beforeNavigate((navigation) => {
+    const from = routeIndex(navigation.from?.url.pathname);
+    const to = routeIndex(navigation.to?.url.pathname);
+    if (from === -1 || to === -1 || from === to) return;
+    isNavigating = true;
+
+    inDirection = from > to ? -1 : 1;
+    outDirection = from > to ? 1 : -1;
+
+    animationDone = new Promise((resolve) => {
+      outroEnd = resolve;
+    });
+  });
+
+  afterNavigate(async () => {
+    await animationDone;
+    isNavigating = false;
+  });
+</script>
+
+{#if !isNavigating}
+  <main
+    in:fly={{ y: inDirection * 24, duration: 150, easing: expoOut }}
+    out:fly={{ y: outDirection * 24, duration: 150, easing: expoIn }}
+    onoutroend={outroEnd}
+  >
+    {@render children()}
+  </main>
+{/if}
+
+<style lang="scss">
+  main {
+    padding: 0;
+  }
+</style>

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

src/lib/assets/keymaps/chara-chorder.yml

@@ -1,6 +1,9 @@
 name: CharaChorder
 description: CharaChorder specific actions
 actions:
+  0:
+    id: "NO_ACTION"
+    display: "No Action"
   528:
     id: "RESTART"
     title: Restart Device
@@ -58,6 +61,7 @@ actions:
   544:
     variantOf: 36
     id: "SPACERIGHT"
+    display: " "
     title: Right Spacebar (eg CC Lite)
     icon: space_bar
     variant: right
@@ -66,6 +70,9 @@ actions:
     title: Primary Keymap
     icon: counter_1
     variant: left
+    description: |
+      Acts as a toggle if the same action is not assigned
+      to the target layer
   549:
     variantOf: 548
     <<: *primary_keymap
@@ -76,6 +83,9 @@ actions:
     title: Numeric Layer
     icon: counter_2
     variant: left
+    description: |
+      Acts as a toggle if the same action is not assigned
+      to the target layer
   551:
     variantOf: 550
     <<: *secondary_keymap
@@ -86,11 +96,31 @@ actions:
     title: Function Layer
     icon: counter_3
     variant: left
+    description: |
+      Acts as a toggle if the same action is not assigned
+      to the target layer
   553:
     variationOf: 552
     <<: *tertiary_keymap
     id: "KM_3_R"
     variant: right
+  558:
+    id: HOLD_COMPOUND
+    title: Dynamic Library
+    icon: layers
+    description: |
+      Allows for the activation & creation of dynamic chord libraries.
+      When included as part of a chord output,
+      that chord's input becomes the seed for a dynamic chord library,
+      and that library is activated.
+      Any new chords created while a dynamic library is active are established one level above its seed.
+  559:
+    id: RELEASE_COMPOUND
+    title: Base Library
+    icon: layers_clear
+    description: |
+      Re-activates your base chord library,
+      and deactivates any currently active dynamic chord library.
   576:
     id: ACTION_DELAY_1000
     icon: clock_loader_90

src/lib/assets/keymaps/scancode.yml

@@ -422,8 +422,8 @@ actions:
     title: Keyboard Non-US \ and | (US English)
   357:
     id: "COMPOSE"
+    icon: menu
     title: Keyboard Application
-    description: Officially supported by Win, Unix, and Boot
   358:
     id: "POWER"
     keyCode: "Power"
@@ -944,99 +944,99 @@ actions:
     title: Keyboard Right GUI
   488:
     id: "KSC_E8"
+    icon: play_pause
     keyCode: "MediaPlayPause"
     title: Media Play Pause
-    description: Not required to be supported by any OS. Possibly deprecated.
   489:
     id: "KSC_E9"
+    icon: stop
     keyCode: "MediaStop"
     title: Media Stop CD
-    description: Not required to be supported by any OS. Possibly deprecated.
   490:
     id: "KSC_EA"
+    icon: skip_previous
     keyCode: "MediaTrackPrevious"
     title: Media Previous Song
-    description: Not required to be supported by any OS. Possibly deprecated.
   491:
     id: "KSC_EB"
+    icon: skip_next
     keyCode: "MediaTrackNext"
     title: Media Next Song
-    description: Not required to be supported by any OS. Possibly deprecated.
   492:
     id: "KSC_EC"
+    icon: eject
     keyCode: "Eject"
     title: Media Eject CD
-    description: Not required to be supported by any OS. Possibly deprecated.
+    description: MacOS only
   493:
     id: "KSC_ED"
+    icon: volume_up
     keyCode: "AudioVolumeUp"
     title: Media Volume Up
-    description: Not required to be supported by any OS. Possibly deprecated.
   494:
     id: "KSC_EE"
+    icon: volume_down
     keyCode: "AudioVolumeDown"
     title: Media Volume Down
-    description: Not required to be supported by any OS. Possibly deprecated.
   495:
     id: "KSC_EF"
+    icon: volume_off
     keyCode: "AudioVolumeMute"
     title: Media Mute
-    description: Not required to be supported by any OS. Possibly deprecated.
   496:
     id: "KSC_F0"
-    title: Media www
-    description: Not required to be supported by any OS. Possibly deprecated.
+    icon: language
+    title: Media Browser
   497:
     id: "KSC_F1"
     keyCode: "BrowserBack"
-    title: Media Back
-    description: Not required to be supported by any OS. Possibly deprecated.
+    title: Media Browser Back
   498:
     id: "KSC_F2"
     keyCode: "BrowserForward"
-    title: Media Forward
-    description: Not required to be supported by any OS. Possibly deprecated.
+    title: Media Browser Forward
   499:
     id: "KSC_F3"
     keyCode: "BrowserStop"
-    title: Media Stop
-    description: Not required to be supported by any OS. Possibly deprecated.
+    title: Media Browser Stop
+    description: Not supported on MacOS
   500:
     id: "KSC_F4"
+    icon: search
     keyCode: "BrowserSearch"
-    title: Media Find
-    description: Not required to be supported by any OS. Possibly deprecated.
+    title: Media Browser Search
   501:
     id: "KSC_F5"
-    title: Media Scroll Up
-    description: Not required to be supported by any OS. Possibly deprecated.
+    icon: brightness_high
+    title: Media Brightness Up
   502:
     id: "KSC_F6"
-    title: Media Scroll Down
-    description: Not required to be supported by any OS. Possibly deprecated.
+    icon: brightness_low
+    title: Media Brightness Down
   503:
     id: "KSC_F7"
     title: Media Edit
     description: Not required to be supported by any OS. Possibly deprecated.
   504:
     id: "KSC_F8"
+    icon: bedtime
     keyCode: "Sleep"
-    title: Media Sleep
+    title: Media System Sleep
     description: Not required to be supported by any OS. Possibly deprecated.
   505:
     id: "KSC_F9"
+    icon: routine
     keyCode: "WakeUp"
-    title: Media Coffee
-    description: Not required to be supported by any OS. Possibly deprecated.
+    title: Media System Wake
+    description: Not supported on Windows
   506:
     id: "KSC_FA"
     keyCode: "BrowserRefresh"
-    title: Media Refresh
-    description: Not required to be supported by any OS. Possibly deprecated.
+    title: Media Browser Refresh
   507:
     id: "KSC_FB"
-    title: Media Calc
-    description: Not required to be supported by any OS. Possibly deprecated.
+    title: Media Calculator
+    description: Not supported on MacOS
   508:
     id: "KSC_FC"
     description: Not required to be supported by any OS.

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 }

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 }

src/lib/assets/random-tips/en.json

@@ -17,7 +17,7 @@
   "You can use 'cursor warping' by adding arrow key actions to a chord, for example to chord '()' with the cursor in the middle of the brackets",
   "An arpeggiate is a single key press that modifies the preceding chord. Modifiers can be arpeggiated",
   "Some actions are marked as a 'macro', which means the output is generated by a key sequence rather than a pure key press. Be cautious with those, as they can affect other keys when held together!",
-  "Spurring is a chording only mode which is more advanced, but can greatly imporve typing speed when mastered",
+  "Spurring is a chording only mode which is more advanced, but can greatly improve typing speed when mastered",
   "The forced chord phenomenon is when typing a word character by character starts to feel unnatural",
   "Don't be afraid to delete chords you keep getting wrong",
   "Most people find it easier to start their chord library from scratch rather than learning someone else's",
@@ -32,5 +32,7 @@
   "You can use Nexus to track words you might want to add to your chord library",
   "The CC1 default layout was 80% science, 20% art",
   "There is little to no reason to use hjkl in VIM on a CC1 since the arrows keys are so close already",
-  "The device manager automatically creates a backup for you when you reboot your device into the bootloader"
+  "The device manager automatically creates a backup for you when you reboot your device into the bootloader",
+  "You can use \"compound\", \"macro\", \"suffix\" and \"cursor warp\" in the chord search to find specific types of chords",
+  "You can search for chord inputs by using a leading \"+\", for example \"+a +DUP\" will show all chords with inputs that contain both a and DUP"
 ]

src/lib/backup/backup.ts

@@ -96,7 +96,12 @@ export function restoreFromFile(
     case "backup": {
       const recent = file.history[0];
       if (!recent) return;
-      if (recent[1].device !== get(serialPort)?.device) {
+      let backupDevice = recent[1].device;
+      if (backupDevice === "TWO") backupDevice = "ONE";
+      let currentDevice = get(serialPort)?.device;
+      if (currentDevice === "TWO") currentDevice = "ONE";
+
+      if (backupDevice !== currentDevice) {
         alert("Backup is incompatible with this device");
         throw new Error("Backup is incompatible with this device");
       }

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

src/lib/charrecorder/CharRecorder.svelte

@@ -0,0 +1,140 @@
+<script lang="ts">
+  import { browser } from "$app/environment";
+  import { ReplayPlayer } from "./core/player.js";
+  import { ReplayStepper } from "./core/step.js";
+  import type { Replay } from "./core/types.js";
+  import { TextRenderer } from "./renderer/renderer.js";
+  import { setContext, type Snippet } from "svelte";
+
+  let {
+    replay,
+    cursor = false,
+    keys = false,
+    children,
+    ondone,
+  }: {
+    replay: ReplayPlayer | Replay;
+    cursor?: boolean;
+    keys?: boolean;
+    children?: Snippet;
+    ondone?: () => void;
+  } = $props();
+
+  let replayPlayer: ReplayPlayer | undefined = $state();
+  setContext("replay", {
+    get player() {
+      return replayPlayer;
+    },
+  });
+
+  let finalText = $derived(
+    replay instanceof ReplayPlayer
+      ? undefined
+      : new ReplayStepper(replay.keys).text.map((token) => token.text).join(""),
+  );
+
+  let svg: SVGSVGElement | undefined = $state();
+  let text: Text = (browser ? document.createTextNode("") : undefined)!;
+
+  let textRenderer: TextRenderer | undefined = $state();
+
+  $effect(() => {
+    if (!textRenderer) return;
+    textRenderer.showCursor = cursor;
+  });
+
+  $effect(() => {
+    if (!svg || !text) return;
+    const player =
+      replay instanceof ReplayPlayer ? replay : new ReplayPlayer(replay);
+    replayPlayer = player;
+
+    const renderer = new TextRenderer(svg.parentNode as HTMLElement, svg, text);
+    const apply = () => {
+      text.textContent =
+        finalText ??
+        (player.stepper.text.map((token) => token.text).join("") || "n");
+      renderer.text = player.stepper.text;
+      renderer.cursor = player.stepper.cursor;
+      if (keys) {
+        renderer.held = player.stepper.held;
+      }
+    };
+    const unsubscribePlayer = player.subscribe(apply);
+    textRenderer = renderer;
+
+    player.onDone = ondone;
+    player.start();
+    apply();
+    setTimeout(() => {
+      renderer.animated = true;
+    });
+    return () => {
+      unsubscribePlayer();
+      player?.destroy();
+    };
+  });
+
+  export function innerText(node: HTMLElement, text: Text) {
+    node.appendChild(text);
+    return {
+      destroy() {
+        text.remove();
+      },
+    };
+  }
+</script>
+
+{#key replay}
+  <svg bind:this={svg}></svg>
+  {#if browser}
+    <span use:innerText={text}></span>
+  {:else if !(replay instanceof ReplayPlayer)}
+    {finalText}
+  {/if}
+{/key}
+
+{#if children}
+  {@render children()}
+{/if}
+
+<style>
+  :global(*):has(svg) {
+    position: relative;
+  }
+
+  span {
+    opacity: 0;
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+  }
+
+  svg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    font-family: inherit;
+    font-size: inherit;
+    color: inherit;
+    user-select: none;
+  }
+
+  svg > :global(text) {
+    font-family: inherit;
+    font-size: inherit;
+    fill: currentColor;
+    dominant-baseline: middle;
+  }
+
+  svg > :global(text[incorrect]) {
+    fill: red;
+  }
+
+  svg > :global(rect) {
+    fill: currentcolor;
+  }
+
+  svg > :global(.animated) {
+    transition: transform 100ms ease;
+  }
+</style>

src/lib/charrecorder/ChordHud.svelte

@@ -0,0 +1,130 @@
+<script lang="ts">
+  import { fly, scale } from "svelte/transition";
+  import { KBD_ICONS } from "./renderer/kbd-icon.js";
+  import { expoOut } from "svelte/easing";
+  import type { InferredChord } from "./core/types.js";
+
+  let { chords }: { chords: InferredChord[] } = $props();
+
+  function getPercent(
+    deviation: number,
+    inputCount: number,
+    perfect: number,
+    fail: number,
+  ) {
+    const failAdjusted = fail * inputCount;
+    const perfectAdjusted = perfect * inputCount;
+    return Math.min(
+      1,
+      Math.max(
+        0,
+        Math.max(0, deviation - perfectAdjusted) /
+          (failAdjusted - perfectAdjusted),
+      ),
+    );
+  }
+
+  function getColor(percent: number, alpha = 1) {
+    return `hsl(${(1 - percent) * 120}deg 50% 50% / ${alpha})`;
+  }
+</script>
+
+<section>
+  {#each chords as { input, id, deviation }, i (id)}
+    {@const a = getPercent(deviation[0], input.length, 10, 25)}
+    {@const b = getPercent(deviation[1], input.length, 10, 18)}
+    {@const max = Math.max(a, b)}
+    <div
+      class="chord"
+      out:fly={{ x: -100 }}
+      style:translate="calc(-{(chords.length - i - 1) * 5}em - 50%) 0"
+      style:scale={1 - (chords.length - i) / 6}
+      style:opacity={1 - (chords.length - i - 1) / 6}
+      title="Press: {deviation[0]}ms, Release: {deviation[1]}ms"
+    >
+      <div
+        class="rating"
+        style:color={getColor(max)}
+        style:text-shadow="0 0 {Math.round((1 - max) * 10)}px {getColor(
+          max,
+          0.6,
+        )}"
+        in:scale={{
+          start: 1.5 + 1.2 * (1 - max),
+          easing: expoOut,
+          duration: 1000,
+        }}
+      >
+        {#if max === 1}
+          Close
+        {:else if max > 0.5}
+          Okay
+        {:else if max > 0}
+          Good
+        {:else}
+          Perfect
+        {/if}
+      </div>
+      <div
+        in:fly={{ y: 20, easing: expoOut, duration: 1000 }}
+        class="tile"
+        style:background="linear-gradient(to right, {getColor(a)}, {getColor(
+          b,
+        )})"
+      ></div>
+      <div in:fly={{ y: 60, easing: expoOut, duration: 1000 }}>
+        {#each input as token}
+          <kbd>{KBD_ICONS.get(token.code)}</kbd>
+        {/each}
+      </div>
+    </div>
+  {/each}
+</section>
+
+<style>
+  section {
+    position: relative;
+    margin: 1em;
+    margin-bottom: 0;
+    display: grid;
+    height: 3em;
+    font-size: 2em;
+  }
+
+  .rating {
+    font-weight: bold;
+    font-style: italic;
+    text-transform: uppercase;
+  }
+
+  .tile {
+    width: 100%;
+    height: 0.2em;
+    border-radius: 0.1em;
+  }
+
+  kbd {
+    font-size: 0.6em;
+  }
+
+  kbd + kbd {
+    margin-inline-start: 0.3em;
+  }
+
+  .chord {
+    will-change: transform, opacity, scale;
+    position: absolute;
+    top: 0;
+    left: 50%;
+    display: flex;
+    flex-direction: column;
+    margin-inline-end: 1em;
+    padding-inline: 0.1em;
+    justify-content: center;
+    align-items: center;
+    transition:
+      opacity 0.3s ease,
+      translate 0.3s ease,
+      scale 0.3s ease;
+  }
+</style>

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>

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>

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

src/lib/charrecorder/core/plugins/chords.ts

@@ -0,0 +1,112 @@
+import { ReplayPlayer, ROBOT_THRESHOLD } from "../player";
+import type {
+  StoreContract,
+  ReplayPlugin,
+  InferredChord,
+  TextToken,
+} from "../types";
+
+function isValid(human: TextToken[], robot: TextToken[]) {
+  return human.length > 1 && human.length <= 10 && robot.length > 0;
+}
+
+export class ChordsReplayPlugin
+  implements StoreContract<InferredChord[]>, ReplayPlugin
+{
+  private readonly subscribers = new Set<(value: InferredChord[]) => void>();
+
+  private readonly chords: InferredChord[] = [];
+
+  private tokens: TextToken[] = [];
+
+  private timeout: Parameters<typeof clearTimeout>[0] = NaN;
+
+  private infer(human: TextToken[], robo: TextToken[]) {
+    const output = robo
+      .filter((token) => token.text.length === 1)
+      .map((token) => token.text)
+      .join("");
+    this.chords.push({
+      id: human.reduce((acc, curr) => Math.max(acc, curr.stamp), 0),
+      input: human,
+      output,
+      deviation: [
+        human.reduce((acc, curr) => Math.max(acc, curr.stamp), 0) -
+          human.reduce((acc, curr) => Math.min(acc, curr.stamp), Infinity),
+        human.reduce(
+          (acc, curr) => Math.max(acc, curr.stamp + (curr.duration ?? 0)),
+          0,
+        ) -
+          human.reduce(
+            (acc, curr) => Math.min(acc, curr.stamp + (curr.duration ?? 0)),
+            Infinity,
+          ),
+      ],
+    });
+
+    for (const subscription of this.subscribers) {
+      subscription(this.chords);
+    }
+  }
+
+  register(replay: ReplayPlayer) {
+    replay.subscribe((token) => {
+      if (token) {
+        this.tokens.push(token);
+      }
+
+      let last = NaN;
+      let roboStart = NaN;
+      let roboEnd = NaN;
+      for (let i = 0; i < this.tokens.length; i++) {
+        const token = this.tokens[i]!;
+        if (!token.duration || !token.source) break;
+
+        if (
+          Number.isNaN(roboStart) &&
+          token.source === "human" &&
+          token.stamp > last
+        ) {
+          this.tokens = [];
+        }
+
+        if (Number.isNaN(last) || token.stamp + token.duration > last) {
+          last = token.stamp + token.duration;
+        }
+
+        if (Number.isNaN(roboStart) && token.source === "robot") {
+          roboStart = i;
+        } else if (!Number.isNaN(roboStart) && token.source === "human") {
+          roboEnd = i;
+          const human = this.tokens.splice(0, roboStart);
+          const robot = this.tokens.splice(0, roboEnd - roboStart);
+          if (isValid(human, robot)) {
+            this.infer(human, robot);
+          }
+        }
+      }
+      console.log(this.tokens);
+
+      clearTimeout(this.timeout);
+      if (replay.stepper.held.size === 0) {
+        this.timeout = setTimeout(() => {
+          if (this.tokens.length > 0) {
+            const human = this.tokens.splice(
+              0,
+              this.tokens.findIndex((it) => it.source === "robot"),
+            );
+            const robot = this.tokens.splice(0, this.tokens.length);
+            if (isValid(human, robot)) {
+              this.infer(human, robot);
+            }
+          }
+        }, ROBOT_THRESHOLD);
+      }
+    });
+  }
+
+  subscribe(subscription: (value: InferredChord[]) => void) {
+    this.subscribers.add(subscription);
+    return () => this.subscribers.delete(subscription);
+  }
+}

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

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

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

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]),
+    };
+  }
+}

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;
+  }
+}

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;
+}

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"],
+]);

src/lib/charrecorder/renderer/renderer.ts

@@ -0,0 +1,287 @@
+import type { TextToken } from "../core/types";
+import { KBD_ICONS } from "./kbd-icon";
+
+export class TextRenderer {
+  shinyChords = true;
+
+  shiny: number[] | undefined;
+
+  readonly cursorNode: SVGRectElement;
+
+  private readonly nodes = new Map<TextToken, SVGTextElement>();
+
+  private readonly heldNodes = new Map<string, SVGTextElement>();
+
+  private readonly occupiedHeld: Array<boolean | undefined> = [];
+
+  private readonly occupied: number[] = [];
+
+  animationOptions: KeyframeAnimationOptions = {
+    duration: 100,
+    easing: "ease",
+  };
+
+  heldKeySize = 0.8;
+
+  ghostText = "";
+
+  constructor(
+    readonly node: HTMLElement,
+    readonly svg: SVGSVGElement,
+    readonly textNode: Text,
+  ) {
+    this.cursorNode = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "rect",
+    );
+    this.cursorNode.setAttribute("x", "0");
+    this.cursorNode.setAttribute("y", "0");
+    this.svg.appendChild(this.cursorNode);
+  }
+
+  set showCursor(value: boolean) {
+    this.cursorNode.style.visibility = value ? "visible" : "hidden";
+  }
+
+  getAtRange(i: number): [number, number] {
+    const range = document.createRange();
+    const rangeIndex = Math.max(0, Math.min(i, this.textNode.length - 1));
+    range.setStart(this.textNode, rangeIndex);
+    range.setEnd(
+      this.textNode,
+      this.textNode.length === 0 ? 0 : rangeIndex + 1,
+    );
+    const charBounds = range.getBoundingClientRect();
+    return [
+      i > this.textNode.length - 1
+        ? charBounds.x + charBounds.width
+        : charBounds.x,
+      charBounds.y + charBounds.height / 2 + 1,
+    ];
+  }
+
+  set held(keys: Map<string, boolean>) {
+    const prev = new Set(this.heldNodes.keys());
+    const fontSize = getComputedStyle(this.node).fontSize;
+
+    for (const [code, isHuman] of keys) {
+      if (!isHuman) continue;
+      prev.delete(code);
+      let node = this.heldNodes.get(code);
+      if (!node) {
+        let i = this.occupiedHeld.findIndex((it) => it === undefined);
+        if (i === -1) {
+          i = this.occupiedHeld.length;
+          this.occupiedHeld.push(true);
+        } else {
+          this.occupiedHeld[i] = true;
+        }
+        node = document.createElementNS("http://www.w3.org/2000/svg", "text");
+        node.textContent = KBD_ICONS.get(code) ?? null;
+        node.setAttribute("i", i.toString());
+        this.heldNodes.set(code, node);
+        node.style.transform = `${this.cursorNode.style.transform} translateY(calc(${fontSize} * ${
+          i + 1.5
+        }))`;
+        node.style.fontSize = `calc(${fontSize} * ${this.heldKeySize})`;
+        this.svg.appendChild(node);
+        node
+          .animate(
+            [
+              {
+                transform: `translateY(calc(-${fontSize} * ${this.heldNodes.size})) scale(0)`,
+              },
+              { transform: "translateY(0px) scale(1)" },
+            ],
+            { duration: 200, composite: "add", easing: "ease-out" },
+          )
+          .play();
+      }
+    }
+
+    for (const code of prev) {
+      const node = this.heldNodes.get(code);
+      if (!node) continue;
+      this.heldNodes.delete(code);
+
+      this.occupiedHeld[Number(node.getAttribute("i"))] = undefined;
+      node
+        .animate(
+          [
+            { transform: "translateX(0px)" },
+            { transform: "translateX(-10px)" },
+          ],
+          {
+            duration: 500,
+            composite: "accumulate",
+            easing: "ease-in",
+          },
+        )
+        .play();
+      const animation = node.animate([{ opacity: 1 }, { opacity: 0 }], {
+        duration: 500,
+        easing: "ease-in",
+      });
+      animation.onfinish = () => {
+        node.remove();
+      };
+      animation.play();
+    }
+  }
+
+  get animated(): boolean {
+    return this.cursorNode.classList.contains("animated");
+  }
+
+  set animated(value: boolean) {
+    if (value) {
+      this.cursorNode.classList.add("animated");
+    } else {
+      this.cursorNode.classList.remove("animated");
+    }
+  }
+
+  set cursor(cursor: number) {
+    const bounds = this.node.getBoundingClientRect();
+    const style = getComputedStyle(this.node);
+
+    const pos = this.getAtRange(cursor);
+    const x = pos[0] - bounds.x;
+    const y = pos[1] - bounds.y;
+
+    this.cursorNode.setAttribute("height", style.fontSize);
+    this.cursorNode.setAttribute("width", "1");
+
+    this.cursorNode.style.transform = `translate(${x}px, calc(${y}px - ${style.fontSize} / 2))`;
+  }
+
+  set text(text: TextToken[]) {
+    const prev = new Set(this.nodes.keys());
+
+    const bounds = this.node.getBoundingClientRect();
+
+    this.svg.setAttribute("width", bounds.width.toFixed(2));
+    this.svg.setAttribute("height", bounds.height.toFixed(2));
+    this.svg.setAttribute(
+      "viewBox",
+      `0 0 ${bounds.width.toFixed(2)} ${bounds.height.toFixed(2)}`,
+    );
+
+    text.forEach((token, i) => {
+      prev.delete(token);
+      let node = this.nodes.get(token);
+
+      const pos = this.getAtRange(i);
+      const x = pos[0] - bounds.x;
+      const y = pos[1] - bounds.y;
+      const xStr = x.toFixed(2);
+      const yStr = y.toFixed(2);
+
+      if (!node) {
+        node = document.createElementNS("http://www.w3.org/2000/svg", "text");
+        this.nodes.set(token, node);
+        this.svg.appendChild(node);
+        node.setAttribute("x", xStr);
+        node.setAttribute("y", yStr);
+        node.setAttribute("i", i.toString());
+        if (token.source === "ghost") {
+          node.setAttribute("opacity", "0.5");
+        }
+        this.occupied[i] ??= 0;
+        if (this.animated) {
+          if (this.occupied[i] > 0) {
+            node
+              .animate([{ opacity: 0 }, { opacity: 1 }], {
+                ...this.animationOptions,
+                easing: "ease-out",
+              })
+              .play();
+          } else {
+            node
+              .animate(
+                [
+                  { opacity: 0, transform: "translateY(10px)" },
+                  { opacity: 1, transform: "translateY(0px)" },
+                ],
+                { ...this.animationOptions, easing: "ease-out" },
+              )
+              .play();
+          }
+        }
+        this.occupied[i]++;
+      }
+
+      if (!token.correct) {
+        node.setAttribute("incorrect", "");
+      } else {
+        node.removeAttribute("incorrect");
+      }
+
+      const prevX = node.getAttribute("x");
+      if (prevX && prevX !== xStr) {
+        const prev = parseFloat(prevX);
+        node.setAttribute("x", xStr);
+        /*if (this.animated) {
+					node.animate(
+						[{ transform: `translateX(${prev - x}px)` }, { transform: `translateX(0px)` }],
+						this.animationOptions
+					);
+				}*/
+      }
+      const prevY = node.getAttribute("y");
+      if (prevY && prevY !== yStr) {
+        const prev = parseFloat(prevY);
+        node.setAttribute("y", yStr);
+        /*if (this.animated) {
+					node.animate(
+						[{ transform: `translateY(${prev - y}px)` }, { transform: `translateY(0px)` }],
+						this.animationOptions
+					);
+				}*/
+      }
+      if (node.textContent !== token.text) {
+        node.textContent = token.text;
+      }
+    });
+
+    for (const token of prev) {
+      const node = this.nodes.get(token)!;
+      const i = parseInt(node.getAttribute("i")!);
+      this.nodes.delete(token);
+      if (this.animated) {
+        const animation = node.animate(
+          [{ opacity: 1 }, { opacity: 0 }],
+          this.animationOptions,
+        );
+        setTimeout(() => {
+          if (this.occupied[i] === 1) {
+            node
+              .animate(
+                [
+                  { transform: "translateY(0px)" },
+                  { transform: "translateY(10px)" },
+                ],
+                this.animationOptions,
+              )
+              .play();
+          }
+        }, 10);
+        animation.onfinish = () => {
+          node.remove();
+          this.occupied[i]!--;
+        };
+        animation.play();
+      } else {
+        node.remove();
+        this.occupied[i]!--;
+      }
+    }
+  }
+
+  private isShiny(char: TextToken, index: number) {
+    return (
+      this.shiny?.includes(index) ||
+      (this.shinyChords && char.source === "robot")
+    );
+  }
+}

src/lib/chat/MatrixRoomMembers.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  import type { RoomMember } from "matrix-js-sdk";
+  import { matrixClient, memberColor } from "./chat";
+  import { theme } from "$lib/preferences";
+  import { hexFromArgb } from "@material/material-color-utilities";
+
+  let { members }: { members: RoomMember[] } = $props();
+</script>
+
+<div class="member-list">
+  {#each members as member (member.userId)}
+    {@const avatar = member.getMxcAvatarUrl()}
+    <div class="member">
+      {#if avatar}
+        <img
+          class="avatar"
+          src={$matrixClient.mxcUrlToHttp(avatar, 32, 32)}
+          alt={member.name}
+          width="32"
+          height="32"
+        />
+      {:else}
+        {@const color = memberColor(member, $theme)}
+        {@const modeColor = $theme.mode === "dark" ? color.dark : color.light}
+        <div
+          style:background={hexFromArgb(modeColor.color)}
+          style:color={hexFromArgb(modeColor.onColor)}
+          class="avatar avatar-placeholder icon"
+        >
+          person
+        </div>
+      {/if}
+      <span>{member.name}</span>
+    </div>
+  {/each}
+</div>
+
+<style lang="scss">
+  .avatar {
+    border-radius: 50%;
+    width: 32px;
+    height: 32px;
+    flex-shrink: 0;
+  }
+
+  .avatar-placeholder {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 24px;
+  }
+
+  .member {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .member-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 8px;
+    overflow-y: auto;
+    height: 100%;
+  }
+
+  span {
+    word-break: break-all;
+  }
+</style>

src/lib/chat/MatrixTimeline.svelte

@@ -0,0 +1,251 @@
+<script lang="ts">
+  import type {
+    EventTimeline,
+    MatrixEvent,
+    MsgType,
+    Room,
+    RoomEvent,
+    RoomMember,
+    RoomMemberEvent,
+  } from "matrix-js-sdk";
+  import { onDestroy, onMount, tick } from "svelte";
+  import { matrixClient } from "./chat";
+  import MatrixEventComponent from "./events/MatrixEvent.svelte";
+  import CharRecorder from "$lib/charrecorder/CharRecorder.svelte";
+  import { ReplayRecorder } from "$lib/charrecorder/core/recorder";
+  import { type Socket, io } from "socket.io-client";
+  import { SvelteMap } from "svelte/reactivity";
+
+  let { timeline }: { timeline: EventTimeline } = $props();
+
+  const excludeEvents = ["m.reaction", "m.room.redaction"];
+
+  let events = $state(
+    timeline
+      .getEvents()
+      .filter((it) => !excludeEvents.includes(it.getType()))
+      .reverse(),
+  );
+
+  let recorder = $state(new ReplayRecorder());
+  let showCursor = $state(false);
+
+  let timelineElement: HTMLElement = $state()!;
+
+  async function onTimeline(
+    event: MatrixEvent,
+    room?: Room,
+    toStartOfTimeline?: boolean,
+  ) {
+    if (room?.roomId !== timeline.getRoomId()) return;
+    const sender = event.getSender();
+    if (sender) {
+      live.delete(sender);
+    }
+    if (excludeEvents.includes(event.getType())) return;
+    if (toStartOfTimeline) {
+      events.push(event);
+    } else {
+      const needScroll = timelineElement.scrollTop < 20;
+      events.unshift(event);
+      if (needScroll) {
+        await tick();
+        timelineElement.scroll({
+          top: 0,
+          behavior: "smooth",
+        });
+      }
+    }
+  }
+
+  let typing = $state<string[]>([]);
+
+  function onTyping(event: MatrixEvent, member: RoomMember) {
+    typing = event.event.content?.["user_ids"] ?? [];
+  }
+
+  async function send() {
+    const roomId = timeline.getRoomId();
+    if (!roomId) return;
+    const finalText = recorder.player.stepper.text
+      .map((token) => token.text)
+      .join("");
+    const finalRecording = recorder.finish();
+    if (!finalText) return;
+    recorder = new ReplayRecorder();
+    await $matrixClient.sendMessage(roomId, {
+      msgtype: "m.text" as MsgType.Text,
+      body: finalText,
+      // @ts-expect-error
+      "m.replay": finalRecording,
+    });
+  }
+
+  function onKey(event: KeyboardEvent) {
+    if (event.type === "keyup" && event.key === "Enter" && !event.shiftKey) {
+      send();
+      return;
+    } else {
+      recorder.next(event);
+    }
+
+    if (event.type === "keyup" && recorder.player.stepper.text.length === 0) {
+      recorder = new ReplayRecorder();
+    } else {
+      socket.emit("message", {
+        timeStamp: event.timeStamp,
+        type: event.type,
+        key: event.key,
+        code: event.code,
+        username: $matrixClient.getUserId(),
+      });
+    }
+  }
+
+  let socket: Socket = $state()!;
+  let live = new SvelteMap<string, ReplayRecorder>();
+
+  onMount(() => {
+    socket = io("https://srv.charachorder.io");
+    socket.emit("join", timeline.getRoomId());
+
+    socket.on("message", async ({ message }) => {
+      let userRecorder = live.get(message.username);
+      if (!userRecorder) {
+        userRecorder = new ReplayRecorder();
+        live.set(message.username, userRecorder);
+      }
+
+      await tick();
+
+      userRecorder.next(message);
+
+      if (userRecorder.player.stepper.text.length === 0) {
+        live.delete(message.username);
+      }
+    });
+
+    $matrixClient.on("Room.timeline" as RoomEvent.Timeline, onTimeline);
+    $matrixClient.on("RoomMember.typing" as RoomMemberEvent.Typing, onTyping);
+  });
+
+  onDestroy(() => {
+    socket?.disconnect();
+    $matrixClient.off("Room.timeline" as RoomEvent.Timeline, onTimeline);
+    $matrixClient.off("RoomMember.typing" as RoomMemberEvent.Typing, onTyping);
+  });
+</script>
+
+<section>
+  <div bind:this={timelineElement} class="timeline">
+    {#each live.entries() as [userId, recorder] (userId)}
+      {@const roomId = timeline.getRoomId()}
+      {#if roomId}
+        {@const room = $matrixClient.getRoom(roomId)}
+        {@const member = room?.getMember(userId)}
+        {#if member}
+          <MatrixEventComponent sender={member} replay={recorder.player} />
+        {/if}
+      {/if}
+    {/each}
+    {#each events as event, i (event.event["event_id"])}
+      {@const prev = events[i + 1]}
+      <MatrixEventComponent {event} sender={event.sender} {prev} {timeline} />
+    {/each}
+  </div>
+
+  <div class="static-elements">
+    <div class="indicators"></div>
+    <div class="input-box">
+      <button class="icon">add</button>
+      <div
+        role="textbox"
+        tabindex="0"
+        class="input"
+        onkeydown={onKey}
+        onkeyup={onKey}
+        onfocusin={() => (showCursor = true)}
+        onfocusout={() => (showCursor = false)}
+      >
+        <CharRecorder replay={recorder.player} cursor={showCursor} />
+      </div>
+      <button class="icon" onclick={send}>send</button>
+    </div>
+  </div>
+</section>
+
+<style lang="scss">
+  $border-radius: 16px;
+
+  h2 {
+    height: min-content;
+  }
+
+  .input {
+    border: 1px solid var(--md-sys-color-outline);
+    flex-grow: 1;
+    cursor: text;
+    padding: 0.5em;
+    font-size: 1rem;
+    border-radius: $border-radius;
+
+    text-wrap: wrap;
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+    word-break: break-word;
+
+    &:focus-visible {
+      outline: none;
+    }
+  }
+
+  .input-box {
+    display: flex;
+    gap: 4px;
+    padding-block: 8px;
+    flex-shrink: 0;
+    width: 100%;
+  }
+
+  .static-elements {
+    position: relative;
+    width: 100%;
+  }
+
+  .timeline {
+    contain: content;
+    height: auto;
+    display: flex;
+    flex-direction: column-reverse;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    flex-grow: 1;
+    width: 100%;
+  }
+
+  .back-to-present {
+    position: fixed;
+    bottom: 0;
+  }
+
+  .scroll-controls {
+    position: sticky;
+    bottom: 0;
+    min-height: 16px;
+    background: linear-gradient(
+      to bottom,
+      transparent,
+      var(--md-sys-color-background)
+    );
+  }
+
+  section {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    justify-content: flex-end;
+
+    width: 100%;
+    height: 100%;
+  }
+</style>

src/lib/chat/chat.ts

@@ -0,0 +1,109 @@
+import { derived, writable, type Writable } from "svelte/store";
+import type {
+  ClientEvent,
+  LoginResponse,
+  MatrixClient,
+  RoomMember,
+} from "matrix-js-sdk";
+import { persistentWritable } from "$lib/storage";
+import {
+  themeFromSourceColor,
+  argbFromHex,
+  type CustomColorGroup,
+} from "@material/material-color-utilities";
+import type { UserTheme } from "$lib/preferences";
+import { MatrixRx } from "./matrix-rx/client";
+
+export const matrixClient: Writable<MatrixClient> = writable();
+
+export const isLoggedIn: Writable<boolean> = writable(false);
+
+export const matrix = derived(
+  [matrixClient, isLoggedIn],
+  ([matrixClient, isLoggedIn]) =>
+    isLoggedIn ? new MatrixRx(matrixClient) : undefined,
+);
+
+export const currentRoomId = persistentWritable<string | null>(
+  "currentRoomId",
+  null,
+);
+
+function getStoredLogin(): LoginResponse | undefined {
+  try {
+    return JSON.parse(localStorage.getItem("matrix-login")!);
+  } catch {
+    return undefined;
+  }
+}
+
+export function storeLogin(response: LoginResponse) {
+  localStorage.setItem("matrix-login", JSON.stringify(response));
+}
+
+export async function initMatrixClient() {
+  const { createClient, IndexedDBStore, IndexedDBCryptoStore } = await import(
+    "matrix-js-sdk"
+  );
+
+  const storedLogin = getStoredLogin();
+
+  const store = new IndexedDBStore({
+    dbName: "matrix",
+    indexedDB: window.indexedDB,
+  });
+  const cryptoStore = new IndexedDBCryptoStore(
+    window.indexedDB,
+    "matrix-crypto",
+  );
+
+  const client = createClient({
+    baseUrl: import.meta.env.VITE_MATRIX_URL,
+    userId: storedLogin?.user_id,
+    accessToken: storedLogin?.access_token,
+    timelineSupport: true,
+    store,
+    cryptoStore,
+  });
+
+  console.log("store");
+  await store.startup();
+  console.log("cryptoStore");
+  await cryptoStore.startup();
+  console.log("client");
+  await client.startClient();
+  client.once("sync" as ClientEvent.Sync, () => {
+    isLoggedIn.set(client.isLoggedIn());
+  });
+
+  const loginToken = new URLSearchParams(window.location.search).get(
+    "loginToken",
+  );
+  if (loginToken) {
+    storeLogin(await client.loginWithToken(loginToken));
+    window.history.replaceState({}, document.title, window.location.pathname);
+    isLoggedIn.set(client.isLoggedIn());
+  }
+
+  matrixClient.set(client);
+  console.log("done");
+}
+
+export function memberColor(
+  member: RoomMember,
+  theme: UserTheme,
+): CustomColorGroup {
+  let hash = 0;
+  member.userId.split("").forEach((char) => {
+    hash = char.charCodeAt(0) + ((hash << 5) - hash);
+  });
+  let color = "#";
+  for (let i = 0; i < 3; i++) {
+    const value = (hash >> (i * 8)) & 0xff;
+    color += value.toString(16).padStart(2, "0");
+  }
+
+  return themeFromSourceColor(argbFromHex(theme.color), [
+    { value: argbFromHex(color), name: "member", blend: true },
+  ]).customColors.find((c) => c.color.name === "member")!;
+}

src/lib/chat/events/MatrixEvent.svelte

@@ -0,0 +1,357 @@
+<script lang="ts">
+  import type {
+    EventTimeline,
+    MatrixEvent,
+    MatrixEventEvent,
+    Relations,
+    RelationsEvent,
+    RoomMember,
+  } from "matrix-js-sdk";
+  import MatrixMessageEvent from "./MatrixMessageEvent.svelte";
+  import { matrixClient, memberColor } from "../chat";
+  import { theme } from "$lib/preferences";
+  import { hexFromArgb } from "@material/material-color-utilities";
+  import { fade } from "svelte/transition";
+  import type { Replay } from "$lib/charrecorder/core/types";
+  import CharRecorder from "$lib/charrecorder/CharRecorder.svelte";
+  import type { ReplayPlayer } from "$lib/charrecorder/core/player";
+  import { onDestroy, onMount } from "svelte";
+  import { writable } from "svelte/store";
+
+  let {
+    event,
+    prev,
+    sender,
+    replay: replayPlayer,
+    timeline,
+  }: {
+    event?: MatrixEvent;
+    prev?: MatrixEvent;
+    sender?: RoomMember | null;
+    replay?: Replay | ReplayPlayer;
+    timeline?: EventTimeline;
+  } = $props();
+
+  let toolbarHover = $state(false);
+  let mainHover = $state(false);
+
+  let hover = $derived(toolbarHover || mainHover);
+
+  let replay: Replay | undefined = $state();
+
+  let reactions: Relations | undefined = $state(
+    timeline && event?.event.event_id
+      ? timeline
+          .getTimelineSet()
+          .relations.getChildEventsForEvent(
+            event.event.event_id,
+            "m.annotation",
+            "m.reaction",
+          )
+      : undefined,
+  );
+  let annotations = writable<[string, Set<MatrixEvent>][] | null | undefined>();
+
+  function createRelations() {
+    if (!timeline || !event?.event.event_id) return;
+    reactions?.off("Relations.add" as RelationsEvent.Add, createRelations);
+    reactions?.off(
+      "Relations.remove" as RelationsEvent.Remove,
+      createRelations,
+    );
+    reactions = timeline
+      .getTimelineSet()
+      .relations.getChildEventsForEvent(
+        event.event.event_id,
+        "m.annotation",
+        "m.reaction",
+      );
+    reactions?.on("Relations.add" as RelationsEvent.Add, createRelations);
+    reactions?.on("Relations.remove" as RelationsEvent.Remove, createRelations);
+    reactions?.on(
+      "Relations.redaction" as RelationsEvent.Redaction,
+      createRelations,
+    );
+    annotations.set(
+      reactions?.getSortedAnnotationsByKey()?.filter(([, it]) => it.size > 0),
+    );
+    console.log("create");
+  }
+
+  onMount(() => {
+    createRelations();
+    event?.on(
+      "Event.relationsCreated" as MatrixEventEvent.RelationsCreated,
+      createRelations,
+    );
+  });
+
+  onDestroy(() => {
+    event?.off(
+      "Event.relationsCreated" as MatrixEventEvent.RelationsCreated,
+      createRelations,
+    );
+    reactions?.off("Relations.add" as RelationsEvent.Remove, createRelations);
+    reactions?.off(
+      "Relations.remove" as RelationsEvent.Remove,
+      createRelations,
+    );
+    reactions?.off(
+      "Relations.redaction" as RelationsEvent.Redaction,
+      createRelations,
+    );
+  });
+</script>
+
+<div
+  class="event"
+  role="log"
+  onmouseover={() => (mainHover = true)}
+  onfocus={() => (mainHover = true)}
+  onmouseout={() => (mainHover = false)}
+  onblur={() => (mainHover = false)}
+>
+  {#if event && hover}
+    <div class="backdrop" transition:fade={{ duration: 100 }}></div>
+  {/if}
+
+  {#if sender && !(prev && prev?.getType() === event?.getType() && prev.sender?.userId === event.sender?.userId)}
+    {@const color = memberColor(sender, $theme)}
+    {@const avatarMxc = sender.getMxcAvatarUrl()}
+    {#if avatarMxc}
+      {@const avatar = $matrixClient.mxcUrlToHttp(avatarMxc, 32, 32)}
+      <img
+        class="avatar"
+        src={avatar}
+        alt={sender.name}
+        width="32"
+        height="32"
+      />
+    {:else}
+      <div
+        class="avatar avatar-placeholder icon"
+        style:background={hexFromArgb(
+          $theme.mode === "dark" ? color.dark.color : color.light.color,
+        )}
+        style:color={hexFromArgb(
+          $theme.mode === "dark" ? color.dark.onColor : color.light.onColor,
+        )}
+      >
+        person
+      </div>
+    {/if}
+
+    <div
+      class="sender"
+      style:color={hexFromArgb(
+        $theme.mode === "dark" ? color.dark.color : color.light.color,
+      )}
+    >
+      <strong>{sender.name}</strong>
+      {#if replay || replayPlayer}
+        <div class="dots">
+          {#each new Array(3) as _, i}
+            <div
+              style:animation-delay={i * 0.2 + "s"}
+              style:background={hexFromArgb(
+                $theme.mode === "dark" ? color.dark.color : color.light.color,
+              )}
+              class="dot"
+            ></div>
+          {/each}
+        </div>
+      {/if}
+    </div>
+  {/if}
+
+  <div class="content">
+    {#if event}
+      {#if event.getType() === "m.room.message"}
+        <MatrixMessageEvent {event} bind:replay />
+      {:else}
+        <details>
+          <summary>{event.getType()}</summary>
+          <pre>{JSON.stringify(event.event, null, 2)}</pre>
+        </details>
+      {/if}
+    {/if}
+    {#if replayPlayer}
+      <CharRecorder replay={replayPlayer} cursor={true} keys={true} />
+    {/if}
+  </div>
+
+  {#if event && hover}
+    <div
+      role="toolbar"
+      tabindex="0"
+      class="toolbar"
+      transition:fade={{ duration: 100 }}
+      onmouseover={() => (toolbarHover = true)}
+      onfocus={() => (toolbarHover = true)}
+      onmouseout={() => (toolbarHover = false)}
+      onblur={() => (toolbarHover = false)}
+    >
+      <button class="icon">add_reaction</button>
+      <button class="icon">reply</button>
+      {#if event.event.content?.["m.replay"]}
+        {#if replay}
+          <button class="icon" onclick={() => (replay = undefined)}>stop</button
+          >
+        {:else}
+          <button
+            class="icon"
+            onclick={() => (replay = event.event.content?.["m.replay"])}
+            >replay</button
+          >
+        {/if}
+      {/if}
+      <button class="icon">more_horiz</button>
+    </div>
+  {/if}
+
+  {#if $annotations && $annotations.length > 0}
+    <div class="reactions">
+      {#each $annotations as [reaction, events]}
+        <button class="reaction"
+          >{reaction} <span class="count">{events.size}</span></button
+        >
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style lang="scss">
+  details {
+    opacity: 0.5;
+    word-wrap: break-word;
+  }
+
+  pre {
+    text-wrap: wrap;
+    word-wrap: break-word;
+  }
+
+  .toolbar {
+    position: absolute;
+    top: -26px;
+    right: 0;
+    background: var(--md-sys-color-secondary-container);
+    color: var(--md-sys-color-on-secondary-container);
+    padding: 4px;
+    border-radius: 4px;
+    display: flex;
+    z-index: 100;
+
+    button {
+      font-size: 16px;
+      width: 24px;
+      height: 24px;
+    }
+  }
+
+  .dots {
+    display: flex;
+    gap: 2px;
+  }
+
+  @keyframes bounce {
+    0%,
+    100% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(-4px);
+    }
+  }
+
+  .dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    animation: bounce 1s infinite;
+  }
+
+  .sender,
+  .avatar {
+    margin-block: 2px 4px;
+  }
+
+  .avatar {
+    grid-area: avatar;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    translate: 0 2px;
+  }
+
+  div.avatar {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .sender {
+    display: flex;
+    grid-area: sender;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .reactions {
+    grid-area: reactions;
+    margin-top: 2px;
+    display: flex;
+    gap: 4px;
+  }
+
+  .reaction {
+    border: 1px solid var(--md-sys-color-outline);
+    padding: 6px;
+    border-radius: 6px;
+    height: 24px;
+    display: flex;
+    font-size: 12px;
+
+    > .count {
+      font-size: 10px;
+    }
+  }
+
+  .event {
+    display: grid;
+    position: relative;
+    padding-inline: 0.5em;
+    margin-inline: 0.5em;
+    padding-block: 0.25em;
+    border-radius: 4px;
+
+    grid-template-areas:
+      "avatar sender date"
+      "avatar content content"
+      "none reactions reactions";
+    grid-template-columns: 32px 1fr auto;
+  }
+
+  .content {
+    grid-area: content;
+    text-wrap: wrap;
+    word-wrap: break-word;
+  }
+
+  .reactions,
+  .content,
+  .sender {
+    margin-inline: 8px;
+  }
+
+  .backdrop {
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    opacity: 0.25;
+
+    background: var(--md-sys-color-surface-variant);
+
+    border-radius: 8px;
+  }
+</style>

src/lib/chat/events/MatrixMessageEvent.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import CharRecorder from "$lib/charrecorder/CharRecorder.svelte";
+  import type { Replay } from "$lib/charrecorder/core/types";
+  import type { MatrixClient, MatrixEvent } from "matrix-js-sdk";
+  import { fade } from "svelte/transition";
+  import { matrixClient } from "../chat";
+
+  let { event, replay = $bindable() }: { event: MatrixEvent; replay?: Replay } =
+    $props();
+</script>
+
+<div>
+  {#if event.event.content?.msgtype === "m.image"}
+    <img
+      src={$matrixClient.mxcUrlToHttp(event.event.content["url"])}
+      alt={event.event.content["body"]}
+    />
+  {:else}
+    <span class="content" style:opacity={replay && 0}
+      >{event.event.content?.["body"]}</span
+    >
+  {/if}
+  {#if replay}
+    <div class="replay" out:fade>
+      <CharRecorder
+        {replay}
+        cursor={true}
+        keys={true}
+        ondone={() => (replay = undefined)}
+      />
+    </div>
+  {/if}
+</div>
+
+<style lang="scss">
+  div {
+    position: relative;
+    min-height: 1.5em;
+  }
+
+  img {
+    max-width: 100%;
+    max-height: 16em;
+    border-radius: 8px;
+  }
+
+  .content {
+    transition: opacity 0.2s;
+  }
+
+  .replay {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+</style>

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,
+  ) {}
+}

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]>
+  >;
+}

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]>
+  >;
+}

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

src/lib/components/Action.svelte

@@ -3,46 +3,53 @@
   import type { KeyInfo } from "$lib/serial/keymap-codes";
   import { action as title } from "$lib/title";
   import { osLayout } from "$lib/os-layout";
-  import LL from "../../i18n/i18n-svelte";
 
-  export let action: number | KeyInfo;
-  export let display: "inline-keys" | "keys" = "inline-keys";
+  let {
+    action,
+    display,
+  }: { action: number | KeyInfo; display: "inline-keys" | "keys" } = $props();
 
-  $: info =
+  let info = $derived(
     typeof action === "number"
-      ? KEYMAP_CODES.get(action) ?? { code: action }
-      : action;
-  $: dynamicMapping = info.keyCode && $osLayout.get(info.keyCode);
+      ? (KEYMAP_CODES.get(action) ?? { code: action })
+      : action,
+  );
+  let dynamicMapping = $derived(info.keyCode && $osLayout.get(info.keyCode));
 
-  $: tooltip =
-    (info.title ?? info.id ?? `0x${info.code.toString(16)}`) +
-    (info.variant === "left"
-      ? " (left)"
-      : info.variant === "right"
-        ? " (right)"
-        : "");
+  let tooltip = $derived(
+    `<${info.id ?? `0x${info.code.toString(16)}`}> ` +
+      (info.title ?? "") +
+      (info.variant === "left"
+        ? " (left)"
+        : info.variant === "right"
+          ? " (right)"
+          : ""),
+  );
 </script>
 
-{#if dynamicMapping}
-  <span
-    use:title={{ title: $LL.actionSearch.LIVE_LAYOUT_INFO() }}
-    class="dynamic"
-    class:left={info.variant === "left"}
-    class:right={info.variant === "right"}
-    class:inline={display === "inline-keys"}>{dynamicMapping}</span
-  >
-{:else if display === "keys"}
+{#if display === "keys"}
   <kbd
     class:icon={!!info.icon}
     class:left={info.variant === "left"}
     class:right={info.variant === "right"}
     use:title={{ title: tooltip }}
   >
-    {info.icon ?? info.display ?? info.id ?? `0x${info.code.toString(16)}`}
+    {dynamicMapping ??
+      info.icon ??
+      info.display ??
+      info.id ??
+      `0x${info.code.toString(16)}`}
   </kbd>
 {:else if display === "inline-keys"}
-  {#if !info.icon && info.id?.length === 1}
+  {#if !info.icon && dynamicMapping?.length === 1}
     <span
+      use:title={{ title: tooltip }}
+      class:left={info.variant === "left"}
+      class:right={info.variant === "right"}>{dynamicMapping}</span
+    >
+  {:else if !info.icon && info.id?.length === 1}
+    <span
+      use:title={{ title: tooltip }}
       class:left={info.variant === "left"}
       class:right={info.variant === "right"}>{info.id}</span
     >
@@ -54,7 +61,8 @@
       class:icon={!!info.icon}
       use:title={{ title: tooltip }}
     >
-      {info.icon ??
+      {dynamicMapping ??
+        info.icon ??
         info.display ??
         info.id ??
         `0x${info.code.toString(16)}`}</kbd

src/lib/components/ActionListItem.svelte

@@ -1,17 +1,24 @@
 <script lang="ts">
   import { KEYMAP_CODES } from "$lib/serial/keymap-codes";
   import type { KeyInfo } from "$lib/serial/keymap-codes";
-  import LL from "../../i18n/i18n-svelte";
+  import LL from "$i18n/i18n-svelte";
   import Action from "$lib/components/Action.svelte";
+  import type { MouseEventHandler } from "svelte/elements";
 
-  export let id: number | KeyInfo;
+  let {
+    id,
+    onclick,
+  }: { id: number | KeyInfo; onclick?: MouseEventHandler<HTMLButtonElement> } =
+    $props();
 
-  $: key = (typeof id === "number" ? KEYMAP_CODES.get(id) ?? id : id) as
-    | number
-    | KeyInfo;
+  let key = $derived(
+    (typeof id === "number" ? KEYMAP_CODES.get(id) ?? id : id) as
+      | number
+      | KeyInfo,
+  );
 </script>
 
-<button on:click>
+<button {onclick}>
   {#if typeof key === "object"}
     <div class="title">
       <b>

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}`)}

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}

src/lib/components/Terminal.svelte

@@ -9,11 +9,11 @@
     io.scrollTo({ top: io.scrollHeight });
   }
 
-  let value: string;
+  let value: string = $state("");
   let io: HTMLDivElement;
 </script>
 
-<form on:submit={submit}>
+<form onsubmit={submit}>
   <div bind:this={io} class="io">
     {#each $serialLog as { type, value }}
       {#if type === "input"}
@@ -24,10 +24,10 @@
         <p transition:slide>{value}</p>
       {/if}
     {/each}
-    <div class="anchor" />
+    <div class="anchor"></div>
   </div>
   <fieldset>
-    <input on:submit={submit} bind:value />
+    <input onsubmit={submit} bind:value />
   </fieldset>
 </form>
 

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;
+      font-size: inherit;
+      translate: 0 0.2em;
+    }
   }
 </style>

src/lib/components/layout/ActionSelector.svelte

@@ -5,13 +5,22 @@
     KEYMAP_IDS,
   } from "$lib/serial/keymap-codes";
   import FlexSearch from "flexsearch";
-  import { createEventDispatcher, onMount } from "svelte";
+  import { onMount } from "svelte";
   import ActionListItem from "$lib/components/ActionListItem.svelte";
-  import LL from "../../../i18n/i18n-svelte";
+  import LL from "$i18n/i18n-svelte";
   import { action } from "$lib/title";
 
-  export let currentAction: number | undefined = undefined;
-  export let nextAction: number | undefined = undefined;
+  let {
+    currentAction = undefined,
+    nextAction = undefined,
+    onselect,
+    onclose,
+  }: {
+    currentAction?: number;
+    nextAction?: number;
+    onselect: (id: number) => void;
+    onclose: () => void;
+  } = $props();
 
   onMount(() => {
     searchBox.focus();
@@ -39,13 +48,13 @@
 
   function select(id?: number) {
     if (id !== undefined) {
-      dispatch("select", id);
+      onselect(id);
     }
   }
 
   function keyboardNavigation(event: KeyboardEvent) {
-    if (event.shiftKey && event.key === "Enter") {
-      dispatch("select", exact);
+    if (event.shiftKey && event.key === "Enter" && exact !== undefined) {
+      onselect(exact);
     } else if (event.key === "ArrowDown") {
       const element =
         resultList.querySelector("li:focus-within")?.nextSibling ??
@@ -67,40 +76,45 @@
     event.preventDefault();
   }
 
-  let results: number[] = [];
-  let exact: number | undefined = undefined;
-  let code: number = Number.NaN;
+  let results: number[] = $state([]);
+  let exact: number | undefined = $state(undefined);
+  let code: number = $state(Number.NaN);
 
-  const dispatch = createEventDispatcher();
   let searchBox: HTMLInputElement;
   let resultList: HTMLUListElement;
-  let filter: Set<number>;
+  let filter = $state(new Set<number>());
 </script>
 
 <svelte:window on:keydown={keyboardNavigation} />
 
-<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
-<dialog open on:click|self={() => dispatch("close")}>
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<dialog
+  open
+  onclick={(event) => {
+    if (event.target === event.currentTarget) onclose();
+  }}
+>
   <div class="content">
     <div class="search-row">
       <input
         type="search"
         bind:this={searchBox}
-        on:input={search}
-        on:keypress={(event) => {
+        oninput={search}
+        onkeypress={(event) => {
           if (event.key === "Enter") {
             select(exact);
           }
         }}
         placeholder={$LL.actionSearch.PLACEHOLDER()}
       />
-      <button on:click={() => select(0)} use:action={{ shortcut: "shift+esc" }}
+      <button onclick={() => select(0)} use:action={{ shortcut: "shift+esc" }}
         >{$LL.actionSearch.DELETE()}</button
       >
       <button
         use:action={{ title: $LL.modal.CLOSE(), shortcut: "esc" }}
         class="icon"
-        on:click={() => dispatch("close")}>close</button
+        onclick={onclose}>close</button
       >
     </div>
     <fieldset class="filters">
@@ -140,12 +154,12 @@
       {#if exact !== undefined}
         <li class="exact">
           <i>Exact match</i>
-          <ActionListItem id={exact} on:click={() => select(exact)} />
+          <ActionListItem id={exact} onclick={() => select(exact)} />
         </li>
       {/if}
       {#if !exact && code}
         {#if code >= 2 ** 5 && code < 2 ** 13}
-          <li><button on:click={() => select(code)}>USE CODE</button></li>
+          <li><button onclick={() => select(code)}>USE CODE</button></li>
         {:else}
           <li>Action code is out of range</li>
         {/if}
@@ -156,7 +170,7 @@
             ? Array.from(KEYMAP_CODES, ([it]) => it)
             : results}
         {#each filter ? resultValue.filter( (it) => filter.has(it), ) : resultValue as id (id)}
-          <li><ActionListItem {id} on:click={() => select(id)} /></li>
+          <li><ActionListItem {id} onclick={() => select(id)} /></li>
         {/each}
       {/if}
     </ul>

src/lib/components/layout/GenericLayout.svelte

@@ -10,7 +10,7 @@
   import { get } from "svelte/store";
   import type { Writable } from "svelte/store";
   import KeyboardKey from "$lib/components/layout/KeyboardKey.svelte";
-  import { getContext } from "svelte";
+  import { getContext, mount, unmount } from "svelte";
   import type { VisualLayoutConfig } from "./visual-layout.js";
   import { changes, ChangeType, layout } from "$lib/undo-redo";
   import { fly } from "svelte/transition";
@@ -30,8 +30,8 @@
     console.assert(iconFontSize % 1 === 0, "Icon font size must be an integer");
   }
 
-  export let visualLayout: VisualLayout;
-  $: layoutInfo = compileLayout(visualLayout);
+  let { visualLayout }: { visualLayout: VisualLayout } = $props();
+  let layoutInfo = $state(compileLayout(visualLayout));
 
   function getCenter(key: CompiledLayoutKey): [x: number, y: number] {
     return [key.pos[0] + key.size[0] / 2, key.pos[1] + key.size[1] / 2];
@@ -127,12 +127,26 @@
     const clickedGroup = groupParent.children.item(index) as SVGGElement;
     const nextAction = get(layout)[get(activeLayer)]?.[keyInfo.id];
     const currentAction = get(deviceLayout)[get(activeLayer)]?.[keyInfo.id];
-    if (!nextAction || !currentAction) return;
-    const component = new ActionSelector({
+    const component = mount(ActionSelector, {
       target: document.body,
       props: {
         currentAction,
-        nextAction: nextAction.isApplied ? undefined : nextAction.action,
+        nextAction: nextAction?.isApplied ? undefined : nextAction?.action,
+        onclose() {
+          closed();
+        },
+        onselect(action) {
+          changes.update((changes) => {
+            changes.push({
+              type: ChangeType.Layout,
+              id: keyInfo.id,
+              layer: get(activeLayer),
+              action,
+            });
+            return changes;
+          });
+          closed();
+        },
       },
     });
     const dialog = document.querySelector("dialog > div") as HTMLDivElement;
@@ -168,22 +182,8 @@
 
       await dialogAnimation.finished;
 
-      component.$destroy();
+      unmount(component);
     }
-
-    component.$on("close", closed);
-    component.$on("select", ({ detail }) => {
-      changes.update((changes) => {
-        changes.push({
-          type: ChangeType.Layout,
-          id: keyInfo.id,
-          layer: get(activeLayer),
-          action: detail,
-        });
-        return changes;
-      });
-      closed();
-    });
   }
 
   let focusKey: CompiledLayoutKey;
@@ -202,9 +202,9 @@
     <KeyboardKey
       {i}
       {key}
-      on:focusin={() => (focusKey = key)}
-      on:click={() => edit(i)}
-      on:keypress={({ key }) => {
+      onfocusin={() => (focusKey = key)}
+      onclick={() => edit(i)}
+      onkeypress={({ key }) => {
         if (key === "Enter") {
           edit(i);
         }

src/lib/components/layout/KeyText.svelte

@@ -12,14 +12,21 @@
     getContext<VisualLayoutConfig>("visual-layout-config");
   const activeLayer = getContext<Writable<number>>("active-layer");
 
-  export let key: CompiledLayoutKey;
-  export let fontSizeMultiplier = 1;
-
-  export let middle: [number, number];
-  export let pos: [number, number];
-  export let rotate: number;
-
-  export let positions: [[number, number], [number, number], [number, number]];
+  let {
+    key,
+    fontSizeMultiplier = 1,
+    middle,
+    pos,
+    rotate,
+    positions,
+  }: {
+    key: CompiledLayoutKey;
+    fontSizeMultiplier?: number;
+    middle: [number, number];
+    pos: [number, number];
+    rotate: number;
+    positions: [[number, number], [number, number], [number, number]];
+  } = $props();
 </script>
 
 {#each positions as position, layer}

src/lib/components/layout/KeyboardKey.svelte

@@ -3,24 +3,41 @@
   import { getContext } from "svelte";
   import type { VisualLayoutConfig } from "./visual-layout.js";
   import KeyText from "$lib/components/layout/KeyText.svelte";
+  import type {
+    FocusEventHandler,
+    KeyboardEventHandler,
+    MouseEventHandler,
+  } from "svelte/elements";
 
   const { scale, margin, strokeWidth } = getContext<VisualLayoutConfig>(
     "visual-layout-config",
   );
-  export let i: number;
-  export let key: CompiledLayoutKey;
 
-  $: posX = key.pos[0] * scale;
-  $: posY = key.pos[1] * scale;
-  $: sizeX = key.size[0] * scale;
-  $: sizeY = key.size[1] * scale;
+  let {
+    i,
+    key,
+    onclick,
+    onkeypress,
+    onfocusin,
+  }: {
+    i: number;
+    key: CompiledLayoutKey;
+    onclick: MouseEventHandler<SVGGElement>;
+    onkeypress: KeyboardEventHandler<SVGGElement>;
+    onfocusin: FocusEventHandler<SVGGElement>;
+  } = $props();
+
+  let posX = $derived(key.pos[0] * scale);
+  let posY = $derived(key.pos[1] * scale);
+  let sizeX = $derived(key.size[0] * scale);
+  let sizeY = $derived(key.size[1] * scale);
 </script>
 
 <g
   class="key-group"
-  on:click
-  on:keypress
-  on:focusin
+  {onclick}
+  {onkeypress}
+  {onfocusin}
   role="button"
   tabindex={i + 1}
 >

src/lib/components/layout/Layout.svelte

@@ -7,7 +7,7 @@
   import type { VisualLayout } from "$lib/serialization/visual-layout";
   import { fade } from "svelte/transition";
 
-  $: device = $serialPort?.device;
+  let device = $derived($serialPort?.device);
   const activeLayer = getContext<Writable<number>>("active-layer");
 
   const layers = [
@@ -21,6 +21,10 @@
       import("$lib/assets/layouts/one.yml").then(
         (it) => it.default as VisualLayout,
       ),
+    TWO: () =>
+      import("$lib/assets/layouts/one.yml").then(
+        (it) => it.default as VisualLayout,
+      ),
     LITE: () =>
       import("$lib/assets/layouts/lite.yml").then(
         (it) => it.default as VisualLayout,
@@ -29,6 +33,14 @@
       import("$lib/assets/layouts/generic/103-key.yml").then(
         (it) => it.default as VisualLayout,
       ),
+    M4G: () =>
+      import("$lib/assets/layouts/m4g.yml").then(
+        (it) => it.default as VisualLayout,
+      ),
+    M4GR: () =>
+      import("$lib/assets/layouts/m4gr.yml").then(
+        (it) => it.default as VisualLayout,
+      ),
   };
 </script>
 
@@ -40,7 +52,7 @@
           <button
             class="icon"
             use:action={{ title, shortcut: `alt+${value + 1}` }}
-            on:click={() => ($activeLayer = value)}
+            onclick={() => ($activeLayer = value)}
             class:active={$activeLayer === value}
           >
             {icon}
@@ -62,7 +74,7 @@
 
     width: 100%;
     height: 100%;
-    margin-bottom: 96px;
+    max-height: 20cm;
   }
 
   fieldset {

src/lib/dialogs/ConfirmDialog.svelte

@@ -1,16 +1,24 @@
 <script lang="ts">
-  import { createEventDispatcher } from "svelte";
   import Dialog from "$lib/dialogs/Dialog.svelte";
   import ActionString from "$lib/components/ActionString.svelte";
 
-  export let title: string;
-  export let message: string | undefined;
-  export let abortTitle: string;
-  export let confirmTitle: string;
-
-  export let actions: number[] = [];
-
-  const dispatch = createEventDispatcher();
+  let {
+    title,
+    message,
+    abortTitle,
+    confirmTitle,
+    actions = [],
+    onabort,
+    onconfirm,
+  }: {
+    title: string;
+    message?: string;
+    abortTitle: string;
+    confirmTitle: string;
+    actions: number[];
+    onabort: () => void;
+    onconfirm: () => void;
+  } = $props();
 </script>
 
 <Dialog>
@@ -20,10 +28,8 @@
   {/if}
   <p><ActionString {actions} /></p>
   <div class="buttons">
-    <button on:click={() => dispatch("abort")}>{abortTitle}</button>
-    <button class="primary" on:click={() => dispatch("confirm")}
-      >{confirmTitle}</button
-    >
+    <button onclick={onabort}>{abortTitle}</button>
+    <button class="primary" onclick={onconfirm}>{confirmTitle}</button>
   </div>
 </Dialog>
 

src/lib/dialogs/Dialog.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
-  import { onMount } from "svelte";
+  import { onMount, type Snippet } from "svelte";
+
+  let { children }: { children: Snippet } = $props();
 
   onMount(() => {
     modal.showModal();
@@ -9,7 +11,7 @@
 </script>
 
 <dialog bind:this={modal}>
-  <slot />
+  {@render children()}
 </dialog>
 
 <style lang="scss">

src/lib/dialogs/PickChangesDialog.svelte

@@ -8,7 +8,7 @@
   } from "$lib/undo-redo";
   import { ChangeType, chords } from "$lib/undo-redo";
   import ActionString from "$lib/components/ActionString.svelte";
-  import LL from "../../i18n/i18n-svelte";
+  import LL from "$i18n/i18n-svelte";
   import { KEYMAP_IDS } from "$lib/serial/keymap-codes";
 
   export let changes: Change[] = [

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;
+  },
+);

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",
+  {},
+);

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

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>(

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>

src/lib/serial/chord.ts

@@ -55,3 +55,19 @@ export function deserializeActions(native: bigint): number[] {
 
   return actions;
 }
+
+/**
+ * Hashes a chord input the same way as CCOS
+ */
+export function hashChord(actions: number[]) {
+  const chord = new Uint8Array(16);
+  const view = new DataView(chord.buffer);
+  const serialized = serializeActions(actions);
+  view.setBigUint64(0, serialized & 0xffff_ffff_ffff_ffffn, true);
+  view.setBigUint64(8, serialized >> 64n, true);
+  let hash = 2166136261;
+  for (let i = 0; i < 16; i++) {
+    hash = Math.imul(hash ^ view.getUint8(i), 16777619);
+  }
+  return hash & 0x3fff_ffff;
+}

src/lib/serial/connection.ts

@@ -53,11 +53,13 @@ export interface ProgressInfo {
 }
 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() {

src/lib/serial/device.ts

@@ -12,15 +12,21 @@ import { browser } from "$app/environment";
 
 const PORT_FILTERS: Map<string, SerialPortFilter> = new Map([
   ["ONE M0", { usbProductId: 32783, usbVendorId: 9114 }],
+  ["TWO S3 (pre-production)", { usbProductId: 0x8252, usbVendorId: 0x303a }], // TODO: remove this after everyone has migrated
+  ["TWO S3", { usbProductId: 0x8253, usbVendorId: 0x303a }],
   ["LITE S2", { usbProductId: 33070, usbVendorId: 12346 }],
   ["LITE M0", { usbProductId: 32796, usbVendorId: 9114 }],
   ["X", { usbProductId: 33163, usbVendorId: 12346 }],
+  ["M4G S3", { usbProductId: 4097, usbVendorId: 12346 }],
 ]);
 
 const KEY_COUNTS = {
   ONE: 90,
+  TWO: 90,
   LITE: 67,
   X: 256,
+  M4G: 90,
+  M4GR: 90,
 } as const;
 
 if (
@@ -31,6 +37,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) => {
@@ -86,9 +99,9 @@ export class CharaDevice {
   private suspendDebounceId?: number;
 
   version!: SemVer;
-  company!: "CHARACHORDER";
-  device!: "ONE" | "LITE" | "X";
-  chipset!: "M0" | "S2";
+  company!: "CHARACHORDER" | "FORGE";
+  device!: "ONE" | "TWO" | "LITE" | "X" | "M4G";
+  chipset!: "M0" | "S2" | "S3";
   keyCount!: 90 | 67 | 256;
 
   get portInfo() {
@@ -124,9 +137,9 @@ export class CharaDevice {
         await this.send(1, "VERSION").then(([version]) => version),
       );
       const [company, device, chipset] = await this.send(3, "ID");
-      this.company = company as "CHARACHORDER";
-      this.device = device as "ONE" | "LITE" | "X";
-      this.chipset = chipset as "M0" | "S2";
+      this.company = company as typeof this.company;
+      this.device = device as typeof this.device;
+      this.chipset = chipset as typeof this.chipset;
       this.keyCount = KEY_COUNTS[this.device];
     } catch (e) {
       alert(e);
@@ -435,4 +448,95 @@ export class CharaDevice {
   async getRamBytesAvailable(): Promise<number> {
     return Number(await this.send(1, "RAM").then(([bytes]) => bytes));
   }
+
+  async updateFirmware(file: File | Blob): Promise<void> {
+    while (this.lock) {
+      await this.lock;
+    }
+    let resolveLock: (result: true) => void;
+    this.lock = new Promise<true>((resolve) => {
+      resolveLock = resolve;
+    });
+    try {
+      if (this.suspendDebounceId) {
+        clearTimeout(this.suspendDebounceId);
+      } else {
+        await this.wake();
+      }
+
+      serialLog.update((it) => {
+        it.push({
+          type: "system",
+          value: "OTA Update",
+        });
+        return it;
+      });
+
+      const writer = this.port.writable!.getWriter();
+      try {
+        await writer.write(new TextEncoder().encode(`RST OTA\r\n`));
+        serialLog.update((it) => {
+          it.push({
+            type: "input",
+            value: "RST OTA",
+          });
+          return it;
+        });
+      } finally {
+        writer.releaseLock();
+      }
+
+      // Wait for the device to be ready
+      const signal = await this.reader.read();
+      serialLog.update((it) => {
+        it.push({
+          type: "output",
+          value: signal.value!.trim(),
+        });
+        return it;
+      });
+
+      await file.stream().pipeTo(this.port.writable!);
+
+      serialLog.update((it) => {
+        it.push({
+          type: "input",
+          value: `...${file.size} bytes`,
+        });
+        return it;
+      });
+
+      const result = (await this.reader.read()).value!.trim();
+      serialLog.update((it) => {
+        it.push({
+          type: "output",
+          value: result!,
+        });
+        return it;
+      });
+
+      if (result !== "OTA OK") {
+        throw new Error(result);
+      }
+
+      const writer2 = this.port.writable!.getWriter();
+      try {
+        await writer2.write(new TextEncoder().encode(`RST RESTART\r\n`));
+        serialLog.update((it) => {
+          it.push({
+            type: "input",
+            value: "RST RESTART",
+          });
+          return it;
+        });
+      } finally {
+        writer2.releaseLock();
+      }
+
+      await this.suspend();
+    } finally {
+      delete this.lock;
+      resolveLock!(true);
+    }
+  }
 }

src/lib/share/share-url.ts

@@ -72,7 +72,6 @@ export async function charaFileFromUriComponent<T extends CharaFiles>(
         .stream()
         .pipeThrough(new DecompressionStream("deflate"));
       const actions = new Uint8Array(await new Response(stream).arrayBuffer());
-      console.log(actions);
       file[key] = deserializeActionArray(actions);
     }
   }

src/lib/storage.ts

@@ -9,10 +9,17 @@ export function persistentWritable<T>(
 ): Writable<T> {
   if (browser) {
     const persistedValue = localStorage.getItem(key);
-    const store =
-      persistedValue !== null
-        ? writable(JSON.parse(persistedValue))
-        : writable(value);
+    let store: Writable<T>;
+    try {
+      store =
+        persistedValue !== null
+          ? writable(JSON.parse(persistedValue))
+          : writable(value);
+    } catch (e) {
+      console.error(e);
+    } finally {
+      store = writable(value);
+    }
     store.subscribe((value) => {
       if (!condition || condition())
         localStorage.setItem(key, JSON.stringify(value));

src/lib/style/_reset.scss

@@ -0,0 +1,4 @@
+* {
+  box-sizing: border-box;
+  appearance: none;
+}

src/lib/style/elements/_h1.scss

@@ -0,0 +1,6 @@
+h1 {
+  margin-block-start: 0;
+  font-size: 4rem;
+  font-weight: 700;
+  color: var(--md-sys-color-secondary);
+}

src/lib/style/theme.scss

@@ -1,10 +1,35 @@
+@import "./reset";
+
 @import "./form/button";
 @import "./form/toggle";
 @import "./form/checkbox";
+
 @import "./kbd";
 @import "./print";
 
-* {
-  box-sizing: border-box;
-  appearance: none;
+@import "./elements/h1";
+
+body {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  width: 100vw;
+  height: 100vh;
+  margin: 0;
+
+  font-family: "Noto Sans Mono", monospace;
+  color: var(--md-sys-color-on-background);
+
+  background: var(--md-sys-color-background);
+}
+
+main {
+  contain: strict;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  align-items: center;
+
+  padding-inline: 16px;
 }

src/lib/title.ts

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

src/lib/undo-redo.ts

@@ -1,6 +1,6 @@
 import { persistentWritable } from "$lib/storage";
 import { derived } from "svelte/store";
-import type { Chord } from "$lib/serial/chord";
+import { hashChord, type Chord } from "$lib/serial/chord";
 import {
   deviceChords,
   deviceLayout,
@@ -158,3 +158,9 @@ export const chords = derived([overlay, deviceChords], ([overlay, chords]) => {
     a.localeCompare(b),
   );
 });
+
+export const chordHashes = derived(
+  chords,
+  (chords) =>
+    new Map(chords.map((chord) => [hashChord(chord.actions), chord] as const)),
+);

src/routes/(app)/+layout.svelte

@@ -4,26 +4,25 @@
   import "$lib/style/scrollbar.scss";
   import "$lib/style/tippy.scss";
   import "$lib/style/theme.scss";
-  import { onDestroy, onMount } from "svelte";
+  import Sidebar from "./Sidebar.svelte";
+  import { onDestroy, onMount, type Snippet } from "svelte";
   import {
     applyTheme,
     argbFromHex,
     themeFromSourceColor,
   } from "@material/material-color-utilities";
-  import Navigation from "./Navigation.svelte";
   import { canAutoConnect } from "$lib/serial/device";
   import { initSerial } from "$lib/serial/connection";
   import type { LayoutData } from "./$types";
   import { browser } from "$app/environment";
-  import BrowserWarning from "./BrowserWarning.svelte";
   import "tippy.js/animations/shift-away.css";
   import "tippy.js/dist/tippy.css";
   import tippy from "tippy.js";
   import { theme, userPreferences } from "$lib/preferences.js";
-  import { LL, setLocale } from "../i18n/i18n-svelte";
-  import { loadLocale } from "../i18n/i18n-util.sync";
-  import { detectLocale } from "../i18n/i18n-util";
-  import type { Locales } from "../i18n/i18n-types";
+  import { LL, setLocale } from "$i18n/i18n-svelte";
+  import { loadLocale } from "$i18n/i18n-util.sync";
+  import { detectLocale } from "$i18n/i18n-util";
+  import type { Locales } from "$i18n/i18n-types";
   import Footer from "./Footer.svelte";
   import { osLayout, runLayoutDetection } from "$lib/os-layout.js";
   import PageTransition from "./PageTransition.svelte";
@@ -49,7 +48,7 @@
     });
   }
 
-  export let data: LayoutData;
+  let { data, children }: { data: LayoutData; children: Snippet } = $props();
 
   onMount(async () => {
     theme.subscribe((it) => {
@@ -79,7 +78,7 @@
     stopLayoutDetection?.();
   });
 
-  let webManifestLink = "";
+  let webManifestLink = $state("");
 
   function handleHotkey(event: KeyboardEvent) {
     let key = $osLayout.get(event.code);
@@ -114,51 +113,32 @@
   <meta name="theme-color" content={data.themeColor} />
 </svelte:head>
 
-<svelte:window on:keydown={handleHotkey} />
+<svelte:window onkeydown={handleHotkey} />
 
-<Navigation />
+<div class="layout">
+  <Sidebar />
 
-<!-- <PickChangesDialog /> -->
+  <!-- <PickChangesDialog /> -->
 
-<PageTransition>
-  <slot />
-</PageTransition>
+  <PageTransition>
+    {#if children}
+      {@render children()}
+    {/if}
+  </PageTransition>
 
-<Footer />
-
-{#if import.meta.env.TAURI_FAMILY === undefined && browser && !("serial" in navigator)}
-  <BrowserWarning />
-{/if}
-
-<style lang="scss" global>
-  body {
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
+  <Footer />
+</div>
 
+<style lang="scss">
+  .layout {
     width: 100vw;
     height: 100vh;
-    margin: 0;
 
-    font-family: "Noto Sans Mono", monospace;
-    color: var(--md-sys-color-on-background);
-
-    background: var(--md-sys-color-background);
-  }
-
-  main {
-    contain: strict;
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    align-items: center;
-    padding-inline: 16px;
-  }
-
-  h1 {
-    margin-block-start: 0;
-    font-size: 4rem;
-    font-weight: 700;
-    color: var(--md-sys-color-secondary);
+    display: grid;
+    grid-template-areas:
+      "sidebar main"
+      "sidebar footer";
+    grid-template-columns: auto 1fr;
+    grid-template-rows: 1fr;
   }
 </style>

src/routes/(app)/+layout.ts

@@ -0,0 +1,16 @@
+import type { LayoutLoad } from "./$types";
+import { browser } from "$app/environment";
+import { charaFileFromUriComponent } from "$lib/share/share-url";
+import { themeBase, themeColor, themeSuccessBase } from "$lib/style/theme";
+
+export const load = (async ({ url, data, fetch }) => {
+  const importFile = browser && new URLSearchParams(url.search).get("import");
+  return {
+    themeSuccessBase,
+    themeBase,
+    themeColor,
+    importFile: importFile
+      ? await charaFileFromUriComponent(importFile, fetch)
+      : undefined,
+  };
+}) satisfies LayoutLoad;

src/routes/(app)/BrowserWarning.svelte

@@ -1,5 +1,5 @@
 <script>
-  import LL from "../i18n/i18n-svelte";
+  import LL from "$i18n/i18n-svelte";
 </script>
 
 <dialog open>

src/routes/(app)/Footer.svelte

@@ -1,23 +1,39 @@
 <script lang="ts">
   import { browser, version } from "$app/environment";
   import { action } from "$lib/title";
-  import LL, { setLocale } from "../i18n/i18n-svelte";
+  import LL, { setLocale } from "$i18n/i18n-svelte";
   import { theme } from "$lib/preferences.js";
-  import type { Locales } from "../i18n/i18n-types";
-  import { detectLocale, locales } from "../i18n/i18n-util";
-  import { loadLocaleAsync } from "../i18n/i18n-util.async";
+  import type { Locales } from "$i18n/i18n-types";
+  import { detectLocale, locales } from "$i18n/i18n-util";
+  import { loadLocaleAsync } from "$i18n/i18n-util.async";
   import { tick } from "svelte";
   import SyncOverlay from "./SyncOverlay.svelte";
-  import { serialPort } from "$lib/serial/connection";
+  import {
+    initSerial,
+    serialPort,
+    sync,
+    syncProgress,
+    syncStatus,
+  } from "$lib/serial/connection";
+  import { fade, slide } from "svelte/transition";
 
-  let locale =
-    (browser && (localStorage.getItem("locale") as Locales)) || detectLocale();
-  $: if (browser)
-    (async () => {
-      localStorage.setItem("locale", locale);
-      await loadLocaleAsync(locale);
+  let locale = $state(
+    (browser && (localStorage.getItem("locale") as Locales)) || detectLocale(),
+  );
+
+  let currentDevice = $derived(
+    $serialPort
+      ? `${$serialPort.device.toLowerCase()}_${$serialPort.chipset.toLowerCase()}`
+      : undefined,
+  );
+
+  $effect(() => {
+    if (!browser) return;
+    localStorage.setItem("locale", locale);
+    loadLocaleAsync(locale).then(() => {
       setLocale(locale);
-    })();
+    });
+  });
 
   function switchTheme() {
     const mode = $theme.mode === "light" ? "dark" : "light";
@@ -31,47 +47,85 @@
     }
   }
 
+  async function connect() {
+    try {
+      await initSerial(true);
+    } catch (error) {
+      console.error(error);
+      alert(
+        "Connection failed. Is your device maybe pre-CCOS? Refer to the doc link in the bottom left for more information on your device.",
+      );
+    }
+  }
+
+  function disconnect(event: MouseEvent) {
+    if (event.shiftKey) {
+      sync();
+    } else {
+      $serialPort?.forget();
+      $serialPort = undefined;
+    }
+  }
+
   let languageSelect: HTMLSelectElement;
 </script>
 
 <footer>
   <ul>
     <li>
-      <!-- svelte-ignore not-defined -->
       <a
+        use:action={{ title: "Branch" }}
         href={import.meta.env.VITE_HOMEPAGE_URL}
         rel="noreferrer"
         target="_blank"><span class="icon">commit</span> v{version}</a
       >
     </li>
     <li>
-      <a href={import.meta.env.VITE_BUGS_URL} rel="noreferrer" target="_blank"
-        ><span class="icon">bug_report</span> Issues</a
-      >
-    </li>
-    <li>
-      <a href={import.meta.env.VITE_DOCS_URL} rel="noreferrer" target="_blank"
-        ><span class="icon">description</span> Docs</a
+      <a
+        href="/ccos/{currentDevice ? `${currentDevice}/` : ''}"
+        use:action={{ title: "Updates" }}
       >
+        CCOS {$serialPort?.version ?? "Updates"}
+      </a>
     </li>
   </ul>
-  <div>
+  <div class="sync-box">
     {#if !$serialPort}
-      <div class="warning">
-        <span class="icon">warning</span>{$LL.deviceManager.NO_DEVICE()}
-      </div>
+      <button class="warning" onclick={connect} transition:slide={{ axis: "x" }}
+        ><span class="icon">usb</span>{$LL.deviceManager.CONNECT()}</button
+      >
+    {:else}
+      <button
+        transition:slide={{ axis: "x" }}
+        onclick={disconnect}
+        use:action={{
+          title: "Disconnect<br><kbd class='icon'>shift</kbd> Sync",
+        }}
+        ><b
+          >{$serialPort.company}
+          {$serialPort.device}
+          {$serialPort.chipset}</b
+        ><span class="icon">usb_off</span></button
+      >
+    {/if}
+
+    {#if $syncStatus !== "done"}
+      <progress
+        transition:fade
+        max={$syncProgress?.max ?? 1}
+        value={$syncProgress?.current ?? 1}
+      ></progress>
     {/if}
-    <SyncOverlay />
   </div>
   <ul>
     <li>
-      <a href={import.meta.env.VITE_STORE_URL} rel="noreferrer" target="_blank"
-        ><span class="icon">shopping_bag</span> Store</a
+      <a href={import.meta.env.VITE_BUGS_URL} rel="noreferrer" target="_blank"
+        ><span class="icon">bug_report</span> Bugs</a
       >
     </li>
     <li>
-      <a href={import.meta.env.VITE_LEARN_URL} rel="noreferrer" target="_blank"
-        ><span class="icon">school</span> Train</a
+      <a href={import.meta.env.VITE_STORE_URL} rel="noreferrer" target="_blank"
+        ><span class="icon">shopping_bag</span> Store</a
       >
     </li>
     <li class="hide-forced-colors">
@@ -86,7 +140,7 @@
         <button
           use:action={{ title: $LL.profile.theme.DARK_MODE() }}
           class="icon"
-          on:click={switchTheme}
+          onclick={switchTheme}
         >
           dark_mode
         </button>
@@ -94,26 +148,28 @@
         <button
           use:action={{ title: $LL.profile.theme.LIGHT_MODE() }}
           class="icon"
-          on:click={switchTheme}
+          onclick={switchTheme}
         >
           light_mode
         </button>
       {/if}
     </li>
-    <li>
-      <button
+    <!--<li>
+      <div
+        role="button"
         class="icon"
         use:action={{ title: $LL.profile.LANGUAGE() }}
-        on:click={() => languageSelect.click()}
-        >translate
+        onclick={() => languageSelect.click()}
+      >
+        translate
 
         <select bind:value={locale} bind:this={languageSelect}>
           {#each locales as code}
             <option value={code}>{code}</option>
           {/each}
         </select>
-      </button>
-    </li>
+      </div>
+    </li>-->
   </ul>
 </footer>
 
@@ -123,6 +179,37 @@
     opacity: 0;
   }
 
+  .sync-box {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+
+    button {
+      text-wrap: nowrap;
+    }
+  }
+
+  progress {
+    position: absolute;
+    z-index: -1;
+    bottom: 0;
+    left: 16px;
+    right: 16px;
+    overflow: hidden;
+    width: calc(100% - 32px);
+    height: 8px;
+    border-radius: 4px;
+  }
+
+  progress::-webkit-progress-bar {
+    background: var(--md-sys-color-background);
+  }
+
+  progress::-webkit-progress-value {
+    background: var(--md-sys-color-primary);
+  }
+
   .warning {
     color: var(--md-sys-color-error);
     gap: 8px;

src/routes/(app)/PageTransition.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import { fly } from "svelte/transition";
+  import { afterNavigate, beforeNavigate } from "$app/navigation";
+  import { expoIn, expoOut } from "svelte/easing";
+  import type { Snippet } from "svelte";
+
+  let { children }: { children: Snippet } = $props();
+
+  let inDirection = $state(0);
+  let outDirection = $state(0);
+  let outroEnd: undefined | (() => void) = $state(undefined);
+  let animationDone: Promise<void>;
+
+  let isNavigating = $state(false);
+
+  const routeOrder = [
+    "/config",
+    "/learn",
+    "/docs",
+    "/editor",
+    "/chat",
+    "/plugin",
+  ];
+
+  function routeIndex(route: string | undefined): number {
+    return routeOrder.findIndex((it) => route?.startsWith(it));
+  }
+
+  beforeNavigate((navigation) => {
+    const from = routeIndex(navigation.from?.url.pathname);
+    const to = routeIndex(navigation.to?.url.pathname);
+    if (from === -1 || to === -1 || from === to) return;
+    isNavigating = true;
+
+    inDirection = from > to ? -1 : 1;
+    outDirection = from > to ? 1 : -1;
+
+    animationDone = new Promise((resolve) => {
+      outroEnd = resolve;
+    });
+  });
+
+  afterNavigate(async () => {
+    await animationDone;
+    isNavigating = false;
+  });
+</script>
+
+{#if !isNavigating}
+  <main
+    in:fly={{ y: inDirection * 24, duration: 150, easing: expoOut }}
+    out:fly={{ y: outDirection * 24, duration: 150, easing: expoIn }}
+    onoutroend={outroEnd}
+  >
+    {@render children()}
+  </main>
+{/if}
+
+<style lang="scss">
+  main {
+    padding: 0;
+  }
+</style>

src/routes/(app)/Sidebar.svelte

@@ -0,0 +1,147 @@
+<script lang="ts">
+  import { page } from "$app/stores";
+
+  const routes = [
+    [
+      {
+        href: "/config/settings/",
+        icon: "cable",
+        title: "Device",
+        primary: true,
+      },
+      { href: "/config/chords/", icon: "dictionary", title: "Library" },
+      { href: "/config/layout/", icon: "keyboard", title: "Layout" },
+    ],
+    [
+      // { href: "/learn", icon: "school", title: "Learn", wip: true },
+      {
+        href: import.meta.env.VITE_LEARN_URL,
+        icon: "school",
+        title: "Learn",
+        external: true,
+      },
+      {
+        href: import.meta.env.VITE_DOCS_URL,
+        icon: "description",
+        title: "Docs",
+        external: true,
+      },
+      { href: "/editor", icon: "edit_document", title: "Editor", wip: true },
+      { href: "https://chat.dev.charachorder.io", icon: "chat", title: "Chat", wip: true },
+    ],
+    /*[
+      { href: "/plugin", icon: "code", title: "Plugin", wip: true },
+    ],*/
+  ] satisfies {
+    href: string;
+    icon: string;
+    title: string;
+    wip?: boolean;
+    external?: boolean;
+    primary?: boolean;
+  }[][];
+
+  let connectButton: HTMLButtonElement;
+</script>
+
+<div class="sidebar">
+  <nav>
+    {#each routes as group}
+      <ul>
+        {#each group as { href, icon, title, wip, external }}
+          <li>
+            <a
+              class:wip
+              {href}
+              rel={external ? "noreferrer" : undefined}
+              target={external ? "_blank" : undefined}
+              class:active={$page.url.pathname.startsWith(href)}
+            >
+              <div class="icon">
+                {icon}
+              </div>
+              <div class="content">
+                {title}
+              </div>
+            </a>
+          </li>
+        {/each}
+      </ul>
+    {/each}
+  </nav>
+</div>
+
+<style lang="scss">
+  .sidebar {
+    margin: 8px;
+    padding-inline-end: 8px;
+    width: 64px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    grid-area: sidebar;
+    border-right: 1px solid var(--md-sys-color-outline);
+  }
+
+  li {
+    display: flex;
+    justify-content: center;
+  }
+
+  a {
+    display: flex;
+    flex-direction: column;
+    margin: 8px 0;
+    font-size: 12px;
+
+    &.wip {
+      color: var(--md-sys-color-error);
+      opacity: 0.5;
+    }
+
+    .icon {
+      display: flex;
+      justify-content: center;
+      font-size: 24px;
+      padding: 8px;
+      border-radius: 8px;
+
+      transition: all 250ms ease;
+    }
+
+    > .content {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      translate: 0 -8px;
+      transition: all 250ms ease;
+    }
+
+    &.active {
+      > .content {
+        translate: 0;
+      }
+
+      .icon {
+        background: var(--md-sys-color-primary);
+        color: var(--md-sys-color-on-primary);
+        border-radius: 50%;
+      }
+    }
+  }
+
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  ul + ul::before {
+    content: "";
+    display: block;
+    height: 1px;
+    background: var(--md-sys-color-outline);
+    margin: 16px 0;
+  }
+</style>

src/routes/(app)/SyncOverlay.svelte

@@ -5,7 +5,7 @@
     syncStatus,
     sync,
   } from "$lib/serial/connection";
-  import LL from "../i18n/i18n-svelte";
+  import LL from "$i18n/i18n-svelte";
   import { slide } from "svelte/transition";
 </script>
 
@@ -23,7 +23,7 @@
       {/if}
     </div>
   {:else if $serialPort}
-    <button transition:slide on:click={sync}
+    <button transition:slide onclick={sync}
       ><span class="icon">refresh</span>{$LL.sync.RELOAD()}</button
     >
   {/if}

src/routes/(app)/ccos/+layout.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  let { children } = $props();
+</script>
+
+<h1><a href="/ccos">Firmware Updates</a></h1>
+
+{@render children()}
+
+<style lang="scss">
+  h1 {
+    margin-block: 1em;
+    padding: 0;
+    font-size: 3em;
+  }
+</style>

src/routes/(app)/ccos/+page.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+  import { serialPort } from "$lib/serial/connection";
+  import { slide } from "svelte/transition";
+
+  let { data } = $props();
+
+  let currentDevice = $derived(
+    $serialPort
+      ? `${$serialPort.device.toLowerCase()}_${$serialPort.chipset.toLowerCase()}`
+      : undefined,
+  );
+</script>
+
+<ul>
+  {#each data.devices as device}
+    <li>
+      <a href="./{device.name}/" class:highlight={device.name === currentDevice}
+        >{device.name}</a
+      >
+    </li>
+  {/each}
+</ul>
+
+{#if !currentDevice}
+  <aside transition:slide>Connect your device to see which one you need</aside>
+{/if}
+
+<style lang="scss">
+  ul {
+    display: flex;
+    list-style: none;
+    gap: 8px;
+  }
+
+  li {
+    margin: 0;
+    padding: 0;
+  }
+
+  a {
+    outline: 1px solid var(--md-sys-color-outline);
+    border-radius: 8px;
+    transition:
+      background-color 200ms ease,
+      color 200ms ease,
+      outline-offset 200ms ease,
+      outline-color 200ms ease;
+  }
+
+  @keyframes highlight {
+    0% {
+      outline-offset: 0;
+    }
+    100% {
+      outline-offset: 4px;
+    }
+  }
+
+  @keyframes wiggle {
+    0% {
+      transform: rotate(0deg);
+      scale: 1;
+    }
+    50% {
+      transform: rotate(-5deg);
+    }
+    100% {
+      transform: rotate(-5deg);
+      scale: 1.1;
+    }
+  }
+
+  .highlight {
+    outline-width: 2px;
+    outline-color: var(--md-sys-color-primary);
+    animation: wiggle 500ms ease 2 alternate;
+    background-color: var(--md-sys-color-primary-container);
+    color: var(--md-sys-color-on-primary-container);
+  }
+</style>

src/routes/(app)/ccos/+page.ts

@@ -0,0 +1,9 @@
+import type { PageLoad } from "./$types";
+import type { DirectoryListing } from "./listing";
+
+export const load = (async ({ fetch }) => {
+  const result = await fetch(import.meta.env.VITE_FIRMWARE_URL);
+  const data = await result.json();
+
+  return { devices: data as DirectoryListing[] };
+}) satisfies PageLoad;

src/routes/(app)/ccos/[device]/+page.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+  let { data } = $props();
+
+  let showPrerelease = $state(false);
+</script>
+
+<div class="title">
+  <h2>Versions available for <em>{data.device}</em></h2>
+  <label
+    >Include Pre-releases<input
+      type="checkbox"
+      bind:checked={showPrerelease}
+    /></label
+  >
+</div>
+
+{#if data.versions}
+  <ul>
+    {#each data.versions as version}
+      {@const isPrerelease = version.name.includes("-")}
+      <li class:pre-release={isPrerelease}>
+        <a href="./{version.name}/"
+          >{version.name}
+          <time datetime={version.mtime}
+            >{new Date(version.mtime).toLocaleDateString()}</time
+          ></a
+        >
+      </li>
+    {/each}
+  </ul>
+{:else}
+  <h2>The device {data.device} does not exist.</h2>
+{/if}
+
+<style lang="scss">
+  .pre-release {
+    margin-inline-start: 2em;
+  }
+
+  ul {
+    list-style: none;
+    padding: 0;
+  }
+
+  li {
+    height: 2em;
+    overflow: hidden;
+    transition:
+      height 200ms ease,
+      opacity 200ms ease;
+  }
+
+  label {
+    padding: 0;
+    opacity: 0.6;
+  }
+
+  .title {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+
+    h2 {
+      margin-block-end: 0;
+
+      em {
+        font-style: normal;
+        color: var(--md-sys-color-primary);
+      }
+    }
+  }
+
+  time {
+    opacity: 0.5;
+    &:before {
+      content: "•";
+      padding-inline: 0.4ch;
+    }
+  }
+
+  div.title:has(input:not(:checked)) ~ ul .pre-release {
+    height: 0;
+    opacity: 0;
+  }
+</style>

src/routes/(app)/ccos/[device]/+page.ts

@@ -0,0 +1,16 @@
+import type { PageLoad } from "./$types";
+import type { DirectoryListing } from "../listing";
+
+export const load = (async ({ fetch, params }) => {
+  const result = await fetch(
+    `${import.meta.env.VITE_FIRMWARE_URL}/${params.device}/`,
+  );
+  const data = await result.json();
+
+  return {
+    versions: (data as DirectoryListing[]).sort((a, b) =>
+      b.name.localeCompare(a.name),
+    ),
+    device: params.device,
+  };
+}) satisfies PageLoad;

src/routes/(app)/ccos/[device]/[version]/+page.svelte

@@ -0,0 +1,505 @@
+<script lang="ts">
+  import { downloadBackup } from "$lib/backup/backup";
+  import { initSerial, serialPort } from "$lib/serial/connection";
+  import { fade, slide } from "svelte/transition";
+  import type { LoaderOptions, ESPLoader } from "esptool-js";
+
+  let { data } = $props();
+
+  let working = $state(false);
+  let success = $state(false);
+  let error = $state<Error | undefined>(undefined);
+
+  let terminalOutput = $state("");
+
+  let step = $state(0);
+  let eraseAll = $state(false);
+
+  let espLoader;
+
+  async function update() {
+    working = true;
+    error = undefined;
+    success = false;
+    const port = $serialPort!;
+    $serialPort = undefined;
+    try {
+      const file = await fetch(
+        `${data.meta.path}/${data.meta.update.ota!}`,
+      ).then((it) => it.blob());
+
+      await port.updateFirmware(file);
+
+      success = true;
+    } catch (e) {
+      error = e as Error;
+    } finally {
+      working = false;
+    }
+  }
+
+  let currentDevice = $derived(
+    $serialPort
+      ? `${$serialPort.device.toLowerCase()}_${$serialPort.chipset.toLowerCase()}`
+      : undefined,
+  );
+  let isCorrectDevice = $derived(
+    currentDevice ? currentDevice === data.meta.target : undefined,
+  );
+
+  /**
+   * Bytes to respective units
+   */
+  function toByteUnit(value: number) {
+    if (value < 1024) {
+      return `${value}B`;
+    } else if (value < 1024 * 1024) {
+      return `${(value / 1024).toFixed(2)}KB`;
+    } else {
+      return `${(value / 1024 / 1024).toFixed(2)}MB`;
+    }
+  }
+
+  async function connect() {
+    try {
+      await initSerial(true, false);
+      step = 1;
+    } catch (e) {
+      error = e as Error;
+    }
+  }
+
+  function backup() {
+    downloadBackup();
+    step = 2;
+  }
+
+  function bootloader() {
+    $serialPort?.bootloader();
+    $serialPort = undefined;
+    step = 3;
+  }
+
+  async function getFileSystem() {
+    if (!data.meta.update.uf2) return;
+    const uf2Promise = fetch(
+      `${data.meta.path}/${data.meta.update.uf2.name}`,
+    ).then((it) => it.blob());
+    const handle = await window.showSaveFilePicker({
+      id: `${data.meta.target}-update`,
+      suggestedName: "CURRENT.UF2",
+      excludeAcceptAllOption: true,
+      types: [
+        {
+          description: "UF2 Firmware",
+          accept: { "application/octet-stream": [".UF2"] },
+        },
+      ],
+    });
+    const writable = await handle.createWritable();
+    const uf2 = await uf2Promise;
+    await uf2.stream().pipeTo(writable);
+    step = 4;
+  }
+
+  async function espBootloader() {
+    $serialPort?.forget();
+    const port = await navigator.serial.requestPort();
+    port.open({ baudRate: 1200 });
+  }
+
+  async function connectEsp(port: SerialPort): Promise<ESPLoader> {
+    const esptool = data.meta.update.esptool!;
+    const { Transport, ESPLoader } = await import("esptool-js");
+    const espLoader = new ESPLoader({
+      transport: new Transport(port),
+      baudrate: 9600, // Number(esptool.baud),
+      romBaudrate: 9600, // Number(esptool.baud),
+      debugLogging: true,
+      terminal: {
+        clean: () => {
+          terminalOutput = "";
+        },
+        writeLine: (data) => {
+          terminalOutput += data + "\n";
+        },
+        write: (data) => {
+          terminalOutput += data;
+        },
+      },
+    } satisfies LoaderOptions);
+    await espLoader.detectChip(esptool.before);
+    if (!espLoader.IS_STUB) {
+      await espLoader.runStub();
+    }
+
+    return espLoader;
+  }
+
+  async function flashImages() {
+    const port = await navigator.serial.requestPort();
+    try {
+      const esptool = data.meta.update.esptool!;
+      espLoader = await connectEsp(port);
+      const fileArray = await Promise.all(
+        Object.entries(esptool.files).map(([offset, name]) =>
+          fetch(`${data.meta.path}/${name}`)
+            .then((it) => it.blob())
+            .then((it) => it.text())
+            .then((it) => ({
+              address: Number(offset),
+              data: it,
+            })),
+        ),
+      );
+
+      await espLoader.writeFlash({
+        flashSize: esptool.flash_size,
+        flashMode: esptool.flash_mode,
+        flashFreq: esptool.flash_freq,
+        compress: true,
+        eraseAll,
+        fileArray,
+      });
+    } finally {
+      port.close();
+    }
+  }
+
+  async function eraseSPI() {
+    const port = await navigator.serial.requestPort();
+    try {
+      console.log(data.meta);
+      const spiFlash = data.meta.spi_flash!;
+      espLoader = await connectEsp(port);
+
+      /*espLoader.flashSpiAttach(
+        (spiFlash.connection.clk << 0) |
+          (spiFlash.connection.q << 8) |
+          (spiFlash.connection.d << 16) |
+          (spiFlash.connection.cs << 24),
+      );
+      espLoader.flashId();*/
+    } finally {
+      port.close();
+    }
+  }
+</script>
+
+<div class="container">
+  <h2>
+    <a class="inline-link" href="/ccos">CCOS</a> /
+    <a
+      href="/ccos/{data.meta.target}"
+      class="device inline-link"
+      class:correct-device={isCorrectDevice === true}
+      class:incorrect-device={isCorrectDevice === false}>{data.meta.target}</a
+    >
+    / <em class="version">{data.meta.version}</em>
+  </h2>
+
+  {#if data.meta.update.ota && !data.meta.target.endsWith("m0")}
+    {@const buttonError = error || (!success && isCorrectDevice === false)}
+    <section>
+      <button
+        class="update-button"
+        class:working
+        class:primary={!buttonError}
+        class:error={buttonError}
+        disabled={working || $serialPort === undefined || !isCorrectDevice}
+        onclick={update}>Apply Update</button
+      >
+      {#if $serialPort && isCorrectDevice}
+        <div transition:slide>
+          Your
+          <b
+            >{$serialPort.company}
+            {$serialPort.device}
+            {$serialPort.chipset}</b
+          >
+          will be updated from <b class="version">{$serialPort.version}</b> to
+          <b class="version">{data.meta.version}</b>
+        </div>
+      {:else if $serialPort && isCorrectDevice === false}
+        <div class="error" transition:slide>
+          Your device is incompatible with the selected update.
+        </div>
+      {:else if success}
+        <div class="primary" transition:slide>Update successful</div>
+      {:else if error}
+        <div class="error" transition:slide>{error.message}</div>
+      {:else if working}
+        <div class="primary" transition:slide>Updating your device...</div>
+      {:else}
+        <div class="primary" transition:slide>
+          Connect your device to continue
+        </div>
+      {/if}
+    </section>
+
+    <h3>Manual Update</h3>
+  {/if}
+
+  {#if isCorrectDevice === false}
+    <div transition:slide class="incorrect-device">
+      These files are incompatible with your device
+    </div>
+  {/if}
+
+  <section>
+    <ol>
+      <li>
+        <button class="inline-button" onclick={connect}
+          ><span class="icon">usb</span>Connect</button
+        >
+        your device
+        {#if step >= 1}
+          <span class="icon ok" transition:fade>check_circle</span>
+        {/if}
+      </li>
+
+      <li class:faded={step < 1}>
+        Make a <button class="inline-button" onclick={backup}
+          ><span class="icon">download</span>Backup</button
+        >
+        {#if step >= 2}
+          <span class="icon ok" transition:fade>check_circle</span>
+        {/if}
+      </li>
+
+      <li class:faded={step < 2}>
+        Reboot to <button class="inline-button" onclick={bootloader}
+          ><span class="icon">restart_alt</span>Bootloader</button
+        >
+        {#if step >= 3}
+          <span class="icon ok" transition:fade>check_circle</span>
+        {/if}
+      </li>
+
+      <li class:faded={step < 3}>
+        Replace <button class="inline-button" onclick={getFileSystem}
+          ><span class="icon">deployed_code_update</span>CURRENT.UF2</button
+        >
+        on the new drive
+        {#if step >= 4}
+          <span class="icon ok" transition:fade>check_circle</span>
+        {/if}
+      </li>
+    </ol>
+  </section>
+
+  {#if data.meta.update.esptool}
+    <section>
+      <h3>Factory Flash (WIP)</h3>
+      <p>
+        If everything else fails, you can go through the same process that is
+        being used in the factory.
+      </p>
+      <p>
+        This will temporarily brick your device if the process is not done
+        completely or incorrectly.
+      </p>
+
+      <div class="esp-buttons">
+        <button onclick={espBootloader}
+          ><span class="icon">memory</span>ESP Bootloader</button
+        >
+        <button onclick={flashImages}
+          ><span class="icon">developer_board</span>Flash Images</button
+        >
+        <label
+          ><input type="checkbox" id="erase" bind:checked={eraseAll} />Erase All</label
+        >
+        <button onclick={eraseSPI}
+          ><span class="icon">developer_board</span>Erase SPI Flash</button
+        >
+      </div>
+
+      <pre>{terminalOutput}</pre>
+    </section>
+  {/if}
+</div>
+
+<style lang="scss">
+  h2 > em {
+    font-style: normal;
+    transition: color 200ms ease;
+  }
+
+  h3 {
+    margin-block-start: 4em;
+  }
+
+  pre {
+    overflow: auto;
+  }
+
+  .primary {
+    color: var(--md-sys-color-primary);
+  }
+
+  .error {
+    color: var(--md-sys-color-error);
+  }
+
+  .container {
+    width: calc(min(100%, 16cm));
+    overflow: auto;
+  }
+
+  @keyframes rotate {
+    0% {
+      transform: rotate(120deg);
+      opacity: 0;
+    }
+
+    20% {
+      transform: rotate(120deg);
+      opacity: 0;
+    }
+
+    60% {
+      opacity: 1;
+    }
+
+    100% {
+      transform: rotate(270deg);
+      opacity: 0;
+    }
+  }
+
+  button.inline-button {
+    display: inline;
+    padding: 0;
+    margin: 0;
+    height: unset;
+    font-size: inherit;
+    color: var(--md-sys-color-primary);
+
+    .icon {
+      font-size: 1.2em;
+      translate: 0 0.1em;
+      padding-inline-end: 0.2em;
+    }
+  }
+
+  .icon.ok {
+    font-size: 1.2em;
+    translate: 0 0.1em;
+    --icon-fill: 1;
+  }
+
+  .faded {
+    opacity: 0.8;
+  }
+
+  button.update-button {
+    overflow: hidden;
+    position: relative;
+    height: 42px;
+
+    border: 2px solid currentcolor;
+    border-radius: 8px;
+
+    outline: 2px dashed currentcolor;
+    outline-offset: 4px;
+
+    background: var(--md-sys-color-background);
+    transition:
+      border 200ms ease,
+      color 200ms ease;
+
+    margin: 6px;
+    margin-block: 16px;
+
+    &.primary {
+      color: var(--md-sys-color-primary);
+      background: none;
+    }
+
+    &.working {
+      border-color: transparent;
+    }
+
+    &.working::before {
+      z-index: -1;
+      position: absolute;
+      background: var(--md-sys-color-background);
+      width: calc(100% - 4px);
+      height: calc(100% - 4px);
+      border-radius: 8px;
+      content: "";
+    }
+
+    &.working::after {
+      z-index: -2;
+      position: absolute;
+      content: "";
+      background: var(--md-sys-color-primary);
+      animation: rotate 1s ease-out forwards infinite;
+      height: 30%;
+      width: 120%;
+    }
+  }
+
+  hr {
+    color: var(--md-sys-color-outline);
+    margin-block: 3em;
+    margin-inline: 5em;
+    border-style: dashed;
+  }
+
+  .files {
+    list-style: none;
+    display: flex;
+    padding: 0;
+    gap: 8px;
+  }
+
+  a[download] {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    grid-template-rows: 1fr;
+    border: 1px solid var(--md-sys-color-outline);
+    border-radius: 8px;
+    font-size: 0.9em;
+    height: auto;
+
+    .size {
+      font-size: 0.8em;
+      opacity: 0.8;
+    }
+
+    .icon {
+      padding-inline-start: 0.4em;
+      grid-column: 2;
+      grid-row: 1 / span 2;
+    }
+  }
+
+  .version {
+    color: var(--md-sys-color-secondary);
+  }
+
+  .device {
+    opacity: 0.6;
+  }
+
+  .inline-link {
+    display: inline;
+    padding: 0;
+  }
+
+  .correct-device {
+    color: var(--md-sys-color-primary);
+    opacity: 1;
+  }
+
+  .incorrect-device {
+    color: var(--md-sys-color-error);
+  }
+
+  .esp-buttons {
+    display: flex;
+  }
+</style>

src/routes/(app)/ccos/[device]/[version]/+page.ts

@@ -0,0 +1,50 @@
+import type { PageLoad } from "./$types";
+import type { FileListing, Listing } from "../../listing";
+import type { VersionMeta } from "./meta";
+
+export const load = (async ({ fetch, params }) => {
+  const result = await fetch(
+    `${import.meta.env.VITE_FIRMWARE_URL}/${params.device}/${params.version}/`,
+  );
+  const data: Listing[] = await result.json();
+  const meta: VersionMeta | undefined = data.some(
+    (entry) => entry.type === "file" && entry.name === "meta.json",
+  )
+    ? await fetch(
+        `${import.meta.env.VITE_FIRMWARE_URL}/${params.device}/${params.version}/meta.json`,
+      ).then((res) => res.json())
+    : undefined;
+
+  return {
+    meta: {
+      version: meta?.version ?? params.version,
+      target: meta?.target ?? params.device,
+      path: `${import.meta.env.VITE_FIRMWARE_URL}${params.device}/${params.version}`,
+      git_commit: meta?.git_commit ?? "",
+      git_is_dirty: meta?.git_is_dirty ?? false,
+      git_date: meta?.git_date ?? data[0]?.mtime ?? "",
+      public_build: meta?.public_build ?? !params.version.startsWith("."),
+      development_mode: meta?.development_mode ?? 0,
+      update: {
+        uf2:
+          (data.find(
+            (entry) =>
+              entry.type === "file" &&
+              entry.name === (meta?.update?.uf2 ?? "CURRENT.UF2"),
+          ) as FileListing) ?? undefined,
+        ota:
+          data.find(
+            (entry) =>
+              entry.type === "file" &&
+              entry.name === (meta?.update?.ota ?? "firmware.bin"),
+          ) ?? undefined,
+        esptool: meta?.update?.esptool ?? undefined,
+      },
+      files: data.filter(
+        (entry) =>
+          entry.type === "file" && (!meta?.files || entry.name in meta.files),
+      ) as FileListing[],
+      spi_flash: meta?.spi_flash ?? undefined,
+    },
+  };
+}) satisfies PageLoad;

src/routes/(app)/ccos/[device]/[version]/meta.ts

@@ -0,0 +1,41 @@
+export interface VersionMeta {
+  version: string;
+  target: string;
+  git_commit: string;
+  git_is_dirty: boolean;
+  git_date: string;
+  public_build: boolean;
+  development_mode: number;
+  update: {
+    ota: string | null;
+    uf2: string | null;
+    esptool: EspToolData | null;
+  };
+  files: string[];
+  spi_flash: SPIFlashInfo | null;
+}
+
+export interface SPIFlashInfo {
+  type: string;
+  size: string;
+  connection: SPIConnection;
+}
+
+export interface SPIConnection {
+  clk: number;
+  q: number;
+  d: number;
+  hd: number;
+  cs: number;
+}
+
+export interface EspToolData {
+  chip: string;
+  baud: string;
+  before: string;
+  after: string;
+  flash_mode: string;
+  flash_freq: string;
+  flash_size: string;
+  files: Record<string, string>;
+}

src/routes/(app)/ccos/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;
+}

src/routes/(app)/chat/+page.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+  import { initMatrixClient, isLoggedIn, matrix } from "$lib/chat/chat";
+  import { flip } from "svelte/animate";
+  import { slide } from "svelte/transition";
+  import Login from "./Login.svelte";
+  import { onMount } from "svelte";
+  import { browser } from "$app/environment";
+
+  onMount(async () => {
+    if (browser) {
+      await initMatrixClient();
+    }
+  });
+
+  let { children } = $props();
+
+  let spaces = $derived($matrix?.topLevelSpaces$);
+
+  function spaceShort(name: string) {
+    return name
+      .split(" ")
+      .map((it) => it[0])
+      .join("");
+  }
+</script>
+
+{#if $isLoggedIn}
+  <div class="layout">
+    <nav class="spaces">
+      <a href="/chat/chats" class="icon chats">chat</a>
+      <hr />
+      {#if $spaces}
+        <ul>
+          {#each $spaces as space (space.roomId)}
+            <li animate:flip transition:slide>
+              <a class="space" href="/chat/space/{space.roomId}">
+                {spaceShort(space.name)}
+              </a>
+            </li>
+          {/each}
+        </ul>
+      {/if}
+      <button class="icon">add</button>
+    </nav>
+  </div>
+{:else}
+  <Login />
+{/if}
+
+<style lang="scss">
+  nav {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .layout {
+    display: flex;
+    height: 100%;
+    width: 100%;
+  }
+
+  hr {
+    width: 60%;
+    height: 1px;
+  }
+
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  button,
+  a {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    width: 56px;
+    height: 56px;
+    background: var(--md-sys-color-surface-variant);
+  }
+
+  .chats {
+    font-size: 24px;
+  }
+
+  .space {
+    font-size: 20px;
+    margin-bottom: 8px;
+  }
+</style>

src/routes/(app)/chat/Login.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { matrixClient } from "$lib/chat/chat";
+
+  function passwordLogin() {
+    // TODO
+  }
+</script>
+
+{#if $matrixClient}
+  {#await $matrixClient.loginFlows() then flows}
+    {#each flows.flows as flow}
+      {#if flow.type === "m.login.sso"}
+        <a
+          href={$matrixClient.getSsoLoginUrl(`${window.location.origin}/chat/`)}
+        >
+          {#each flow.identity_providers as idp}
+            {#if idp.icon}
+              <img src={$matrixClient.mxcUrlToHttp(idp.icon)} alt={idp.name} />
+            {:else}
+              {idp.name}
+            {/if}
+          {/each}
+        </a>
+      {:else if flow.type === "m.login.password"}
+        <form onsubmit={passwordLogin}>
+          <input name="username" type="text" placeholder="Username" />
+          <input name="password" type="password" placeholder="Password" />
+          <button type="submit">Login</button>
+        </form>
+      {/if}
+    {/each}
+  {/await}
+{/if}

src/routes/(app)/config/+layout.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import PageTransition from "./PageTransition.svelte";
+  import Navigation from "./Navigation.svelte";
+
+  let { children }: { children?: Snippet } = $props();
+</script>
+
+<Navigation />
+
+{#if children}
+  <PageTransition>
+    {#if children}
+      {@render children()}
+    {/if}
+  </PageTransition>
+{/if}