2.7.0

refactor: remove old editor/chat/learn links

icons.config.js

@@ -34,6 +34,7 @@ const config = {
     "abc",
     "function",
     "cloud_done",
+    "counter_4",
     "backup",
     "cloud_download",
     "cloud_off",
@@ -46,14 +47,17 @@ const config = {
     "step_over",
     "step_into",
     "step_out",
+    "timer_play",
     "settings_backup_restore",
     "sound_detection_loud_sound",
     "ring_volume",
+    "skillet",
     "wifi",
     "power_settings_circle",
     "graphic_eq",
     "mail",
     "calculate",
+    "playground_2",
     "open_in_browser",
     "chevron_backward",
     "chevron_forward",
@@ -75,9 +79,13 @@ const config = {
     "light_mode",
     "palette",
     "translate",
+    "smart_toy",
+    "visibility_off",
     "play_arrow",
     "extension",
     "upload_file",
+    "file_export",
+    "file_save",
     "commit",
     "bug_report",
     "delete",
@@ -89,6 +97,7 @@ const config = {
     "undo",
     "redo",
     "replay",
+    "clock_loader_80",
     "reply",
     "navigate_before",
     "navigate_next",
@@ -139,15 +148,29 @@ const config = {
     "developer_board",
     "developer_board_off",
     "memory",
+    "gamepad_circle_up",
+    "gamepad_circle_left",
+    "gamepad_circle_down",
+    "gamepad_circle_right",
+    "trail_length_medium",
+    "blur_short",
+    "combine_columns",
+    "animation",
+    "text_select_move_back_word",
   ],
   codePoints: {
     speed: "e9e4",
     arrow_split: "e985",
     arrow_circle_down: "f181",
     arrow_circle_up: "f182",
+    gamepad_circle_up: "eecd",
+    gamepad_circle_right: "eece",
+    gamepad_circle_left: "eecf",
+    gamepad_circle_down: "eed0",
     counter_1: "f784",
     counter_2: "f783",
     counter_3: "f782",
+    counter_4: "f781",
     ios_share: "e6b8",
     light_mode: "e518",
     upload_file: "e9fc",
@@ -160,6 +183,8 @@ const config = {
     routine: "e20c",
     experiment: "e686",
     dictionary: "f539",
+    visibility_off: "e8f5",
+    file_save: "f17f",
   },
 };
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "charachorder-device-manager",
-  "version": "2.4.0",
+  "version": "2.7.0",
   "license": "AGPL-3.0-or-later",
   "private": true,
   "engines": {
@@ -34,64 +34,68 @@
     "typesafe-i18n": "typesafe-i18n"
   },
   "devDependencies": {
-    "@codemirror/autocomplete": "^6.18.6",
-    "@codemirror/commands": "^6.8.1",
+    "@codemirror/autocomplete": "^6.20.0",
+    "@codemirror/commands": "^6.10.1",
     "@codemirror/lang-javascript": "^6.2.4",
-    "@codemirror/language": "^6.11.2",
+    "@codemirror/language": "^6.11.3",
+    "@codemirror/merge": "^6.11.2",
     "@codemirror/state": "^6.5.2",
-    "@codemirror/view": "^6.38.1",
-    "@fontsource-variable/material-symbols-rounded": "^5.2.17",
-    "@fontsource-variable/noto-sans-mono": "^5.2.7",
-    "@lezer/highlight": "^1.2.1",
+    "@codemirror/view": "^6.39.4",
+    "@fontsource-variable/material-symbols-rounded": "^5.2.30",
+    "@fontsource-variable/noto-sans-mono": "^5.2.10",
+    "@lezer/common": "^1.4.0",
+    "@lezer/generator": "^1.8.0",
+    "@lezer/highlight": "^1.2.3",
+    "@lezer/lr": "^1.4.5",
     "@material/material-color-utilities": "^0.3.0",
     "@melt-ui/pp": "^0.3.2",
     "@melt-ui/svelte": "^0.86.6",
     "@modyfi/vite-plugin-yaml": "^1.1.1",
-    "@sveltejs/adapter-static": "^3.0.8",
-    "@sveltejs/kit": "^2.26.1",
-    "@sveltejs/vite-plugin-svelte": "^6.1.0",
+    "@sveltejs/adapter-static": "^3.0.10",
+    "@sveltejs/kit": "^2.49.2",
+    "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "@tauri-apps/api": "^1.6.0",
     "@tauri-apps/cli": "^1.6.0",
     "@types/dom-view-transitions": "^1.0.6",
-    "@types/semver": "^7.7.0",
+    "@types/js-yaml": "^4.0.9",
+    "@types/semver": "^7.7.1",
     "@types/w3c-web-serial": "^1.0.8",
-    "@types/w3c-web-usb": "^1.0.10",
-    "@types/wicg-file-system-access": "^2023.10.6",
-    "@vite-pwa/sveltekit": "^1.0.0",
-    "autoprefixer": "^10.4.21",
+    "@types/w3c-web-usb": "^1.0.13",
+    "@types/wicg-file-system-access": "^2023.10.7",
+    "@vite-pwa/sveltekit": "^1.1.0",
+    "autoprefixer": "^10.4.23",
     "codemirror": "^6.0.2",
     "cypress": "^14.5.3",
     "d3": "^7.9.0",
-    "esptool-js": "^0.5.6",
-    "flexsearch": "^0.8.205",
+    "esptool-js": "^0.5.7",
+    "flexsearch": "^0.8.212",
     "fontkit": "^2.0.4",
     "glob": "^11.0.3",
+    "js-yaml": "^4.1.1",
     "jsdom": "^26.1.0",
-    "matrix-js-sdk": "^37.12.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.6.2",
+    "prettier": "^3.7.4",
     "prettier-plugin-css-order": "^2.1.2",
-    "prettier-plugin-svelte": "^3.4.0",
+    "prettier-plugin-svelte": "^3.4.1",
     "rxjs": "^7.8.2",
-    "sass": "^1.89.2",
-    "semver": "^7.7.2",
+    "sass": "^1.97.0",
+    "semver": "^7.7.3",
     "socket.io-client": "^4.8.1",
-    "stylelint": "^16.23.0",
-    "stylelint-config-clean-order": "^7.0.0",
+    "stylelint": "^16.26.1",
     "stylelint-config-html": "^1.1.0",
     "stylelint-config-prettier-scss": "^1.0.0",
-    "stylelint-config-recommended-scss": "^15.0.1",
-    "stylelint-config-standard-scss": "^15.0.1",
+    "stylelint-config-recommended-scss": "^16.0.2",
+    "stylelint-config-standard-scss": "^16.0.0",
     "svelte": "5.37.1",
-    "svelte-check": "^4.3.0",
+    "svelte-check": "^4.3.4",
     "svelte-preprocess": "^6.0.3",
     "tippy.js": "^6.3.7",
     "typesafe-i18n": "^5.26.2",
     "typescript": "^5.8.3",
     "vite": "^7.0.6",
-    "vite-plugin-mkcert": "^1.17.8",
+    "vite-plugin-mkcert": "^1.17.9",
     "vite-plugin-pwa": "^1.0.2",
-    "vitest": "^3.2.4",
+    "vitest": "^4.0.16",
     "web-serial-polyfill": "^1.0.15",
     "workbox-window": "^7.3.0"
   },

pnpm-workspace.yaml

@@ -0,0 +1,2 @@
+onlyBuiltDependencies:
+  - svelte-preprocess

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "app"
-version = "2.4.0"
+version = "2.7.0"
 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": "2.4.0" },
+  "package": { "productName": "amacc1ng", "version": "2.7.0" },
   "tauri": {
     "allowlist": { "all": false },
     "bundle": {

src/i18n/de/index.ts

@@ -6,7 +6,7 @@ const de = {
   saveActions: {
     UNDO: "Rückgängig (<kbd class='icon'>shift</kbd> halten um alle Änderungen rückgängig zu machen)",
     REDO: "Wiederholen",
-    SAVE: "Speichern",
+    SAVE: "Anwended",
   },
   update: {
     TITLE: "Gerät aktualisieren",
@@ -18,9 +18,9 @@ const de = {
   },
   backup: {
     TITLE: "Backup",
-    AUTO_BACKUP: "Auto-backup",
+    AUTO_BACKUP: "Beschleunigtes Verbinden",
     DISCLAIMER:
-      "Das Backup in diesem Browser gespeichert und bleibt nur auf diesem Computer.",
+      "<b>Nicht auf öffentlichen oder geteilten Computern einschalten.</b> Gerätedaten werden für schnelleren Zugriff lokal zwischengespeichert.",
     DOWNLOAD: "Komplettes Profil",
     RESTORE: "Wiederherstellen",
   },

src/i18n/en/index.ts

@@ -7,16 +7,16 @@ const en = {
   saveActions: {
     UNDO: "Undo (hold <kbd class='icon'>shift</kbd> to undo all changes)",
     REDO: "Redo",
-    SAVE: "Save",
+    SAVE: "Apply",
   },
   update: {
     TITLE: "Update your device",
   },
   backup: {
     TITLE: "Backup",
-    AUTO_BACKUP: "Auto-backup",
+    AUTO_BACKUP: "Fast Connect",
     DISCLAIMER:
-      "Whenever you connect this device to browser, a backup is made locally and kept only on your computer.",
+      "<b>Turn off if using a shared or public computer.</b> Caches your device's data locally for quick access next time you connect.",
     DOWNLOAD: "Full profile",
     RESTORE: "Restore",
   },

src/lib/ProgressButton.svelte

@@ -0,0 +1,121 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLButtonAttributes } from "svelte/elements";
+
+  let {
+    onclick,
+    children,
+    working,
+    progress,
+    error,
+    disabled = false,
+    element = $bindable(),
+    ...restProps
+  }: {
+    onclick: () => void;
+    children: Snippet;
+    working: boolean;
+    progress: number;
+    error?: string;
+    disabled?: boolean;
+    element?: HTMLButtonElement;
+  } & HTMLButtonAttributes = $props();
+</script>
+
+<button
+  class:working={working && (progress <= 0 || progress >= 1)}
+  class:progress={working && progress > 0 && progress < 1}
+  style:--progress="{progress * 100}%"
+  class:primary={!error}
+  class:error={!!error}
+  disabled={disabled || working}
+  bind:this={element}
+  {...restProps}
+  {onclick}>{@render children()}</button
+>
+
+<style lang="scss">
+  @keyframes rotate {
+    0% {
+      transform: rotate(120deg);
+      opacity: 0;
+    }
+
+    20% {
+      transform: rotate(120deg);
+      opacity: 0;
+    }
+
+    60% {
+      opacity: 1;
+    }
+
+    100% {
+      transform: rotate(270deg);
+      opacity: 0;
+    }
+  }
+
+  button {
+    --height: 42px;
+    --border-radius: calc(var(--height) / 2);
+
+    position: relative;
+    transition:
+      border 200ms ease,
+      color 200ms ease;
+
+    margin: 6px;
+
+    outline: 2px dashed currentcolor;
+    outline-offset: 4px;
+
+    border: 2px solid currentcolor;
+    border-radius: var(--border-radius);
+
+    background: var(--md-sys-color-background);
+    height: var(--height);
+    overflow: hidden;
+
+    &.primary {
+      background: none;
+      color: var(--md-sys-color-primary);
+    }
+
+    &.progress,
+    &.working {
+      border-color: transparent;
+    }
+
+    &.working::before {
+      position: absolute;
+      z-index: -1;
+      border-radius: calc(var(--border-radius) - 2px);
+      background: var(--md-sys-color-background);
+      width: calc(100% - 4px);
+      height: calc(100% - 4px);
+      content: "";
+    }
+
+    &.working::after {
+      position: absolute;
+      z-index: -2;
+      animation: rotate 1s ease-out forwards infinite;
+      background: var(--md-sys-color-primary);
+      width: 120%;
+      height: 30%;
+      content: "";
+    }
+
+    &.progress::after {
+      position: absolute;
+      left: 0;
+      opacity: 0.2;
+      z-index: -2;
+      background: var(--md-sys-color-primary);
+      width: var(--progress);
+      height: 100%;
+      content: "";
+    }
+  }
+</style>

src/lib/assets/layouts/layout.d.ts

@@ -0,0 +1,19 @@
+export interface CompiledLayout {
+  name: string;
+  size: [number, number];
+  keys: CompiledLayoutKey[];
+}
+
+export interface CompiledLayoutKey {
+  id: number;
+  shape: "quarter-circle" | "square";
+  cornerRadius: number;
+  size: [number, number];
+  pos: [number, number];
+  rotate: number;
+}
+
+declare module "*.layout.yml" {
+  const layout: CompiledLayout;
+  export default layout;
+}

src/lib/backup/backup.ts

@@ -72,22 +72,26 @@ export function createSettingsBackup(): CharaSettingsFile {
   };
 }
 
-export async function restoreBackup(event: Event) {
+export async function restoreBackup(
+  event: Event,
+  only?: "chords" | "layout" | "settings",
+) {
   const input = (event.target as HTMLInputElement).files![0];
   if (!input) return;
   const text = await input.text();
   if (input.name.endsWith(".json")) {
-    restoreFromFile(JSON.parse(text));
+    restoreFromFile(JSON.parse(text), only);
   } else if (isCsvLayout(text)) {
-    restoreFromFile(csvLayoutToJson(text));
+    restoreFromFile(csvLayoutToJson(text), only);
   } else if (isCsvChords(text)) {
-    restoreFromFile(csvChordsToJson(text));
+    restoreFromFile(csvChordsToJson(text), only);
   } else {
   }
 }
 
 export function restoreFromFile(
   file: CharaBackupFile | CharaSettingsFile | CharaLayoutFile | CharaChordFile,
+  only?: "chords" | "layout" | "settings",
 ) {
   if (file.charaVersion !== 1) throw new Error("Incompatible backup");
   switch (file.type) {
@@ -97,9 +101,13 @@ export function restoreFromFile(
       let backupDevice = recent[1].device;
       if (backupDevice === "TWO" || backupDevice === "M4G")
         backupDevice = "ONE";
+      else if (backupDevice === "ZERO" || backupDevice === "ENGINE")
+        backupDevice = "X";
       let currentDevice = get(serialPort)?.device;
-      if (currentDevice === "TWO" || backupDevice === "M4G")
+      if (currentDevice === "TWO" || currentDevice === "M4G")
         currentDevice = "ONE";
+      else if (currentDevice === "ZERO" || currentDevice === "ENGINE")
+        currentDevice = "X";
 
       if (backupDevice !== currentDevice) {
         alert("Backup is incompatible with this device");
@@ -108,33 +116,45 @@ export function restoreFromFile(
 
       changes.update((changes) => {
         changes.push([
-          ...getChangesFromChordFile(recent[0]),
-          ...getChangesFromLayoutFile(recent[1]),
-          ...getChangesFromSettingsFile(recent[2]),
+          ...(!only || only === "chords"
+            ? getChangesFromChordFile(recent[0])
+            : []),
+          ...(!only || only === "layout"
+            ? getChangesFromLayoutFile(recent[1])
+            : []),
+          ...(!only || only === "settings"
+            ? getChangesFromSettingsFile(recent[2])
+            : []),
         ]);
         return changes;
       });
       break;
     }
     case "chords": {
-      changes.update((changes) => {
-        changes.push(getChangesFromChordFile(file));
-        return changes;
-      });
+      if (!only || only === "chords") {
+        changes.update((changes) => {
+          changes.push(getChangesFromChordFile(file));
+          return changes;
+        });
+      }
       break;
     }
     case "layout": {
-      changes.update((changes) => {
-        changes.push(getChangesFromLayoutFile(file));
-        return changes;
-      });
+      if (!only || only === "layout") {
+        changes.update((changes) => {
+          changes.push(getChangesFromLayoutFile(file));
+          return changes;
+        });
+      }
       break;
     }
     case "settings": {
-      changes.update((changes) => {
-        changes.push(getChangesFromSettingsFile(file));
-        return changes;
-      });
+      if (!only || only === "settings") {
+        changes.update((changes) => {
+          changes.push(getChangesFromSettingsFile(file));
+          return changes;
+        });
+      }
       break;
     }
     default: {

src/lib/ccos/attachment.ts

@@ -1,26 +1,35 @@
 import type { Attachment } from "svelte/attachments";
-import { browser } from "$app/environment";
-import { persistentWritable } from "$lib/storage";
+import type { CharaDevice } from "$lib/serial/device";
+import type { CCOS, CCOSKeyboardEvent } from "./ccos";
+import type { ReplayRecorder } from "$lib/charrecorder/core/recorder";
 
-export const emulatedCCOS = persistentWritable("emulatedCCOS", false);
-
-export function ccosKeyInterceptor() {
-  return ((element: Window) => {
-    const ccos = browser
-      ? import("./ccos").then((module) => module.fetchCCOS(".test"))
-      : Promise.resolve(undefined);
+export function ccosKeyInterceptor(
+  port: CharaDevice | undefined,
+  recorder: ReplayRecorder,
+) {
+  return ((element: HTMLElement) => {
+    const ccos =
+      port?.port && "handleKeyEvent" in port?.port
+        ? (port.port as CCOS)
+        : undefined;
+    console.log("Attaching CCOS key interceptor", ccos);
 
     function onEvent(event: KeyboardEvent) {
-      ccos.then((it) => it?.handleKeyEvent(event));
+      ccos?.handleKeyEvent(event);
+      if (!event.defaultPrevented) {
+        recorder.next(event);
+      }
     }
 
-    element.addEventListener("keydown", onEvent, true);
-    element.addEventListener("keyup", onEvent, true);
+    if (ccos) {
+      element.addEventListener("keydown", onEvent, true);
+      element.addEventListener("keyup", onEvent, true);
+      element.add;
+    }
 
     return () => {
-      ccos.then((it) => it?.destroy());
       element.removeEventListener("keydown", onEvent, true);
       element.removeEventListener("keyup", onEvent, true);
     };
-  }) satisfies Attachment<Window>;
+  }) satisfies Attachment<HTMLElement>;
 }

src/lib/ccos/ccos-events.ts

@@ -15,7 +15,7 @@ export interface CCOSKeyReleaseEvent {
 
 export interface CCOSSerialEvent {
   type: "serial";
-  data: number;
+  data: Uint8Array;
 }
 
 export type CCOSInEvent =

src/lib/ccos/ccos.ts

@@ -1,5 +1,5 @@
 import { getMeta } from "$lib/meta/meta-storage";
-import { connectable, from, multicast, Subject } from "rxjs";
+import type { SerialPortLike } from "$lib/serial/device";
 import type {
   CCOSInitEvent,
   CCOSKeyPressEvent,
@@ -8,9 +8,9 @@ import type {
 } from "./ccos-events";
 import { KEYCODE_TO_SCANCODE, SCANCODE_TO_KEYCODE } from "./ccos-interop";
 
-const device = ".zero_wasm";
+const device = "zero_wasm";
 
-class CCOSKeyboardEvent extends KeyboardEvent {
+export class CCOSKeyboardEvent extends KeyboardEvent {
   constructor(...params: ConstructorParameters<typeof KeyboardEvent>) {
     super(...params);
   }
@@ -22,14 +22,56 @@ const MASK_ALT = 0b0100_0100;
 const MASK_ALT_GRAPH = 0b0000_0100;
 const MASK_GUI = 0b1000_1000;
 
-export class CCOS {
+export class CCOS implements SerialPortLike {
   private readonly currKeys = new Set<number>();
 
-  private readonly layout = new Map<string, string>();
+  private readonly layout = new Map<string, string>([
+    ...Array.from(
+      { length: 26 },
+      (_, i) =>
+        [
+          JSON.stringify([`Key${String.fromCharCode(65 + i)}`, "Shift"]),
+          String.fromCharCode(65 + i),
+        ] as const,
+    ),
+    ...Array.from(
+      { length: 10 },
+      (_, i) => [JSON.stringify([`Key${i}`]), i.toString()] as const,
+    ),
+
+    [JSON.stringify(["Space"]), " "],
+    [JSON.stringify(["Backquote"]), "`"],
+    [JSON.stringify(["Minus"]), "-"],
+    [JSON.stringify(["Comma"]), ","],
+    [JSON.stringify(["Period"]), "."],
+    [JSON.stringify(["Semicolon"]), ";"],
+    [JSON.stringify(["Equal"]), "="],
+
+    [JSON.stringify(["Backquote", "Shift"]), "~"],
+    [JSON.stringify(["Minus", "Shift"]), "_"],
+    [JSON.stringify(["Comma", "Shift"]), "<"],
+    [JSON.stringify(["Period", "Shift"]), ">"],
+    [JSON.stringify(["Semicolon", "Shift"]), ":"],
+    [JSON.stringify(["Equal", "Shift"]), "+"],
+
+    [JSON.stringify(["Digit0", "Shift"]), ")"],
+    [JSON.stringify(["Digit1", "Shift"]), "!"],
+    [JSON.stringify(["Digit2", "Shift"]), "@"],
+    [JSON.stringify(["Digit3", "Shift"]), "#"],
+    [JSON.stringify(["Digit4", "Shift"]), "$"],
+    [JSON.stringify(["Digit5", "Shift"]), "%"],
+    [JSON.stringify(["Digit6", "Shift"]), "^"],
+    [JSON.stringify(["Digit7", "Shift"]), "&"],
+    [JSON.stringify(["Digit8", "Shift"]), "*"],
+    [JSON.stringify(["Digit9", "Shift"]), "("],
+  ]);
 
   private readonly worker = new Worker("/ccos-worker.js", { type: "module" });
 
-  private ready = false;
+  private resolveReady!: () => void;
+  private ready = new Promise<void>((resolve) => {
+    this.resolveReady = resolve;
+  });
 
   private lastEvent?: KeyboardEvent;
 
@@ -109,33 +151,28 @@ export class CCOS {
     this.currKeys.delete(0);
   }
 
-  private outStream = new Subject<number>();
+  private controller?: ReadableStreamDefaultController<Uint8Array>;
 
-  private readonly buffer: number[] = [];
-  private readonly outStream = new WritableStream<number>({
-    start(controller) {},
-  });
-
-  readonly readable = connectable()
-  readonly writable = new WritableStream<string>();
+  readable!: ReadableStream<Uint8Array>;
+  writable!: WritableStream<Uint8Array>;
 
   constructor(url: string) {
     this.worker.addEventListener(
       "message",
       (event: MessageEvent<CCOSOutEvent>) => {
+        if (event.data instanceof Uint8Array) {
+          this.controller?.enqueue(event.data);
+          return;
+        }
         switch (event.data.type) {
           case "ready": {
-            this.ready = true;
+            this.resolveReady();
             break;
           }
           case "report": {
             this.onReport(event.data.modifiers, event.data.keys);
             break;
           }
-          case "serial": {
-            this.outStream.next(event.data.data);
-            break;
-          }
         }
       },
     );
@@ -152,7 +189,29 @@ export class CCOS {
     } satisfies CCOSInitEvent);
   }
 
-  async destroy() {
+  getInfo(): SerialPortInfo {
+    return {};
+  }
+
+  async open(_options: SerialOptions) {
+    this.readable = new ReadableStream<Uint8Array>({
+      start: (controller) => {
+        this.controller = controller;
+      },
+    });
+    this.writable = new WritableStream<Uint8Array>({
+      write: (chunk) => {
+        this.worker.postMessage(chunk, [chunk.buffer]);
+      },
+    });
+    return this.ready;
+  }
+  async close() {
+    await this.ready;
+  }
+  async forget() {
+    await this.ready;
+    this.close();
     this.worker.terminate();
   }
 
@@ -198,7 +257,7 @@ export class CCOS {
 }
 
 export async function fetchCCOS(
-  version = ".test",
+  version = "3.0.0-rc.0",
   fetch: typeof window.fetch = window.fetch,
 ): Promise<CCOS | undefined> {
   const meta = await getMeta(device, version, fetch);

src/lib/charrecorder/CharRecorder.svelte

@@ -10,14 +10,18 @@
     replay,
     cursor = false,
     keys = false,
+    paused = false,
     children,
     ondone,
+    ontick,
   }: {
     replay: ReplayPlayer | Replay;
     cursor?: boolean;
     keys?: boolean;
+    paused?: boolean;
     children?: Snippet;
     ondone?: () => void;
+    ontick?: (time: number) => void;
   } = $props();
 
   let replayPlayer: ReplayPlayer | undefined = $state();
@@ -45,6 +49,10 @@
 
   $effect(() => {
     if (!svg || !text) return;
+    if (paused) {
+      text.textContent = finalText ?? "";
+      return;
+    }
     const player =
       replay instanceof ReplayPlayer ? replay : new ReplayPlayer(replay);
     replayPlayer = player;
@@ -63,6 +71,7 @@
     const unsubscribePlayer = player.subscribe(apply);
     textRenderer = renderer;
 
+    player.onTick = ontick;
     player.onDone = ondone;
     player.start();
     apply();
@@ -70,8 +79,11 @@
       renderer.animated = true;
     });
     return () => {
+      textRenderer = undefined;
+      replayPlayer = undefined;
       unsubscribePlayer();
-      player?.destroy();
+      player.destroy();
+      renderer.destroy();
     };
   });
 
@@ -88,7 +100,7 @@
 {#key replay}
   <svg bind:this={svg}></svg>
   {#if browser}
-    <span use:innerText={text}></span>
+    <span use:innerText={text} style:opacity={paused ? 1 : 0}></span>
   {:else if !(replay instanceof ReplayPlayer)}
     {finalText}
   {/if}
@@ -104,7 +116,6 @@
   }
 
   span {
-    opacity: 0;
     white-space: pre-wrap;
     overflow-wrap: break-word;
   }

src/lib/charrecorder/core/player.ts

@@ -12,7 +12,10 @@ export class ReplayPlayer {
 
   startTime = performance.now();
 
-  private animationFrameId: number | null = null;
+  private animationFrameId: ReturnType<typeof requestAnimationFrame> | null =
+    null;
+
+  private timeoutId: ReturnType<typeof setTimeout> | null = null;
 
   timescale = 1;
 
@@ -20,6 +23,8 @@ export class ReplayPlayer {
 
   onDone?: () => void;
 
+  onTick?: (time: number) => void;
+
   constructor(
     readonly replay: Replay,
     plugins: ReplayPlugin[] = [],
@@ -47,6 +52,7 @@ export class ReplayPlayer {
     }
 
     const now = performance.now() - this.startTime;
+    this.onTick?.(now);
 
     while (
       this.replayCursor < this.replay.keys.length &&
@@ -131,7 +137,7 @@ export class ReplayPlayer {
       }
       return this;
     }
-    setTimeout(() => {
+    this.timeoutId = setTimeout(() => {
       this.startTime = performance.now();
       this.animationFrameId = requestAnimationFrame(this.updateLoop.bind(this));
     }, delay);
@@ -139,6 +145,9 @@ export class ReplayPlayer {
   }
 
   destroy() {
+    if (this.timeoutId) {
+      clearTimeout(this.timeoutId);
+    }
     if (this.animationFrameId) {
       cancelAnimationFrame(this.animationFrameId);
     }

src/lib/charrecorder/core/recorder.ts

@@ -56,7 +56,7 @@ export class ReplayRecorder {
 
   finish(trim = true, round = true) {
     return {
-      start: maybeRound(trim ? this.replay[0]?.[2] : this.start, round),
+      start: maybeRound(trim ? this.replay[0]?.[2] : this.start, round) ?? 0,
       finish: maybeRound(
         trim
           ? Math.max(...this.replay.map((it) => it[2] + it[3]))
@@ -74,6 +74,6 @@ export class ReplayRecorder {
             ] as const,
         )
         .sort((a, b) => a[2] - b[2]),
-    };
+    } satisfies Replay;
   }
 }

src/lib/charrecorder/renderer/renderer.ts

@@ -279,6 +279,18 @@ export class TextRenderer {
     }
   }
 
+  destroy() {
+    this.cursorNode.remove();
+    for (const node of this.nodes.values()) {
+      node.remove();
+    }
+    for (const node of this.heldNodes.values()) {
+      node.remove();
+    }
+    this.nodes.clear();
+    this.heldNodes.clear();
+  }
+
   private isShiny(char: TextToken, index: number) {
     return (
       this.shiny?.includes(index) ||

src/lib/chat/MatrixRoomMembers.svelte

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

src/lib/chat/MatrixRooms.svelte

@@ -1,73 +0,0 @@
-<script lang="ts">
-  import type { Room } from "matrix-js-sdk";
-  import { matrixClient, currentRoomId } from "./chat";
-
-  let { rooms }: { rooms: Room[] } = $props();
-</script>
-
-<div class="rooms">
-  {#each $matrixClient.getRooms() as room}
-    {@const avatar = room.getMxcAvatarUrl()}
-    <button
-      class:active={$currentRoomId === room.roomId}
-      class="room"
-      onclick={() => ($currentRoomId = room.roomId)}
-    >
-      {#if avatar}
-        <img
-          alt={room.name}
-          src={$matrixClient.mxcUrlToHttp(avatar, 16, 16)}
-          width="16"
-          height="16"
-        />
-      {:else}
-        <div>#</div>
-      {/if}
-      <div>{room.name}</div>
-    </button>
-  {/each}
-
-  {#await $matrixClient.publicRooms()}
-    <div>Loading...</div>
-  {:then rooms}
-    {#each rooms.chunk as room}
-      <button class="room" onclick={() => ($currentRoomId = room.roomId)}>
-        <div>#</div>
-        <div>{room.name}</div>
-      </button>
-    {/each}
-  {:catch error}
-    <div>{error.message}</div>
-  {/await}
-</div>
-
-<style lang="scss">
-  .rooms {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    padding: 8px;
-    padding-left: 0;
-    width: 100%;
-  }
-
-  .room {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    gap: 0.5rem;
-    cursor: pointer;
-    border-radius: 8px;
-    padding-inline: 16px;
-    padding-block: 2px;
-    padding-block: 4px;
-    width: 100%;
-    height: unset;
-    min-height: 0;
-
-    &.active {
-      background: var(--md-sys-color-primary-container);
-      color: var(--md-sys-color-on-primary-container);
-    }
-  }
-</style>

src/lib/chat/MatrixTimeline.svelte

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

src/lib/chat/chat-rx.ts

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

src/lib/chat/chat.ts

@@ -1,35 +0,0 @@
-import { writable, type Writable } from "svelte/store";
-import type { MatrixClient, RoomMember } from "matrix-js-sdk";
-import { persistentWritable } from "$lib/storage";
-import {
-  themeFromSourceColor,
-  argbFromHex,
-  type CustomColorGroup,
-} from "@material/material-color-utilities";
-import type { UserTheme } from "$lib/preferences";
-
-export const matrixClient: Writable<MatrixClient> = writable();
-
-export const currentRoomId = persistentWritable<string | null>(
-  "currentRoomId",
-  null,
-);
-
-export function memberColor(
-  member: RoomMember,
-  theme: UserTheme,
-): CustomColorGroup {
-  let hash = 0;
-  member.userId.split("").forEach((char) => {
-    hash = char.charCodeAt(0) + ((hash << 5) - hash);
-  });
-  let color = "#";
-  for (let i = 0; i < 3; i++) {
-    const value = (hash >> (i * 8)) & 0xff;
-    color += value.toString(16).padStart(2, "0");
-  }
-
-  return themeFromSourceColor(argbFromHex(theme.color), [
-    { value: argbFromHex(color), name: "member", blend: true },
-  ]).customColors.find((c) => c.color.name === "member")!;
-}

src/lib/chat/events/MatrixEvent.svelte

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

src/lib/chat/events/MatrixMessageEvent.svelte

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

src/lib/chat/matrix-rx/client.ts

@@ -1,71 +0,0 @@
-import type { Direction, MatrixClient, Room } from "matrix-js-sdk";
-import {
-  filter,
-  map,
-  type Observable,
-  of,
-  distinctUntilChanged,
-  merge,
-} from "rxjs";
-import { fromMatrixClientEvent } from "./events";
-
-function roomListDistinct(prev: Room[], curr: Room[]) {
-  if (prev.length !== curr.length) return false;
-  for (let i = 0; i < prev.length; i++) {
-    if (prev[i]!.roomId !== curr[i]!.roomId) return false;
-  }
-  return true;
-}
-
-export class MatrixRx {
-  topLevelRooms$: Observable<Room[]>;
-
-  topLevelSpaces$: Observable<Room[]>;
-
-  topLevelChats$: Observable<Room[]>;
-
-  constructor(private client: MatrixClient) {
-    this.topLevelRooms$ = merge(
-      of([]),
-      fromMatrixClientEvent(client, "Room"),
-      fromMatrixClientEvent(client, "deleteRoom"),
-      fromMatrixClientEvent(client, "Room.myMembership"),
-      fromMatrixClientEvent(client, "Room.CurrentStateUpdated").pipe(
-        filter(
-          ([_room, prev, curr]) =>
-            prev.getStateEvents("m.space.parent").length !==
-            curr.getStateEvents("m.space.parent").length,
-        ),
-      ),
-    ).pipe(
-      map(() =>
-        this.client.getVisibleRooms().filter(
-          (room) =>
-            room.getMyMembership() !== "leave" &&
-            room
-              .getLiveTimeline()
-              .getState("f" as Direction.Forward)
-              ?.getStateEvents("m.space.parent").length === 0,
-        ),
-      ),
-      distinctUntilChanged(roomListDistinct),
-    );
-
-    this.topLevelSpaces$ = this.topLevelRooms$.pipe(
-      map((rooms) => rooms.filter((room) => room.isSpaceRoom())),
-      distinctUntilChanged(roomListDistinct),
-    );
-
-    this.topLevelChats$ = this.topLevelRooms$.pipe(
-      map((rooms) => rooms.filter((room) => !room.isSpaceRoom())),
-      distinctUntilChanged(roomListDistinct),
-    );
-  }
-}
-
-export class SpaceRx {
-  constructor(
-    private client: MatrixClient,
-    private space: Room,
-  ) {}
-}

src/lib/chat/matrix-rx/events.ts

@@ -1,11 +0,0 @@
-import type { ClientEventHandlerMap, MatrixClient } from "matrix-js-sdk";
-import { fromEvent, type Observable } from "rxjs";
-
-export function fromMatrixClientEvent<T extends keyof ClientEventHandlerMap>(
-  client: MatrixClient,
-  eventName: `${T}`, // hack so we can use strings instead of enums
-): Observable<Parameters<ClientEventHandlerMap[T]>> {
-  return fromEvent(client, eventName) as Observable<
-    Parameters<ClientEventHandlerMap[T]>
-  >;
-}

src/lib/chat/matrix-rx/rooms.ts

@@ -1,85 +0,0 @@
-import type {
-  MatrixClient,
-  MatrixEvent,
-  Room,
-  Direction,
-  RoomState,
-  RoomStateEventHandlerMap,
-  EventType,
-} from "matrix-js-sdk";
-import { fromMatrixClientEvent } from "./events";
-import {
-  map,
-  filter,
-  merge,
-  startWith,
-  Observable,
-  of,
-  fromEvent,
-  concat,
-  defer,
-} from "rxjs";
-
-export function matrixRoom$(
-  client: MatrixClient,
-  roomId: string | undefined,
-): Observable<Room | undefined> {
-  return merge([
-    fromMatrixClientEvent(client, "Room").pipe(
-      filter(([room]) => room.roomId === roomId),
-    ),
-    fromMatrixClientEvent(client, "deleteRoom").pipe(
-      filter(([id]) => id === roomId),
-    ),
-  ]).pipe(
-    startWith([]),
-    map(() => client.getRoom(roomId) ?? undefined),
-  );
-}
-
-export function roomTimeline$(
-  client: MatrixClient,
-  room: Room | undefined,
-): Observable<MatrixEvent[] | undefined> {
-  if (!room) return of(undefined);
-  const eventTimeline = room.getLiveTimeline();
-
-  return fromMatrixClientEvent(client, "Room.timeline").pipe(
-    filter(
-      ([, eventRoom]) =>
-        eventRoom !== undefined && eventRoom.roomId === room.roomId,
-    ),
-    startWith([]),
-    map(() => eventTimeline.getEvents()),
-  );
-}
-
-export function roomCurrentStateEvents$(
-  client: MatrixClient,
-  room: Room,
-  eventType: EventType | string,
-): Observable<MatrixEvent[]> {
-  return concat(
-    defer(() =>
-      of(
-        room
-          .getLiveTimeline()
-          .getState("f" as Direction.Forward)
-          ?.getStateEvents(eventType) ?? [],
-      ),
-    ),
-    fromMatrixClientEvent(client, "Room.CurrentStateUpdated").pipe(
-      filter(([room]) => room.roomId === room.roomId),
-      map(([_room, _prev, curr]) => curr.getStateEvents(eventType)),
-    ),
-  );
-}
-
-export function fromRoomStateEvent<T extends keyof RoomStateEventHandlerMap>(
-  state: RoomState,
-  eventName: `${T}`,
-): Observable<Parameters<RoomStateEventHandlerMap[T]>> {
-  return fromEvent(state, eventName) as Observable<
-    Parameters<RoomStateEventHandlerMap[T]>
-  >;
-}

src/lib/chat/matrix-rx/timeline.ts

@@ -1,19 +0,0 @@
-import type { EventTimeline, MatrixClient, MatrixEvent } from "matrix-js-sdk";
-import { filter, map, of, startWith, type Observable } from "rxjs";
-import { fromMatrixClientEvent } from "./events";
-
-export function roomTimeline(
-  client: MatrixClient,
-  roomId: string | undefined,
-): Observable<MatrixEvent[]> {
-  if (!roomId) return of([]);
-  const room = client.getRoom(roomId);
-  if (!room) return of([]);
-  const eventTimeline = room.getLiveTimeline();
-
-  return fromMatrixClientEvent(client, "Room.timeline").pipe(
-    filter(([, room]) => room?.roomId === roomId),
-    startWith([]),
-    map(() => eventTimeline.getEvents()),
-  );
-}

src/lib/chord-editor/AutospaceSelector.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import { actionTooltip } from "$lib/title";
+
+  let {
+    onchange,
+    value,
+    variant,
+  }: {
+    value: boolean;
+    variant: "start" | "end";
+    onchange: (
+      event: Event & { currentTarget: EventTarget & HTMLInputElement },
+    ) => void;
+  } = $props();
+</script>
+
+{#snippet tooltip()}
+  {#if value}
+    {#if variant === "start"}
+      <b>Remove</b> preceding space
+    {:else}
+      <b>Add</b> trailing space
+    {/if}
+  {:else if variant === "start"}
+    <b>Keep</b> preceding space
+  {:else}
+    <b>Add</b> trailing space
+  {/if}
+{/snippet}
+<label class="autospace" {@attach actionTooltip(tooltip)}
+  ><span class="icon">space_bar</span><input
+    checked={!value}
+    {onchange}
+    type="checkbox"
+  /></label
+>
+
+<style lang="scss">
+  label.autospace {
+    display: inline-flex;
+    vertical-align: middle;
+    margin-inline: 8px;
+    border-radius: 4px;
+    background: var(--md-sys-color-tertiary-container);
+    padding-inline: 0;
+    height: 1em;
+    color: var(--md-sys-color-on-tertiary-container);
+    font-size: 1.3em;
+
+    &:has(:checked) {
+      opacity: var(--auto-space-show, 0);
+    }
+  }
+</style>

src/lib/chord-editor/action-plugin.ts

@@ -0,0 +1,107 @@
+import {
+  Decoration,
+  EditorView,
+  ViewPlugin,
+  ViewUpdate,
+  WidgetType,
+} from "@codemirror/view";
+import { mount, unmount } from "svelte";
+import Action from "$lib/components/Action.svelte";
+import { syntaxTree } from "@codemirror/language";
+import type { Range } from "@codemirror/state";
+
+export class ActionWidget extends WidgetType {
+  component?: {};
+  element?: HTMLElement;
+
+  constructor(readonly id: string | number) {
+    super();
+    this.id = id;
+  }
+
+  override eq(other: ActionWidget) {
+    return this.id == other.id;
+  }
+
+  toDOM() {
+    if (!this.element) {
+      this.element = document.createElement("span");
+      this.element.style.paddingInline = "2px";
+
+      this.component = mount(Action, {
+        target: this.element,
+        props: { action: this.id, display: "keys", inText: true },
+      });
+    }
+    return this.element;
+  }
+
+  override ignoreEvent() {
+    return true;
+  }
+
+  override destroy() {
+    if (this.component) {
+      unmount(this.component);
+    }
+  }
+}
+
+function actionWidgets(view: EditorView) {
+  const widgets: Range<Decoration>[] = [];
+  for (const { from, to } of view.visibleRanges) {
+    syntaxTree(view.state).iterate({
+      from,
+      to,
+      enter: (node) => {
+        if (node.name !== "ExplicitAction") return;
+        const value =
+          node.node.getChild("ActionId") ??
+          node.node.getChild("HexNumber") ??
+          node.node.getChild("DecimalNumber");
+        if (!value) return;
+        if (!node.node.getChild("ExplicitDelimEnd")) {
+          return;
+        }
+
+        const id = view.state.doc.sliceString(value.from, value.to);
+        let deco = Decoration.replace({
+          widget: new ActionWidget(
+            value.name === "ActionId" ? id : parseInt(id),
+          ),
+        });
+        widgets.push(deco.range(node.from, node.to));
+      },
+    });
+  }
+  return Decoration.set(widgets);
+}
+
+export const actionPlugin = ViewPlugin.fromClass(
+  class {
+    decorations = Decoration.none;
+
+    constructor(view: EditorView) {
+      this.decorations = actionWidgets(view);
+    }
+
+    update(update: ViewUpdate) {
+      if (
+        update.docChanged ||
+        update.viewportChanged ||
+        syntaxTree(update.startState) != syntaxTree(update.state)
+      )
+        this.decorations = actionWidgets(update.view);
+    }
+  },
+  {
+    decorations(instance) {
+      return instance.decorations;
+    },
+    provide(plugin) {
+      return EditorView.atomicRanges.of(
+        (view) => view.plugin(plugin)?.decorations ?? Decoration.none,
+      );
+    },
+  },
+);

src/lib/chord-editor/action-serializer.ts

@@ -0,0 +1,16 @@
+import { KEYMAP_CODES, type KeyInfo } from "$lib/serial/keymap-codes";
+import { get } from "svelte/store";
+
+export function canUseIdAsString(info: KeyInfo): boolean {
+  return !!info.id && /^[a-zA-Z_][a-zA-Z0-9_]*$/.test(info.id);
+}
+
+export function actionToValue(action: number | KeyInfo) {
+  const info =
+    typeof action === "number" ? get(KEYMAP_CODES).get(action) : action;
+  if (info && info.id?.length === 1)
+    return /^[<>\\\s]$/.test(info.id) ? `\\${info.id}` : info.id;
+  if (!info || !canUseIdAsString(info))
+    return `<0x${(info?.code ?? action).toString(16).padStart(2, "0")}>`;
+  return `<${info.id}>`;
+}

src/lib/chord-editor/autocomplete.ts

@@ -0,0 +1,72 @@
+import { KEYMAP_CATEGORIES, KEYMAP_CODES } from "$lib/serial/keymap-codes";
+import type {
+  Completion,
+  CompletionSection,
+  CompletionSource,
+} from "@codemirror/autocomplete";
+import { derived, get } from "svelte/store";
+import { actionToValue, canUseIdAsString } from "./action-serializer";
+
+const completionSections = derived(
+  KEYMAP_CATEGORIES,
+  (categories) =>
+    new Map(
+      categories.map(
+        (category) =>
+          [
+            category,
+            {
+              name: category.name,
+            } satisfies CompletionSection,
+          ] as const,
+      ),
+    ),
+);
+
+export const actionAutocompleteItems = derived(
+  [KEYMAP_CODES, completionSections],
+  ([codes, sections]) =>
+    codes
+      .values()
+      .map((info) => {
+        const canUseId = canUseIdAsString(info);
+        const completionValue =
+          (canUseId && info.id) ||
+          `0x${info.code.toString(16).padStart(2, "0")}`;
+        return {
+          label:
+            [
+              canUseId || !info.id ? undefined : `"${info.id}"`,
+              info.title,
+              info.variant?.replace(/^[a-z]/g, (c) => c.toUpperCase()),
+            ]
+              .filter(Boolean)
+              .join(" ") || completionValue,
+          detail: actionToValue(info),
+          section: info.category ? sections.get(info.category) : undefined,
+          info: info.description,
+          type: "keyword",
+          apply: completionValue + ">",
+        } satisfies Completion;
+      })
+      .filter(
+        (item) => typeof item.label === "string" && item.apply !== undefined,
+      )
+      .toArray(),
+);
+
+export const actionAutocomplete = ((context) => {
+  let word = context.tokenBefore([
+    "ExplicitDelimStart",
+    "ActionId",
+    "HexNumber",
+    "DecimalNumber",
+  ]);
+  if (!word) return null;
+  console.log(get(actionAutocompleteItems));
+  return {
+    from: word.type.name === "ExplicitDelimStart" ? word.to : word.from,
+    validFor: /^<?[a-zA-Z0-9_]*$/,
+    options: get(actionAutocompleteItems),
+  };
+}) satisfies CompletionSource;

src/lib/chord-editor/changes-plugin.ts

@@ -0,0 +1,17 @@
+import {
+  EditorView,
+  ViewPlugin,
+  ViewUpdate,
+  type PluginValue,
+} from "@codemirror/view";
+
+export const changesPlugin = ViewPlugin.fromClass(
+  class implements PluginValue {
+    constructor(readonly view: EditorView) {}
+
+    update(update: ViewUpdate) {}
+  },
+  {
+    eventHandlers: {},
+  },
+);

src/lib/chord-editor/chord-delim-plugin.ts

@@ -0,0 +1,157 @@
+import {
+  Decoration,
+  EditorView,
+  ViewPlugin,
+  ViewUpdate,
+  WidgetType,
+} from "@codemirror/view";
+import { syntaxTree } from "@codemirror/language";
+import type { Range } from "@codemirror/state";
+import { mount, unmount } from "svelte";
+import Action from "../components/Action.svelte";
+import type { SyntaxNodeRef } from "@lezer/common";
+import classNames from "./concatenator-button.module.scss";
+
+export class DelimWidget extends WidgetType {
+  component?: {};
+  element?: HTMLElement;
+
+  constructor(readonly hasConcatenator: boolean) {
+    super();
+  }
+
+  override eq(other: DelimWidget) {
+    return this.hasConcatenator == other.hasConcatenator;
+  }
+
+  toDOM() {
+    if (!this.element) {
+      this.element = document.createElement("span");
+      this.element.innerHTML =
+        " ⇛" + (this.hasConcatenator ? "" : " ");
+      this.element.style.scale = "1.8";
+      this.element.style.color =
+        "color-mix(in srgb, currentColor 50%, transparent)";
+
+      if (this.hasConcatenator) {
+        const button = document.createElement("button");
+        button.className = classNames["concatenator-button"]!;
+        this.component = mount(Action, {
+          target: button,
+          props: { action: 574, display: "keys", inText: true, ghost: true },
+        });
+        this.element.appendChild(button);
+      }
+    }
+    return this.element;
+  }
+
+  override ignoreEvent() {
+    return false;
+  }
+
+  override destroy() {
+    if (this.component) {
+      unmount(this.component);
+    }
+  }
+}
+
+function getJoinNode(
+  view: EditorView,
+  phraseDelimNode: SyntaxNodeRef,
+): SyntaxNodeRef | null | undefined {
+  const firstPhraseAction = phraseDelimNode.node.nextSibling
+    ?.getChild("ActionString")
+    ?.node.firstChild?.node.getChild("ExplicitAction");
+  const idNode = firstPhraseAction?.node.getChild("ActionId");
+  const actionId = idNode
+    ? view.state.doc.sliceString(idNode.from, idNode.to)
+    : null;
+  const isJoinAction =
+    actionId === "JOIN" &&
+    !!firstPhraseAction!.node.getChild("ExplicitDelimEnd");
+  return isJoinAction ? firstPhraseAction : null;
+}
+
+function actionWidgets(view: EditorView) {
+  const widgets: Range<Decoration>[] = [];
+  for (const { from, to } of view.visibleRanges) {
+    syntaxTree(view.state).iterate({
+      from,
+      to,
+      enter: (node) => {
+        if (node.name !== "PhraseDelim") return;
+        const joinNode = getJoinNode(view, node);
+
+        let deco = Decoration.replace({
+          widget: new DelimWidget(!joinNode),
+        });
+        widgets.push(deco.range(node.from, node.to));
+      },
+    });
+  }
+  return Decoration.set(widgets);
+}
+
+export const delimPlugin = ViewPlugin.fromClass(
+  class {
+    decorations = Decoration.none;
+
+    constructor(view: EditorView) {
+      this.decorations = actionWidgets(view);
+    }
+
+    update(update: ViewUpdate) {
+      if (
+        update.docChanged ||
+        update.viewportChanged ||
+        syntaxTree(update.startState) != syntaxTree(update.state)
+      )
+        this.decorations = actionWidgets(update.view);
+    }
+  },
+  {
+    decorations(instance) {
+      return instance.decorations;
+    },
+    provide(plugin) {
+      return EditorView.atomicRanges.of(
+        (view) => view.plugin(plugin)?.decorations ?? Decoration.none,
+      );
+    },
+    eventHandlers: {
+      click: (event, view) => {
+        if (!(event.target instanceof HTMLElement)) return;
+        if (
+          !(
+            event.target instanceof HTMLButtonElement ||
+            (event.target as HTMLElement).parentElement instanceof
+              HTMLButtonElement
+          )
+        )
+          return;
+
+        const chordNode = syntaxTree(view.state).resolve(
+          view.posAtDOM(event.target),
+        );
+        const delimNode = (
+          chordNode.name === "ActionString"
+            ? chordNode.parent?.parent
+            : chordNode
+        )?.getChild("PhraseDelim");
+        if (!delimNode) return;
+        const joinNode = getJoinNode(view, delimNode);
+        if (!event.target.checked && !joinNode) {
+          view.dispatch({
+            changes: {
+              from: delimNode.to,
+              insert: "<JOIN>",
+            },
+            selection: { anchor: delimNode.to + "<JOIN>".length },
+          });
+        }
+      },
+    },
+  },
+);

src/lib/chord-editor/chords-grammar-plugin.ts

@@ -0,0 +1,57 @@
+import { parser } from "./chords.grammar";
+import {
+  LRLanguage,
+  LanguageSupport,
+  HighlightStyle,
+} from "@codemirror/language";
+import { styleTags, tags } from "@lezer/highlight";
+import { actionAutocomplete } from "./autocomplete";
+
+export const chordHighlightStyle = HighlightStyle.define([
+  {
+    tag: tags.keyword,
+    paddingInline: "2px",
+    opacity: "0.5",
+  },
+  {
+    tag: tags.className,
+    backgroundColor:
+      "color-mix(in srgb, var(--md-sys-color-surface-variant) 50%, transparent)",
+    borderRadius: "4px",
+    paddingInline: "4px",
+    marginInline: "-4px",
+  },
+  {
+    tag: tags.integer,
+    color: "var(--md-sys-color-tertiary)",
+  },
+  {
+    tag: tags.angleBracket,
+    opacity: "0.5",
+  },
+  { tag: tags.modifier, opacity: "0.25" },
+  { tag: tags.escape, color: "var(--md-sys-color-primary)" },
+  { tag: tags.strong, fontWeight: "bold" },
+]);
+
+export const chordLanguage = LRLanguage.define({
+  name: "chords",
+  parser: parser.configure({
+    props: [
+      styleTags({
+        "PhraseDelim CompoundDelim": [tags.keyword, tags.strong],
+        "HexNumber DecimalNumber": [tags.className, tags.integer],
+        "ExplicitDelimStart ExplicitDelimEnd": tags.angleBracket,
+        ActionId: tags.className,
+        EscapedLetter: tags.escape,
+        Escape: [tags.escape, tags.modifier],
+      }),
+    ],
+  }),
+});
+
+export function chordLanguageSupport() {
+  return new LanguageSupport(chordLanguage, [
+    chordLanguage.data.of({ autocomplete: actionAutocomplete }),
+  ]);
+}

src/lib/chord-editor/chords.grammar

@@ -0,0 +1,27 @@
+@top Program { Chord* }
+
+ExplicitAction { ExplicitDelimStart (HexNumber | DecimalNumber | ActionId) ExplicitDelimEnd }
+EscapedSingleAction { Escape EscapedLetter }
+Action { SingleLetter | ExplicitAction | EscapedSingleAction }
+ActionString { Action* }
+ChordInput { (ActionString CompoundDelim)* ActionString }
+ChordPhrase { ActionString }
+Chord { ChordInput PhraseDelim ChordPhrase ChordDelim }
+
+@tokens {
+  @precedence {HexNumber, DecimalNumber}
+  @precedence {CompoundDelim, PhraseDelim, ExplicitDelimStart, ChordDelim, SingleLetter}
+  @precedence {EscapedLetter}
+  ExplicitDelimStart {"<"}
+  ExplicitDelimEnd {">"}
+  CompoundDelim {"+>"}
+  PhraseDelim {"=>"}
+  Escape { "\\" }
+  HexNumber { "0x" $[a-fA-F0-9]+ }
+  DecimalNumber { $[0-9]+ }
+  ActionId { $[a-zA-Z_]$[a-zA-Z0-9_]* }
+  SingleLetter { ![\\] }
+  EscapedLetter { ![] }
+  ChordDelim { ($[\n] | @eof) }
+}
+

src/lib/chord-editor/concatenator-button.module.scss

@@ -0,0 +1,13 @@
+.concatenator-button {
+  display: inline;
+  opacity: calc(var(--auto-space-show, 0) * 0.7);
+  margin: 0;
+  padding: 4px;
+  height: auto;
+
+  > :global(kbd) {
+    outline: 1px dashed var(--md-sys-color-outline);
+    outline-offset: -1px;
+    background: none;
+  }
+}

src/lib/chord-editor/grammar.d.ts

@@ -0,0 +1,3 @@
+declare module "*.grammar" {
+  export const parser: import("@lezer/lr").LRParser;
+}

src/lib/chord-editor/test.txt

@@ -0,0 +1,16 @@
+.=<LEFT_SHIFT> => =>
+;ims => <0x219><IMPULSE>
+-;<KSC_2C><LEFT_SHIFT> => <0x23e>_<0x23e>
+.;g => <0x23e>...<0x23e><LH_THUMB_3_3D>
+'dg => <0x23e>'<0x23e>
+'gl => <0x23e>'ll<0x23e>
+'ar => <0x23e>'re<0x23e>
+'gs => <0x23e>'s<0x23e>
+'ev => <0x23e>'ve<0x23e>
+<SPACE>-; => <0x23e><0x223>-<0x223><KSC_00>
+<SPACE>;<LEFT_SHIFT> => <0x23e><0x223><0x23d><0x223><KSC_00>
+<SPACE>;g => <0x23e><0x223><SPACE><0x223><KSC_00>
+deg => <0x23e>ed<0x23e>
+;gr => <0x23e>er<0x23e>
+;es => <0x23e>es<0x23e>
+;est => <0x23e>est<0x23e>

src/lib/components/Action.svelte

@@ -1,27 +1,46 @@
 <script lang="ts">
-  import { KEYMAP_CODES } from "$lib/serial/keymap-codes";
+  import { KEYMAP_CODES, KEYMAP_IDS } from "$lib/serial/keymap-codes";
   import type { KeyInfo } from "$lib/serial/keymap-codes";
   import { osLayout } from "$lib/os-layout";
-  import { tooltip } from "$lib/hover-popover";
+  import { isVerbose } from "./verbose-action";
+  import { actionTooltip } from "$lib/title";
 
   let {
     action,
     display,
-  }: { action: number | KeyInfo; display: "inline-keys" | "keys" } = $props();
+    inText = false,
+  }: {
+    action: string | number | KeyInfo;
+    display: "inline-keys" | "keys" | "verbose";
+    inText?: boolean;
+  } = $props();
 
-  let info = $derived(
+  let retrievedInfo = $derived(
     typeof action === "number"
-      ? ($KEYMAP_CODES.get(action) ?? { code: action })
-      : action,
+      ? $KEYMAP_CODES.get(action)
+      : typeof action === "string"
+        ? $KEYMAP_IDS.get(action)
+        : action,
+  );
+  let info = $derived(
+    retrievedInfo ??
+      (typeof action === "number"
+        ? ({ code: action } satisfies KeyInfo)
+        : typeof action === "string"
+          ? ({ code: 1024, id: action } satisfies KeyInfo)
+          : action),
   );
   let dynamicMapping = $derived(info.keyCode && $osLayout.get(info.keyCode));
-
-  let popover: HTMLElement | undefined = $state(undefined);
+  let hasPopover = $derived(
+    !retrievedInfo || !info.id || info.title || info.description,
+  );
 </script>
 
-{#snippet popoverSnippet()}
-  <div bind:this={popover} popover="hint">
-    &lt;{info.id ?? `0x${info.code.toString(16)}`}&gt;
+{#snippet popover()}
+  {#if retrievedInfo}
+    {#if info.icon || info.display || !info.id}
+      &lt;<b>{info.id ?? `0x${info.code.toString(16)}`}</b>&gt;
+    {/if}
     {#if info.title}
       {info.title}
     {/if}
@@ -30,53 +49,92 @@
     {:else if info.variant === "right"}
       (Right)
     {/if}
-  </div>
+    {#if info.description}
+      <br />
+      <small>{info.description}</small>
+    {/if}
+    {#if info.breaking}
+      <br />&nbsp;<i>Prevents prepended autospaces</i>
+    {/if}
+    {#if info.separator || info.breaking}
+      <br />&nbsp;<i>Stops autocorrect</i>
+    {/if}
+  {:else}
+    <b>Unknown Action</b><br />
+    {#if info.code > 1023}
+      This action cannot be translated and will be ingored.
+    {/if}
+  {/if}
 {/snippet}
 
-{#if display === "keys"}
+{#snippet kbdText()}
+  {dynamicMapping ??
+    info.icon ??
+    info.display ??
+    info.id ??
+    `0x${info.code.toString(16)}`}
+{/snippet}
+{#snippet kbdSnippet(withPopover = true)}
   <kbd
+    class:in-text={inText}
     class:icon={!!info.icon}
     class:left={info.variant === "left"}
     class:right={info.variant === "right"}
-    {@attach tooltip(popover)}
+    class:error={info.code > 1023}
+    class:warn={!retrievedInfo}
+    {@attach withPopover && hasPopover ? actionTooltip(popover) : null}
   >
-    {dynamicMapping ??
-      info.icon ??
-      info.display ??
-      info.id ??
-      `0x${info.code.toString(16)}`}
-    {@render popoverSnippet()}
+    {@render kbdText()}
   </kbd>
-{:else if display === "inline-keys"}
+{/snippet}
+{#snippet inlineKbdSnippet()}
   {#if !info.icon && dynamicMapping?.length === 1}
     <span
-      {@attach tooltip(popover)}
+      {@attach hasPopover ? actionTooltip(popover) : null}
+      class:in-text={inText}
+      class:error={info.code > 1023}
+      class:warn={!retrievedInfo}
       class:left={info.variant === "left"}
-      class:right={info.variant === "right"}
-      >{dynamicMapping}{@render popoverSnippet()}</span
+      class:right={info.variant === "right"}>{dynamicMapping}</span
     >
   {:else if !info.icon && info.id?.length === 1}
     <span
-      {@attach tooltip(popover)}
+      {@attach hasPopover ? actionTooltip(popover) : null}
+      class:in-text={inText}
+      class:error={info.code > 1023}
+      class:warn={!retrievedInfo}
       class:left={info.variant === "left"}
-      class:right={info.variant === "right"}
-      >{info.id}{@render popoverSnippet()}</span
+      class:right={info.variant === "right"}>{info.id}</span
     >
   {:else}
     <kbd
       class="inline-kbd"
+      class:in-text={inText}
       class:left={info.variant === "left"}
       class:right={info.variant === "right"}
       class:icon={!!info.icon}
-      {@attach tooltip(popover)}
-    >
-      {dynamicMapping ??
-        info.icon ??
-        info.display ??
-        info.id ??
-        `0x${info.code.toString(16)}`}{@render popoverSnippet()}</kbd
+      class:warn={!retrievedInfo}
+      class:error={info.code > 1023}
+      {@attach hasPopover ? actionTooltip(popover) : null}
     >
+      {@render kbdText()}
+    </kbd>
   {/if}
+{/snippet}
+
+{#if display === "keys"}
+  {@render kbdSnippet()}
+{:else if display === "verbose"}
+  {#if isVerbose(info)}
+    <div class="verbose" {@attach hasPopover ? actionTooltip(popover) : null}>
+      {@render kbdSnippet(false)}
+      <div class="verbose-title">{info.title}</div>
+    </div>
+  {:else}
+    {@render inlineKbdSnippet()}
+  {/if}
+{:else if display === "inline-keys" || display === "inline-text"}
+  {@render inlineKbdSnippet()}
 {/if}
 
 <style lang="scss">
@@ -84,20 +142,78 @@
     transition: color 250ms ease;
     padding-block: auto;
     height: 24px;
+
+    &.in-text {
+      display: inline-flex;
+      vertical-align: middle;
+      margin-block: auto;
+      padding-block: revert;
+    }
   }
 
+  .warn:not(.error) {
+    border-color: var(--md-sys-color-error);
+    color: var(--md-sys-color-error);
+  }
+
+  .error {
+    opacity: 0.6;
+    text-decoration: line-through;
+  }
+
+  $variant-offset: 12px;
+  $variant-padding: calc(2px + $variant-offset);
+  $variant-color: color-mix(
+    in srgb,
+    var(--md-sys-color-on-surface) 50%,
+    transparent
+  );
+
   .left {
-    border-left-width: 3px;
+    padding-inline-end: $variant-padding;
+    text-shadow: $variant-offset 0 2px $variant-color;
   }
   .right {
-    border-right-width: 3px;
+    padding-inline-start: $variant-padding;
+    text-shadow: -$variant-offset 0 2px $variant-color;
   }
 
   .inline-kbd {
     margin-inline-end: 2px;
+
+    &.in-text.icon {
+      translate: 0 -4em;
+    }
   }
 
   :global(span) + .inline-kbd {
     margin-inline-start: 2px;
   }
+
+  .verbose {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-inline: 2px;
+    min-width: 160px;
+    height: 32px;
+
+    kbd {
+      justify-content: flex-start;
+    }
+
+    .verbose-title {
+      display: -webkit-box;
+      opacity: 0.9;
+      max-width: 15ch;
+      -webkit-line-clamp: 2; /* number of lines to show */
+      line-clamp: 2;
+      overflow: hidden;
+      font-style: italic;
+      font-size: 12px;
+      text-align: left;
+      text-overflow: ellipsis;
+      -webkit-box-orient: vertical;
+    }
+  }
 </style>

src/lib/components/AnimatedNumber.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { fade, slide } from "svelte/transition";
+  import { fade } from "svelte/transition";
 
   let { value }: { value: number } = $props();
 

src/lib/components/Terminal.svelte

@@ -1,10 +1,15 @@
 <script lang="ts">
   import { serialLog, serialPort } from "$lib/serial/connection";
+  import { onMount } from "svelte";
   import { slide } from "svelte/transition";
 
+  onMount(() => {
+    io.scrollTo({ top: io.scrollHeight });
+  });
+
   function submit(event: Event) {
     event.preventDefault();
-    $serialPort?.send(0, value.trim());
+    $serialPort?.send(0, [value.trim()]);
     value = "";
     io.scrollTo({ top: io.scrollHeight });
   }

src/lib/components/Tooltip.svelte

@@ -1,9 +1,14 @@
 <script lang="ts">
-  let { title, shortcut }: { title?: string; shortcut?: string } = $props();
+  import type { Snippet } from "svelte";
+
+  let { title, shortcut }: { title?: string | Snippet; shortcut?: string } =
+    $props();
 </script>
 
-{#if title}
+{#if typeof title === "string"}
   <p>{@html title}</p>
+{:else}
+  {@render title?.()}
 {/if}
 
 {#if shortcut}

src/lib/components/layout/ActionList.svelte

@@ -0,0 +1,357 @@
+<script lang="ts">
+  import {
+    KEYMAP_CATEGORIES,
+    KEYMAP_CODES,
+    KEYMAP_IDS,
+    type KeyInfo,
+  } from "$lib/serial/keymap-codes";
+  import FlexSearch from "flexsearch";
+  import { onMount } from "svelte";
+  import ActionListItem from "$lib/components/ActionListItem.svelte";
+  import LL from "$i18n/i18n-svelte";
+  import { actionTooltip } from "$lib/title";
+  import { get } from "svelte/store";
+  import type { KeymapCategory } from "$lib/meta/types/actions";
+  import Action from "../Action.svelte";
+  import { isVerbose } from "../verbose-action";
+  import { actionToValue } from "$lib/chord-editor/action-serializer";
+
+  let {
+    currentAction = undefined,
+    nextAction = undefined,
+    autofocus = false,
+    onselect,
+    onclose,
+  }: {
+    currentAction?: number;
+    nextAction?: number;
+    autofocus?: boolean;
+    onselect?: (id: number) => void;
+    onclose?: () => void;
+  } = $props();
+
+  onMount(() => {
+    search();
+    if (autofocus) {
+      searchBox.focus();
+    }
+  });
+
+  const index = new FlexSearch.Index({ tokenize: "full" });
+
+  $effect(() => {
+    createIndex($KEYMAP_CODES);
+  });
+
+  async function createIndex(codes: Map<number, KeyInfo>) {
+    for (const [, action] of codes) {
+      await index?.addAsync(
+        action.code,
+        `${action.title || ""} ${action.variant || ""} ${action.category} ${action.id || ""} ${
+          action.description || ""
+        }`,
+      );
+    }
+  }
+
+  async function search() {
+    const groups = new Map(
+      $KEYMAP_CATEGORIES.map(
+        (category) => [category, []] as [KeymapCategory, KeyInfo[]],
+      ),
+    );
+    const result =
+      searchBox.value === ""
+        ? Array.from($KEYMAP_CODES.keys())
+        : await index!.searchAsync(searchBox.value);
+    for (const id of result) {
+      const action = $KEYMAP_CODES.get(id as number);
+      if (action?.category) {
+        groups.get(action.category)?.push(action);
+      }
+    }
+
+    function sortValue(action: KeyInfo): number {
+      return isVerbose(action) ? 0 : action.id?.length === 1 ? 2 : 1;
+    }
+    for (const actions of groups.values()) {
+      actions.sort((a, b) => sortValue(b) - sortValue(a));
+    }
+    results = groups;
+    exact = get(KEYMAP_IDS).get(searchBox.value)?.code;
+    code = Number(searchBox.value);
+  }
+
+  function select(id?: number) {
+    if (id !== undefined) {
+      onselect?.(id);
+    }
+  }
+
+  function keyboardNavigation(event: KeyboardEvent) {
+    if (event.shiftKey && event.key === "Enter" && exact !== undefined) {
+      onselect?.(exact);
+    } else if (event.key === "ArrowDown") {
+      const element =
+        resultList.querySelector("li:focus-within")?.nextSibling ??
+        resultList.querySelector("li:not(.exact)");
+      if (element instanceof HTMLLIElement) {
+        element.querySelector("button")?.focus();
+      }
+    } else if (event.key === "ArrowUp") {
+      const element =
+        resultList.querySelector("li:focus-within")?.previousSibling ??
+        resultList.querySelector("li:not(.exact)");
+      if (element instanceof HTMLLIElement) {
+        element.querySelector("button")?.focus();
+      }
+    } else {
+      searchBox.focus();
+      return;
+    }
+    event.preventDefault();
+  }
+
+  let results: Map<KeymapCategory, KeyInfo[]> = $state(new Map());
+  let exact: number | undefined = $state(undefined);
+  let code: number = $state(Number.NaN);
+
+  let searchBox: HTMLInputElement;
+  let resultList: HTMLUListElement;
+</script>
+
+<div class="content">
+  <div class="search-row">
+    <!-- svelte-ignore a11y_autofocus -->
+    <input
+      type="search"
+      bind:this={searchBox}
+      oninput={search}
+      onkeypress={keyboardNavigation}
+      placeholder={$LL.actionSearch.PLACEHOLDER()}
+    />
+    {#if onclose}
+      <button onclick={() => select(0)} {@attach actionTooltip("", "shift+esc")}
+        >{$LL.actionSearch.DELETE()}</button
+      >
+      <button
+        {@attach actionTooltip($LL.modal.CLOSE(), "esc")}
+        class="icon"
+        onclick={onclose}>close</button
+      >
+    {/if}
+  </div>
+  {#if currentAction !== undefined}
+    <aside>
+      <h3>{$LL.actionSearch.CURRENT_ACTION()}</h3>
+      <ActionListItem id={currentAction} />
+    </aside>
+    {#if nextAction}
+      <aside>
+        <h3>{$LL.actionSearch.NEXT_ACTION()}</h3>
+        <ActionListItem id={nextAction} />
+      </aside>
+    {/if}
+  {/if}
+  <ul bind:this={resultList}>
+    {#if exact !== undefined}
+      <li class="exact">
+        <i>Exact match</i>
+        <ActionListItem id={exact} onclick={() => select(exact)} />
+      </li>
+    {/if}
+    {#if !exact && code}
+      {#if code >= 2 ** 5 && code < 2 ** 13}
+        <li><button onclick={() => select(code)}>USE CODE</button></li>
+      {:else}
+        <li>Action code is out of range</li>
+      {/if}
+    {/if}
+    {#each results as [category, actions] (category)}
+      {#if actions.length > 0}
+        <div class="category">
+          <h3>{category.name}</h3>
+          <div class="description">{category.description}</div>
+          <ul>
+            {#each actions as action (action.code)}
+              <button
+                class="action-item"
+                draggable={!onclose}
+                onclick={() => select(action.code)}
+                ondragstart={onclose === undefined
+                  ? (event) => {
+                      if (!event.dataTransfer) return;
+                      event.stopPropagation();
+                      event.dataTransfer.dropEffect = "copy";
+                      event.dataTransfer.clearData();
+                      event.dataTransfer.setData(
+                        "text/plain",
+                        actionToValue(action.code),
+                      );
+                    }
+                  : undefined}
+              >
+                <Action {action} display="verbose"></Action>
+              </button>
+            {/each}
+          </ul>
+        </div>
+      {/if}
+    {/each}
+  </ul>
+</div>
+
+<style lang="scss">
+  .action-item {
+    margin: 0;
+    padding: 0;
+    height: auto;
+    font: inherit;
+
+    &[draggable="true"] {
+      cursor: grab;
+    }
+  }
+
+  aside {
+    opacity: 0.4;
+
+    margin: 8px;
+    border: 1px dashed var(--md-sys-color-outline);
+    border-radius: 8px;
+    pointer-events: none;
+
+    > h3 {
+      margin-inline-start: 16px;
+      margin-block-start: -13px;
+      margin-block-end: 0;
+
+      background: var(--md-sys-color-background);
+      padding-inline: 8px;
+      width: fit-content;
+    }
+
+    @media (prefers-contrast: more) {
+      opacity: 0.8;
+    }
+
+    @media (forced-colors: active) {
+      opacity: 1;
+      color: GrayText;
+    }
+  }
+
+  .search-row {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    margin-inline: 16px;
+  }
+
+  .content {
+    display: flex;
+    position: relative;
+    flex-direction: column;
+    transform-origin: top left;
+    border-radius: 16px;
+
+    background: var(--md-sys-color-background);
+
+    width: calc(min(30cm, 90%));
+    height: calc(min(100% - 128px, 90%));
+
+    overflow: hidden;
+
+    color: var(--md-sys-color-on-background);
+
+    @media (forced-colors: active) {
+      border: 1px solid CanvasText;
+    }
+  }
+
+  input[type="search"] {
+    transition: all 250ms ease;
+    margin-block-end: 8px;
+    border: none;
+    border-bottom: 1px solid var(--md-sys-color-surface-variant);
+
+    background: none;
+    padding-inline: 16px;
+    width: 100%;
+    height: 64px;
+    color: currentcolor;
+    font-size: 16px;
+
+    font-family: inherit;
+
+    &:focus {
+      outline: none;
+      border-bottom: 1px solid var(--md-sys-color-primary);
+    }
+  }
+
+  ul {
+    --scrollbar-color: var(--md-sys-color-surface-variant);
+
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    padding-inline: 4px;
+    height: 100%;
+
+    overflow-y: auto;
+
+    scrollbar-gutter: both-edges stable;
+  }
+
+  .category {
+    .description {
+      opacity: 0.8;
+      margin-block-start: -16px;
+      font-style: italic;
+      font-size: 14px;
+    }
+    ul {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+      margin-block: 24px;
+      overflow: hidden;
+    }
+  }
+
+  li {
+    display: contents;
+  }
+
+  .exact {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-block-start: 8px;
+
+    border: 1px solid var(--md-sys-color-primary);
+    border-radius: 8px;
+
+    width: 100%;
+
+    > i {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 4px;
+      border-radius: 0 0 8px 8px;
+
+      background: var(--md-sys-color-primary);
+
+      padding-inline: 6px;
+
+      color: var(--md-sys-color-on-primary);
+    }
+
+    @media (forced-colors: active) {
+      background: Mark;
+    }
+  }
+</style>

src/lib/components/layout/ActionSelector.svelte

@@ -1,16 +1,5 @@
 <script lang="ts">
-  import {
-    KEYMAP_CATEGORIES,
-    KEYMAP_CODES,
-    KEYMAP_IDS,
-    type KeyInfo,
-  } from "$lib/serial/keymap-codes";
-  import FlexSearch from "flexsearch";
-  import { onMount } from "svelte";
-  import ActionListItem from "$lib/components/ActionListItem.svelte";
-  import LL from "$i18n/i18n-svelte";
-  import { action } from "$lib/title";
-  import { get } from "svelte/store";
+  import ActionList from "./ActionList.svelte";
 
   let {
     currentAction = undefined,
@@ -23,191 +12,24 @@
     onselect: (id: number) => void;
     onclose: () => void;
   } = $props();
-
-  onMount(() => {
-    searchBox.focus();
-  });
-
-  const index = new FlexSearch.Index({ tokenize: "full" });
-
-  $effect(() => {
-    createIndex($KEYMAP_CODES);
-  });
-
-  async function createIndex(codes: Map<number, KeyInfo>) {
-    for (const [, action] of codes) {
-      await index?.addAsync(
-        action.code,
-        `${action.title || ""} ${action.variant || ""} ${action.category} ${action.id || ""} ${
-          action.description || ""
-        }`,
-      );
-    }
-  }
-
-  async function search() {
-    results = (await index!.searchAsync(searchBox.value)) as number[];
-    exact = get(KEYMAP_IDS).get(searchBox.value)?.code;
-    code = Number(searchBox.value);
-  }
-
-  function select(id?: number) {
-    if (id !== undefined) {
-      onselect(id);
-    }
-  }
-
-  function keyboardNavigation(event: KeyboardEvent) {
-    if (event.shiftKey && event.key === "Enter" && exact !== undefined) {
-      onselect(exact);
-    } else if (event.key === "ArrowDown") {
-      const element =
-        resultList.querySelector("li:focus-within")?.nextSibling ??
-        resultList.querySelector("li:not(.exact)");
-      if (element instanceof HTMLLIElement) {
-        element.querySelector("button")?.focus();
-      }
-    } else if (event.key === "ArrowUp") {
-      const element =
-        resultList.querySelector("li:focus-within")?.previousSibling ??
-        resultList.querySelector("li:not(.exact)");
-      if (element instanceof HTMLLIElement) {
-        element.querySelector("button")?.focus();
-      }
-    } else {
-      searchBox.focus();
-      return;
-    }
-    event.preventDefault();
-  }
-
-  let results: number[] = $state([]);
-  let exact: number | undefined = $state(undefined);
-  let code: number = $state(Number.NaN);
-
-  let searchBox: HTMLInputElement;
-  let resultList: HTMLUListElement;
-  let filter: Set<number> | undefined = $state(undefined);
 </script>
 
-<svelte:window on:keydown={keyboardNavigation} />
-
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 <dialog
   open
   onclick={(event) => {
     if (event.target === event.currentTarget) onclose();
   }}
 >
-  <div class="content">
-    <div class="search-row">
-      <input
-        type="search"
-        bind:this={searchBox}
-        oninput={search}
-        onkeypress={(event) => {
-          if (event.key === "Enter") {
-            select(exact);
-          }
-        }}
-        placeholder={$LL.actionSearch.PLACEHOLDER()}
-      />
-      <button onclick={() => select(0)} use:action={{ shortcut: "shift+esc" }}
-        >{$LL.actionSearch.DELETE()}</button
-      >
-      <button
-        use:action={{ title: $LL.modal.CLOSE(), shortcut: "esc" }}
-        class="icon"
-        onclick={onclose}>close</button
-      >
-    </div>
-    <fieldset class="filters">
-      <label
-        >{$LL.actionSearch.filter.ALL()}<input
-          checked
-          name="category"
-          type="radio"
-          value={undefined}
-          bind:group={filter}
-        /></label
-      >
-      {#each $KEYMAP_CATEGORIES as category}
-        <label
-          >{category.name}<input
-            name="category"
-            type="radio"
-            value={new Set(Object.keys(category.actions).map(Number))}
-            bind:group={filter}
-          /></label
-        >
-      {/each}
-    </fieldset>
-    {#if currentAction !== undefined}
-      <aside>
-        <h3>{$LL.actionSearch.CURRENT_ACTION()}</h3>
-        <ActionListItem id={currentAction} />
-      </aside>
-      {#if nextAction}
-        <aside>
-          <h3>{$LL.actionSearch.NEXT_ACTION()}</h3>
-          <ActionListItem id={nextAction} />
-        </aside>
-      {/if}
-    {/if}
-    <ul bind:this={resultList}>
-      {#if exact !== undefined}
-        <li class="exact">
-          <i>Exact match</i>
-          <ActionListItem id={exact} onclick={() => select(exact)} />
-        </li>
-      {/if}
-      {#if !exact && code}
-        {#if code >= 2 ** 5 && code < 2 ** 13}
-          <li><button onclick={() => select(code)}>USE CODE</button></li>
-        {:else}
-          <li>Action code is out of range</li>
-        {/if}
-      {/if}
-      {#if filter !== undefined || results.length > 0}
-        {@const resultValue =
-          results.length === 0
-            ? Array.from($KEYMAP_CODES, ([it]) => it)
-            : results}
-        {#each filter ? resultValue.filter( (it) => filter.has(it), ) : resultValue as id (id)}
-          <li><ActionListItem {id} onclick={() => select(id)} /></li>
-        {/each}
-      {/if}
-    </ul>
-  </div>
+  <ActionList
+    autofocus={true}
+    {currentAction}
+    {nextAction}
+    {onselect}
+    {onclose}
+  />
 </dialog>
 
 <style lang="scss">
-  .filters {
-    display: flex;
-    gap: 4px;
-    border: none;
-
-    label {
-      border: 1px solid currentcolor;
-      border-radius: 6px;
-      padding-inline: 4px;
-      padding-block: 2px;
-      height: unset;
-
-      font-size: 14px;
-
-      &:has(:checked) {
-        background: var(--md-sys-color-secondary);
-        color: var(--md-sys-color-on-secondary);
-      }
-
-      input {
-        display: none;
-      }
-    }
-  }
-
   dialog {
     display: flex;
     justify-content: center;
@@ -220,130 +42,4 @@
     width: 100%;
     height: 100%;
   }
-
-  aside {
-    opacity: 0.4;
-
-    margin: 8px;
-    border: 1px dashed var(--md-sys-color-outline);
-    border-radius: 8px;
-    pointer-events: none;
-
-    > h3 {
-      margin-inline-start: 16px;
-      margin-block-start: -13px;
-      margin-block-end: 0;
-
-      background: var(--md-sys-color-background);
-      padding-inline: 8px;
-      width: fit-content;
-    }
-
-    @media (prefers-contrast: more) {
-      opacity: 0.8;
-    }
-
-    @media (forced-colors: active) {
-      opacity: 1;
-      color: GrayText;
-    }
-  }
-
-  .search-row {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    margin-inline: 16px;
-  }
-
-  .content {
-    display: flex;
-    position: relative;
-    flex-direction: column;
-    transform-origin: top left;
-    border-radius: 16px;
-
-    background: var(--md-sys-color-background);
-
-    width: calc(min(30cm, 90%));
-    height: calc(min(100% - 128px, 90%));
-
-    overflow: hidden;
-
-    color: var(--md-sys-color-on-background);
-
-    @media (forced-colors: active) {
-      border: 1px solid CanvasText;
-    }
-  }
-
-  input[type="search"] {
-    transition: all 250ms ease;
-    margin-block-end: 8px;
-    border: none;
-    border-bottom: 1px solid var(--md-sys-color-surface-variant);
-
-    background: none;
-    padding-inline: 16px;
-    width: 100%;
-    height: 64px;
-    color: currentcolor;
-    font-size: 16px;
-
-    font-family: inherit;
-
-    &:focus {
-      outline: none;
-      border-bottom: 1px solid var(--md-sys-color-primary);
-    }
-  }
-
-  ul {
-    --scrollbar-color: var(--md-sys-color-surface-variant);
-
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-    padding-inline: 4px;
-    height: 100%;
-
-    overflow-y: auto;
-
-    scrollbar-gutter: both-edges stable;
-  }
-
-  li {
-    display: contents;
-  }
-
-  .exact {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    margin-block-start: 8px;
-
-    border: 1px solid var(--md-sys-color-primary);
-    border-radius: 8px;
-
-    width: 100%;
-
-    > i {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      gap: 4px;
-      border-radius: 0 0 8px 8px;
-
-      background: var(--md-sys-color-primary);
-
-      padding-inline: 6px;
-
-      color: var(--md-sys-color-on-primary);
-    }
-
-    @media (forced-colors: active) {
-      background: Mark;
-    }
-  }
 </style>

src/lib/components/layout/GenericLayout.svelte

@@ -1,9 +1,4 @@
 <script lang="ts">
-  import { compileLayout } from "$lib/serialization/visual-layout";
-  import type {
-    VisualLayout,
-    CompiledLayoutKey,
-  } from "$lib/serialization/visual-layout";
   import { deviceLayout } from "$lib/serial/connection";
   import { dev } from "$app/environment";
   import ActionSelector from "$lib/components/layout/ActionSelector.svelte";
@@ -15,6 +10,10 @@
   import { fly } from "svelte/transition";
   import { expoOut } from "svelte/easing";
   import { activeLayer, activeProfile } from "$lib/serial/connection";
+  import type {
+    CompiledLayout,
+    CompiledLayoutKey,
+  } from "$lib/assets/layouts/layout.d.ts";
 
   const { scale, margin, strokeWidth, fontSize, iconFontSize } =
     getContext<VisualLayoutConfig>("visual-layout-config");
@@ -29,8 +28,7 @@
     console.assert(iconFontSize % 1 === 0, "Icon font size must be an integer");
   }
 
-  let { visualLayout }: { visualLayout: VisualLayout } = $props();
-  let layoutInfo = $state(compileLayout(visualLayout));
+  let { layoutInfo }: { layoutInfo: CompiledLayout } = $props();
 
   function getCenter(key: CompiledLayoutKey): [x: number, y: number] {
     return [key.pos[0] + key.size[0] / 2, key.pos[1] + key.size[1] / 2];

src/lib/components/layout/KeyText.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
   import type { Writable } from "svelte/store";
   import type { VisualLayoutConfig } from "$lib/components/layout/visual-layout";
-  import type { CompiledLayoutKey } from "$lib/serialization/visual-layout";
+  import type { CompiledLayoutKey } from "$lib/assets/layouts/layout.d.ts";
   import { layout } from "$lib/undo-redo.js";
   import { osLayout } from "$lib/os-layout.js";
   import { KEYMAP_CODES } from "$lib/serial/keymap-codes";
-  import { action } from "$lib/title";
+  import { actionTooltip } from "$lib/title";
   import { activeProfile, activeLayer } from "$lib/serial/connection";
   import { getContext } from "svelte";
 
@@ -28,7 +28,12 @@
     middle: [number, number];
     pos: [number, number];
     rotate: number;
-    positions: [[number, number], [number, number], [number, number]];
+    positions: [
+      [number, number],
+      [number, number],
+      [number, number],
+      [number, number],
+    ];
   } = $props();
 </script>
 
@@ -67,9 +72,9 @@
       ? "0 0 0"
       : `${direction[0]?.toPrecision(2)}px ${direction[1]?.toPrecision(2)}px 0`}
     style:rotate="{rotate}deg"
-    use:action={{ title: tooltip }}
+    {@attach actionTooltip(tooltip)}
   >
-    {#if code !== 0}
+    {#if code !== 0 && code != 1023}
       {dynamicMapping || icon || display || id || `0x${code.toString(16)}`}
     {/if}
     {#if !isApplied}

src/lib/components/layout/KeyboardKey.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { CompiledLayoutKey } from "$lib/serialization/visual-layout";
+  import type { CompiledLayoutKey } from "$lib/assets/layouts/layout.d.ts";
   import { getContext } from "svelte";
   import type { VisualLayoutConfig } from "./visual-layout.js";
   import KeyText from "$lib/components/layout/KeyText.svelte";
@@ -64,6 +64,7 @@
         [-1, 1],
         [-1, -1],
         [1, -1],
+        [1, 1],
       ]}
     />
   {:else if key.shape === "quarter-circle"}
@@ -103,6 +104,7 @@
         [-rotY, -rotX],
         [-rotX, -rotY],
         [rotX, rotY],
+        [rotY, rotX],
       ]}
     />
   {/if}

src/lib/components/layout/Layout.svelte

@@ -1,47 +1,51 @@
 <script lang="ts">
   import { deviceMeta, serialPort } from "$lib/serial/connection";
-  import { action } from "$lib/title";
+  import { actionTooltip } from "$lib/title";
   import GenericLayout from "$lib/components/layout/GenericLayout.svelte";
   import { activeProfile, activeLayer } from "$lib/serial/connection";
-  import type { VisualLayout } from "$lib/serialization/visual-layout";
   import { fade, fly } from "svelte/transition";
   import { restoreFromFile } from "$lib/backup/backup";
+  import type { CompiledLayout } from "$lib/assets/layouts/layout.d.ts";
 
-  const layouts = {
+  const layouts: Record<string, (() => Promise<CompiledLayout>) | undefined> = {
     ONE: () =>
-      import("$lib/assets/layouts/one.yml").then(
-        (it) => it.default as VisualLayout,
+      import("$lib/assets/layouts/one.layout.yml").then(
+        (it) => it.default as CompiledLayout,
       ),
     TWO: () =>
-      import("$lib/assets/layouts/one.yml").then(
-        (it) => it.default as VisualLayout,
+      import("$lib/assets/layouts/one.layout.yml").then(
+        (it) => it.default as CompiledLayout,
       ),
     LITE: () =>
-      import("$lib/assets/layouts/lite.yml").then(
-        (it) => it.default as VisualLayout,
+      import("$lib/assets/layouts/lite.layout.yml").then(
+        (it) => it.default as CompiledLayout,
       ),
     X: () =>
-      import("$lib/assets/layouts/generic/103-key.yml").then(
-        (it) => it.default as VisualLayout,
+      import("$lib/assets/layouts/103-key.layout.yml").then(
+        (it) => it.default as CompiledLayout,
+      ),
+    ZERO: () =>
+      import("$lib/assets/layouts/103-key.layout.yml").then(
+        (it) => it.default as CompiledLayout,
       ),
     M4G: () =>
-      import("$lib/assets/layouts/m4g.yml").then(
-        (it) => it.default as VisualLayout,
+      import("$lib/assets/layouts/m4g.layout.yml").then(
+        (it) => it.default as CompiledLayout,
       ),
     M4GR: () =>
-      import("$lib/assets/layouts/m4gr.yml").then(
-        (it) => it.default as VisualLayout,
+      import("$lib/assets/layouts/m4gr.layout.yml").then(
+        (it) => it.default as CompiledLayout,
       ),
     T4G: () =>
-      import("$lib/assets/layouts/t4g.yml").then(
-        (it) => it.default as VisualLayout,
+      import("$lib/assets/layouts/t4g.layout.yml").then(
+        (it) => it.default as CompiledLayout,
       ),
   };
 </script>
 
 <div class="container">
   {#if $serialPort}
-    {#await layouts[$serialPort.device]() then visualLayout}
+    {#await layouts[$serialPort.device]?.() then layoutInfo}
       <fieldset transition:fade>
         <div class="layers">
           {#each Array.from({ length: $serialPort.layerCount }, (_, i) => i) as layer}
@@ -61,7 +65,7 @@
         </div>
         {#if $deviceMeta?.factoryDefaults?.layout}
           <button
-            use:action={{ title: "Reset Layout" }}
+            {@attach actionTooltip("Reset Layout")}
             transition:fly={{ x: -8 }}
             class="icon reset-layout"
             onclick={() =>
@@ -71,7 +75,9 @@
         {/if}
       </fieldset>
 
-      <GenericLayout {visualLayout} />
+      {#if layoutInfo}
+        <GenericLayout {layoutInfo} />
+      {/if}
     {/await}
   {/if}
 </div>

src/lib/components/verbose-action.ts

@@ -0,0 +1,9 @@
+import type { KeyInfo } from "$lib/serial/keymap-codes";
+
+export function isVerbose(info: KeyInfo) {
+  return (
+    info.id?.length !== 1 &&
+    info.title &&
+    (!info.id || /F\d{1,2}/.test(info.id) === false)
+  );
+}

src/lib/dialogs/PickChangesDialog.svelte

@@ -1,217 +0,0 @@
-<script lang="ts">
-  import Dialog from "$lib/dialogs/Dialog.svelte";
-  import type {
-    Change,
-    ChordChange,
-    LayoutChange,
-    SettingChange,
-  } 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 { KEYMAP_IDS } from "$lib/serial/keymap-codes";
-
-  export let changes: Change[] = [
-    { type: ChangeType.Layout, layer: 0, id: 1, action: 1 },
-    { type: ChangeType.Layout, layer: 1, id: 1, action: 1 },
-    { type: ChangeType.Layout, layer: 1, id: 1, action: 1 },
-    { type: ChangeType.Layout, layer: 1, id: 1, action: 1 },
-    { type: ChangeType.Layout, layer: 1, id: 1, action: 1 },
-    { type: ChangeType.Layout, layer: 1, id: 1, action: 1 },
-    { type: ChangeType.Layout, layer: 1, id: 1, action: 1 },
-    { type: ChangeType.Layout, layer: 1, id: 1, action: 1 },
-    { type: ChangeType.Layout, layer: 1, id: 1, action: 1 },
-    { type: ChangeType.Layout, layer: 1, id: 1, action: 1 },
-    { type: ChangeType.Setting, id: 0, setting: 2 },
-    { type: ChangeType.Setting, id: 0, setting: 2 },
-    { type: ChangeType.Setting, id: 0, setting: 2 },
-    { type: ChangeType.Setting, id: 0, setting: 2 },
-    {
-      type: ChangeType.Chord,
-      id: [1],
-      actions: [55],
-      phrase: [55, 63, 37, 36],
-    },
-    {
-      type: ChangeType.Chord,
-      id: [
-        KEYMAP_IDS.get("y")!.code,
-        KEYMAP_IDS.get("r")!.code,
-        KEYMAP_IDS.get("t")!.code,
-      ],
-      actions: [
-        KEYMAP_IDS.get("y")!.code,
-        KEYMAP_IDS.get("r")!.code,
-        KEYMAP_IDS.get("t")!.code,
-      ],
-      phrase: [55, 63, 37, 36],
-    },
-    {
-      type: ChangeType.Chord,
-      id: [
-        KEYMAP_IDS.get("y")!.code,
-        KEYMAP_IDS.get("r")!.code,
-        KEYMAP_IDS.get("t")!.code,
-      ],
-      actions: [
-        KEYMAP_IDS.get("y")!.code,
-        KEYMAP_IDS.get("r")!.code,
-        KEYMAP_IDS.get("t")!.code,
-      ],
-      phrase: [],
-    },
-  ];
-
-  $: existingChords = new Set($chords.map((it) => JSON.stringify(it.id)));
-
-  $: layoutChanges = Array.from(
-    { length: 3 },
-    (_, i) =>
-      changes.filter(
-        (it) => it.type === ChangeType.Layout && it.layer === i,
-      ) as LayoutChange[],
-  );
-  $: settingChanges = changes.filter(
-    (it) => it.type === ChangeType.Setting,
-  ) as SettingChange[];
-  $: chordChanges = {
-    added: changes.filter(
-      (it) =>
-        it.type === ChangeType.Chord &&
-        it.phrase.length > 0 &&
-        !existingChords.has(JSON.stringify(it.id)),
-    ) as ChordChange[],
-    changed: changes.filter(
-      (it) =>
-        it.type === ChangeType.Chord &&
-        it.phrase.length > 0 &&
-        existingChords.has(JSON.stringify(it.id)),
-    ) as ChordChange[],
-    deleted: changes.filter(
-      (it) => it.type === ChangeType.Chord && it.phrase.length === 0,
-    ) as ChordChange[],
-  };
-  $: totalChordChanges = Object.values(chordChanges).reduce(
-    (acc, curr) => acc + curr.length,
-    0,
-  );
-</script>
-
-<Dialog>
-  <h1>{$LL.changes.TITLE()}</h1>
-  <h2>
-    <label
-      ><input
-        type="checkbox"
-        class="checkbox"
-      />{$LL.changes.ALL_CHANGES()}</label
-    >
-  </h2>
-  <ul>
-    {#if layoutChanges.some((it) => it.length > 0)}
-      <li>
-        <h3>
-          <label>
-            <input type="checkbox" class="checkbox" />
-            {$LL.changes.layout.TITLE(
-              layoutChanges.reduce((acc, curr) => acc + curr.length, 0),
-            )}
-          </label>
-        </h3>
-        <ul>
-          {#each layoutChanges as changes, i}
-            {@const layer = i + 1}
-            {#if changes.length > 0}
-              <li>
-                <h4>
-                  <label>
-                    <input type="checkbox" class="checkbox" />
-                    {$LL.changes.layout.LAYER({
-                      changes: changes.length,
-                      layer,
-                    })}
-                  </label>
-                </h4>
-              </li>
-            {/if}
-          {/each}
-        </ul>
-      </li>
-    {/if}
-    {#if settingChanges.length > 0}
-      <li>
-        <h3>
-          <label
-            ><input
-              type="checkbox"
-              class="checkbox"
-            />{$LL.changes.settings.TITLE(settingChanges.length)}</label
-          >
-        </h3>
-      </li>
-    {/if}
-    {#if totalChordChanges > 0}
-      <li>
-        <h3>
-          <label
-            ><input
-              type="checkbox"
-              class="checkbox"
-            />{$LL.changes.chords.TITLE(totalChordChanges)}</label
-          >
-        </h3>
-        <ul>
-          {#each Object.entries(chordChanges) as [category, changes]}
-            {#if changes.length > 0}
-              <li>
-                <h4>
-                  <label
-                    ><input type="checkbox" class="checkbox" />
-                    {#if category === "added"}
-                      {$LL.changes.chords.NEW_CHORDS(changes.length)}
-                    {:else if category === "changed"}
-                      {$LL.changes.chords.CHANGED_CHORDS(changes.length)}
-                    {:else if category === "deleted"}
-                      {$LL.changes.chords.DELETED_CHORDS(changes.length)}
-                    {/if}
-                  </label>
-                </h4>
-                <ul>
-                  {#each changes as change}
-                    <li>
-                      <label>
-                        <input type="checkbox" class="checkbox" />
-                        <ActionString display="keys" actions={change.actions} />
-                        <ActionString actions={change.phrase} />
-                      </label>
-                    </li>
-                  {/each}
-                </ul>
-              </li>
-            {/if}
-          {/each}
-        </ul>
-      </li>
-    {/if}
-  </ul>
-</Dialog>
-
-<style lang="scss">
-  h1 {
-    font-size: 2em;
-    text-align: center;
-  }
-
-  h2 {
-    font-size: 1.5em;
-  }
-
-  ul {
-    padding-inline-start: 0;
-    list-style: none;
-  }
-
-  li {
-    margin-inline-start: 24px;
-  }
-</style>

src/lib/hover-popover.ts

@@ -18,7 +18,7 @@ export function tooltip(
 
     node.addEventListener("mouseenter", show);
     node.addEventListener("focus", show);
-    node.addEventListener("mouseout", hide);
+    node.addEventListener("mouseleave", hide);
     node.addEventListener("blur", hide);
 
     if (shortcut && node instanceof HTMLElement) {
@@ -28,7 +28,7 @@ export function tooltip(
     return () => {
       node.removeEventListener("mouseenter", show);
       node.removeEventListener("focus", show);
-      node.removeEventListener("mouseout", hide);
+      node.removeEventListener("mouseleave", hide);
       node.removeEventListener("blur", hide);
 
       if (shortcut && node instanceof HTMLElement) {

src/lib/learn/chords.ts

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

src/lib/learn/stats.ts

@@ -1,11 +0,0 @@
-import { persistentWritable } from "$lib/storage";
-
-interface ChordStats {
-  level: number;
-  lastUprank: number;
-}
-
-export const chordStats = persistentWritable<Record<string, ChordStats>>(
-  "chord-stats",
-  {},
-);

src/lib/meta/meta-storage.ts

@@ -17,7 +17,7 @@ export async function getMeta(
   try {
     if (!browser) return fetchMeta(device, version, fetch);
 
-    const dbRequest = indexedDB.open("version-meta", 4);
+    const dbRequest = indexedDB.open("version-meta", 6);
     const db = await new Promise<IDBDatabase>((resolve, reject) => {
       dbRequest.onsuccess = () => resolve(dbRequest.result);
       dbRequest.onerror = () => reject(dbRequest.error);
@@ -130,6 +130,9 @@ async function fetchMeta(
             async (load) => load().then((it) => (it as any).default),
           ),
         )),
+    recipes: await (meta?.recipes
+      ? fetch(`${path}/${meta.recipes}`).then((it) => it.json())
+      : undefined),
     update: {
       uf2:
         meta?.update?.uf2 ??
@@ -144,6 +147,10 @@ async function fetchMeta(
         )?.name ??
         undefined,
       esptool: meta?.update?.esptool ?? undefined,
+      js: meta?.update?.js ?? undefined,
+      wasm: meta?.update?.wasm ?? undefined,
+      dll: meta?.update?.dll ?? undefined,
+      so: meta?.update?.so ?? undefined,
     },
     spiFlash: meta?.spi_flash ?? undefined,
   };

src/lib/meta/types/meta.ts

@@ -13,6 +13,7 @@ export interface SettingsMeta {
 
 export interface SettingsItemMeta {
   id: number;
+  name?: string;
   description?: string;
   enum?: string[];
   range: [number, number];
@@ -43,6 +44,7 @@ export interface RawVersionMeta {
   actions: string;
   settings: string;
   changelog: string;
+  recipes: string;
   factory_defaults: {
     layout: string;
     settings: string;
@@ -52,11 +54,48 @@ export interface RawVersionMeta {
     ota: string | null;
     uf2: string | null;
     esptool: EspToolData | null;
+    js: string | null;
+    wasm: string | null;
+    dll: string | null;
+    so: string | null;
   };
   files: string[];
   spi_flash: SPIFlashInfo | null;
 }
 
+export interface E2eAddChord {
+  input: string[][];
+  output: string[];
+}
+
+export interface E2eTestItem {
+  keys?: string[];
+  modifiers?: Record<string, boolean>;
+  press?: string[];
+  release?: string[];
+  step?: number;
+  skip?: number;
+  idle?: boolean;
+  clearChords?: boolean;
+  addChords?: E2eAddChord[];
+  settings: Record<string, Record<string, string | number>>;
+}
+
+export interface E2eTest {
+  matrix?: string[];
+  test: E2eTestItem[];
+}
+
+export interface E2eDemo {
+  demo?: {
+    id?: string;
+    title?: string;
+    description?: string;
+  };
+  matrix?: string[];
+  tests: E2eTest[];
+}
+
 export interface VersionMeta {
   version: string;
   device: string;
@@ -69,6 +108,7 @@ export interface VersionMeta {
   actions: KeymapCategory[];
   settings: SettingsMeta[];
   changelog: Changelog;
+  recipes?: E2eDemo[];
   factoryDefaults?: {
     layout: CharaLayoutFile;
     settings: CharaSettingsFile;
@@ -78,6 +118,10 @@ export interface VersionMeta {
     ota?: string;
     uf2?: string;
     esptool?: EspToolData;
+    js?: string;
+    wasm?: string;
+    dll?: string;
+    so?: string;
   };
   spiFlash?: SPIFlashInfo;
 }

src/lib/os-layout.ts

@@ -11,6 +11,7 @@ async function updateLayout() {
     layout.size !== currentLayout.size ||
     [...layout.keys()].some((key) => layout.get(key) !== currentLayout.get(key))
   ) {
+    console.log(layout);
     osLayout.set(layout);
   }
 }

src/lib/serial/connection.ts

@@ -1,5 +1,5 @@
 import { get, writable } from "svelte/store";
-import { CharaDevice } from "$lib/serial/device";
+import { CharaDevice, type SerialPortLike } from "$lib/serial/device";
 import type { Chord } from "$lib/serial/chord";
 import type { Writable } from "svelte/store";
 import type { CharaLayout } from "$lib/serialization/layout";
@@ -10,6 +10,10 @@ import type { VersionMeta } from "$lib/meta/types/meta";
 
 export const serialPort = writable<CharaDevice | undefined>();
 
+navigator.serial?.addEventListener("disconnect", async (event) => {
+  serialPort.set(undefined);
+});
+
 export interface SerialLogEntry {
   type: "input" | "output" | "system";
   value: string;
@@ -59,9 +63,13 @@ export interface ProgressInfo {
 }
 export const syncProgress = writable<ProgressInfo | undefined>(undefined);
 
-export async function initSerial(manual = false, withSync = true) {
-  const device = get(serialPort) ?? new CharaDevice();
-  await device.init(manual);
+export async function initSerial(port: SerialPortLike, withSync: boolean) {
+  const prev = get(serialPort);
+  try {
+    prev?.close();
+  } catch {}
+  const device = new CharaDevice(port);
+  await device.init();
   serialPort.set(device);
   if (withSync) {
     await sync();

src/lib/serial/device.ts

@@ -11,7 +11,7 @@ import { browser } from "$app/environment";
 import { showConnectionFailedDialog } from "$lib/dialogs/connection-failed-dialog";
 import semverGte from "semver/functions/gte";
 
-const PORT_FILTERS: Map<string, SerialPortFilter> = new Map([
+export const PORT_FILTERS: Map<string, SerialPortFilter> = new Map([
   ["ONE M0", { usbProductId: 32783, usbVendorId: 9114 }],
   ["TWO S3 (pre-production)", { usbProductId: 0x8252, usbVendorId: 0x303a }],
   ["TWO S3", { usbProductId: 0x8253, usbVendorId: 0x303a }],
@@ -20,16 +20,55 @@ const PORT_FILTERS: Map<string, SerialPortFilter> = new Map([
   ["X", { usbProductId: 0x818b, usbVendorId: 0x303a }],
   ["M4G S3 (pre-production)", { usbProductId: 0x1001, usbVendorId: 0x303a }],
   ["M4G S3", { usbProductId: 0x829a, usbVendorId: 0x303a }],
+  ["T4G S2", { usbProductId: 0x82f2, usbVendorId: 0x303a }],
 ]);
 
+const DEVICE_ALIASES = new Map<string, Set<string>>([
+  ["CC1", new Set(["ONE M0", "one_m0"])],
+  ["CC2", new Set(["TWO S3", "two_s3", "TWO S3 (pre-production)"])],
+  ["Lite (S2)", new Set(["LITE S2", "lite_s2"])],
+  ["Lite (M0)", new Set(["LITE M0", "lite_m0"])],
+  ["CCX", new Set(["X", "ccx"])],
+  ["M4G", new Set(["M4G S3", "m4g_s3", "M4G S3 (pre-production)"])],
+  ["M4G (right)", new Set(["M4GR S3", "m4gr_s3"])],
+  ["T4G", new Set(["T4G S2", "t4g_s2"])],
+]);
+
+export function getName(alias: string): string {
+  for (const [name, aliases] of DEVICE_ALIASES.entries()) {
+    if (aliases.has(alias)) {
+      return name;
+    }
+  }
+  return alias;
+}
+
+export function getPortName(port: SerialPort): string {
+  const { usbProductId, usbVendorId } = port.getInfo();
+  console.log(port.getInfo());
+  for (const [name, filter] of PORT_FILTERS.entries()) {
+    if (
+      filter.usbProductId === usbProductId &&
+      filter.usbVendorId === usbVendorId
+    ) {
+      return getName(name);
+    }
+  }
+  return `Unknown Device (0x${usbVendorId?.toString(
+    16,
+  )}/0x${usbProductId?.toString(16)})`;
+}
+
 const KEY_COUNTS = {
   ONE: 90,
   TWO: 90,
   LITE: 67,
   X: 256,
+  ENGINE: 256,
   M4G: 90,
   M4GR: 90,
   T4G: 7,
+  ZERO: 256,
 } as const;
 
 if (
@@ -87,8 +126,12 @@ async function timeout<T>(promise: Promise<T>, ms: number): Promise<T> {
   ]).finally(() => clearTimeout(timer));
 }
 
+export type SerialPortLike = Pick<
+  SerialPort,
+  "readable" | "writable" | "open" | "close" | "getInfo" | "forget"
+>;
+
 export class CharaDevice {
-  private port!: SerialPort;
   private reader!: ReadableStreamDefaultReader<string>;
 
   private readonly abortController1 = new AbortController();
@@ -103,8 +146,8 @@ export class CharaDevice {
 
   version!: string;
   company!: "CHARACHORDER" | "FORGE";
-  device!: "ONE" | "TWO" | "LITE" | "X" | "M4G";
-  chipset!: "M0" | "S2" | "S3";
+  device!: "ONE" | "TWO" | "LITE" | "X" | "M4G" | "ENGINE" | "ZERO";
+  chipset!: "M0" | "S2" | "S3" | "WASM";
   keyCount!: 90 | 67 | 256;
   layerCount = 3;
   profileCount = 1;
@@ -113,18 +156,13 @@ export class CharaDevice {
     return this.port.getInfo();
   }
 
-  constructor(private readonly baudRate = 115200) {}
+  constructor(
+    readonly port: SerialPortLike,
+    public baudRate = 115200,
+  ) {}
 
-  async init(manual = false) {
+  async init() {
     try {
-      const ports = await getViablePorts();
-      this.port =
-        !manual && ports.length === 1
-          ? ports[0]!
-          : await navigator.serial.requestPort({
-              filters: [...PORT_FILTERS.values()],
-            });
-
       await this.port.open({ baudRate: this.baudRate });
       const info = this.port.getInfo();
       serialLog.update((it) => {
@@ -141,13 +179,16 @@ export class CharaDevice {
       this.version = await this.send(1, ["VERSION"]).then(
         ([version]) => version,
       );
-      if (semverGte(this.version, "2.2.0-beta.4")) {
-        this.profileCount = 3;
-      }
       const [company, device, chipset] = await this.send(3, ["ID"]);
       this.company = company as typeof this.company;
       this.device = device as typeof this.device;
       this.chipset = chipset as typeof this.chipset;
+      if (semverGte(this.version, "2.2.0-beta.4") && this.chipset !== "M0") {
+        this.profileCount = 3;
+      }
+      if (semverGte(this.version, "2.2.0-beta.20") && this.chipset !== "M0") {
+        this.layerCount = 4;
+      }
       this.keyCount = KEY_COUNTS[this.device];
     } catch (e) {
       console.error(e);
@@ -241,6 +282,10 @@ export class CharaDevice {
     await this.port.forget();
   }
 
+  async close() {
+    await this.port.close();
+  }
+
   /**
    * Read/write to serial port
    */
@@ -297,23 +342,24 @@ export class CharaDevice {
         .join(" ")
         .replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
       const readResult = await read(timeout);
-      if (readResult === undefined) {
+      return readResult
+        ?.replace(new RegExp(`^${commandString} `), "")
+        .split(" ");
+    }).then((it) => {
+      if (it === undefined) {
         console.error("No response");
         return Array(expectedLength).fill("NO_RESPONSE") as LengthArray<
           string,
           T
         >;
       }
-      const array = readResult
-        .replace(new RegExp(`^${commandString} `), "")
-        .split(" ");
-      if (array.length < expectedLength) {
+      if (it.length < expectedLength) {
         console.error("Response too short");
-        return array.concat(
-          Array(expectedLength - array.length).fill("TOO_SHORT"),
+        return it.concat(
+          Array(expectedLength - it.length).fill("TOO_SHORT"),
         ) as LengthArray<string, T>;
       }
-      return array as LengthArray<string, T>;
+      return it as LengthArray<string, T>;
     });
   }
 
@@ -356,7 +402,7 @@ export class CharaDevice {
       stringifyChordActions(chord.actions),
       stringifyPhrase(chord.phrase),
     ]);
-    if (status !== "0") console.error(`Failed with status ${status}`);
+    if (status !== "0") throw new Error(`Failed with status ${status}`);
   }
 
   async deleteChord(chord: Pick<Chord, "actions">) {

src/lib/serialization/base64.ts

@@ -29,5 +29,10 @@ export async function fromBase64(
       .replaceAll(".", "+")
       .replaceAll("_", "/")
       .replaceAll("-", "=")}`,
-  ).then((it) => it.blob());
+  )
+    .then((it) => {
+      console.log(it);
+      return it;
+    })
+    .then((it) => it.blob());
 }

src/lib/style/_kbd.scss

@@ -3,9 +3,14 @@ kbd {
   justify-content: center;
   align-items: center;
   margin-block: 6px;
-
-  border: 1px solid currentcolor;
   border-radius: 4px;
+
+  //border: 1px solid currentcolor;
+  background: color-mix(
+    in srgb,
+    var(--md-sys-color-surface-variant) 50%,
+    transparent
+  );
   padding: 4px;
 
   height: 20px;

src/lib/title.ts

@@ -1,46 +1,43 @@
-import type { Action } from "svelte/action";
 import tippy from "tippy.js";
-import { mount, unmount, type SvelteComponent } from "svelte";
+import { mount, unmount, type Snippet } from "svelte";
 import Tooltip from "$lib/components/Tooltip.svelte";
+import type { Attachment } from "svelte/attachments";
 
 export const hotkeys = new Map<string, HTMLElement>();
 
-/**
- * @deprecated Use `tooltip` instead.
- */
-export const action: Action<Element, { title?: string; shortcut?: string }> = (
-  node: Element,
-  { title, shortcut },
-) => {
-  let component: {} | undefined;
-  const tooltip = tippy(node, {
-    arrow: false,
-    theme: "tooltip",
-    animation: "fade",
-    onShow(instance) {
-      component ??= mount(Tooltip, {
-        target: instance.popper.querySelector(".tippy-content") as Element,
-        props: { title, shortcut },
-      });
-    },
-    onHidden() {
-      if (component) {
-        unmount(component);
-        component = undefined;
-      }
-    },
-  });
+export function actionTooltip(
+  title: string | Snippet,
+  shortcut?: string,
+): Attachment<Element> {
+  return (node: Element) => {
+    let component: {} | undefined;
+    const tooltip = tippy(node, {
+      arrow: false,
+      theme: "tooltip",
+      animation: "fade",
+      onShow(instance) {
+        component ??= mount(Tooltip, {
+          target: instance.popper.querySelector(".tippy-content") as Element,
+          props: { shortcut, title },
+        });
+      },
+      onHidden() {
+        if (component) {
+          unmount(component);
+          component = undefined;
+        }
+      },
+    });
 
-  if (shortcut && node instanceof HTMLElement) {
-    hotkeys.set(shortcut, node);
-  }
+    if (shortcut && node instanceof HTMLElement) {
+      hotkeys.set(shortcut, node);
+    }
 
-  return {
-    destroy() {
+    return () => {
       tooltip.destroy();
       if (shortcut && node instanceof HTMLElement) {
         hotkeys.delete(shortcut);
       }
-    },
+    };
   };
-};
+}

src/lib/undo-redo.ts

@@ -179,6 +179,22 @@ export const chords = derived(
   },
 );
 
+export const duplicateChords = derived(chords, (chords) => {
+  const duplicates = new Set<string>();
+  const seen = new Set<string>();
+
+  for (const chord of chords) {
+    const key = JSON.stringify(chord.actions);
+    if (seen.has(key)) {
+      duplicates.add(key);
+    } else {
+      seen.add(key);
+    }
+  }
+
+  return duplicates;
+});
+
 export const chordHashes = derived(
   chords,
   (chords) =>

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

@@ -11,7 +11,7 @@
     argbFromHex,
     themeFromSourceColor,
   } from "@material/material-color-utilities";
-  import { canAutoConnect } from "$lib/serial/device";
+  import { canAutoConnect, getViablePorts } from "$lib/serial/device";
   import { initSerial } from "$lib/serial/connection";
   import type { LayoutData } from "./$types";
   import { browser } from "$app/environment";
@@ -52,9 +52,21 @@
 
   onMount(async () => {
     theme.subscribe((it) => {
-      const theme = themeFromSourceColor(argbFromHex(it.color));
+      const theme = themeFromSourceColor(argbFromHex(it.color), [
+        {
+          name: "success",
+          value: argbFromHex("#4CAF50"),
+          blend: true,
+        },
+      ]);
       const dark = it.mode === "dark"; // window.matchMedia("(prefers-color-scheme: dark)").matches
       applyTheme(theme, { target: document.body, dark });
+      for (const custom of theme.customColors) {
+        document.body.style.setProperty(
+          `--md-sys-color-${custom.color.name}`,
+          `#${custom.value.toString(16).padStart(8, "0").substring(2)}`,
+        );
+      }
     });
 
     if (import.meta.env.TAURI_FAMILY === undefined) {
@@ -63,7 +75,8 @@
     }
 
     if (browser && $userPreferences.autoConnect && (await canAutoConnect())) {
-      await initSerial();
+      const [port] = await getViablePorts();
+      await initSerial(port!, true);
     }
 
     if (data.importFile) {
@@ -118,8 +131,6 @@
 <div class="layout">
   <Sidebar />
 
-  <!-- <PickChangesDialog /> -->
-
   <PageTransition>
     {#if children}
       {@render children()}

src/routes/(app)/ConnectPopup.svelte

@@ -0,0 +1,227 @@
+<script lang="ts">
+  import LL from "$i18n/i18n-svelte";
+  import { preference, userPreferences } from "$lib/preferences";
+  import { initSerial } from "$lib/serial/connection";
+  import {
+    getPortName,
+    PORT_FILTERS,
+    type SerialPortLike,
+  } from "$lib/serial/device";
+  import { showConnectionFailedDialog } from "$lib/dialogs/connection-failed-dialog";
+  import { onMount } from "svelte";
+  import { persistentWritable } from "$lib/storage";
+
+  let ports = $state<SerialPort[]>([]);
+  let element: HTMLDivElement | undefined = $state();
+
+  onMount(() => {
+    refreshPorts();
+  });
+
+  let hasDiscoveredAutoConnect = persistentWritable(
+    "hasDiscoveredAutoConnect",
+    false,
+  );
+
+  $effect(() => {
+    if ($userPreferences.backup || $userPreferences.autoConnect) {
+      $hasDiscoveredAutoConnect = true;
+    }
+  });
+
+  async function refreshPorts() {
+    ports = await navigator.serial.getPorts();
+  }
+
+  async function connect(port: SerialPortLike, withSync: boolean) {
+    try {
+      await initSerial(port, withSync);
+    } catch (error) {
+      console.error(error);
+      await showConnectionFailedDialog(String(error));
+    }
+  }
+
+  function closePopover() {
+    element?.closest<HTMLElement>("[popover]")?.hidePopover();
+  }
+
+  async function connectDevice(event: MouseEvent) {
+    const port = await navigator.serial.requestPort({
+      filters: event.shiftKey ? [] : [...PORT_FILTERS.values()],
+    });
+    if (!port) return;
+    closePopover();
+    refreshPorts();
+    connect(port, true);
+  }
+</script>
+
+<div
+  bind:this={element}
+  class="device-list"
+  onmouseenter={() => refreshPorts()}
+  role="region"
+>
+  {#if ports.length === 1}
+    <fieldset class:promote={!$hasDiscoveredAutoConnect}>
+      <label
+        ><input type="checkbox" use:preference={"autoConnect"} />
+        <div class="title">{$LL.deviceManager.AUTO_CONNECT()}</div>
+      </label>
+
+      <label
+        ><input type="checkbox" use:preference={"backup"} />
+        <div class="title">{@html $LL.backup.AUTO_BACKUP()}</div>
+      </label>
+    </fieldset>
+  {/if}
+  {#if ports.length !== 0}
+    <h4>Recent Devices</h4>
+    <div class="devices">
+      <!--
+      <div class="device">
+        <button onclick={connectCC0}> CC0</button>
+      </div>-->
+      {#each ports as port}
+        <div class="device">
+          <button
+            onclick={(event) => {
+              connect(port, !event.shiftKey);
+            }}
+          >
+            {getPortName(port)}</button
+          >
+          <button
+            class="error"
+            onclick={() => {
+              port.forget();
+              refreshPorts();
+            }}><span class="icon">visibility_off</span> Hide</button
+          >
+        </div>
+      {/each}
+    </div>
+  {/if}
+  <div class="pair">
+    <button onclick={connectDevice} class="primary"
+      ><span class="icon">add</span>Connect</button
+    >
+    <!--<a href="/ccos/zero_wasm/"><span class="icon">add</span>Virtual Device</a>-->
+  </div>
+</div>
+
+<style lang="scss">
+  button,
+  a {
+    padding: 10px;
+    padding-inline-end: 16px;
+    height: 38px;
+    font-size: 12px;
+
+    .icon {
+      font-size: 18px;
+    }
+  }
+
+  h4 {
+    margin-block-start: 16px;
+    margin-block-end: 8px;
+    font-weight: 600;
+  }
+
+  .device-list {
+    margin: 8px;
+  }
+
+  .pair {
+    display: flex;
+  }
+
+  .devices {
+    margin-bottom: 16px;
+  }
+
+  .device {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    button {
+      flex: 1;
+      justify-content: flex-start;
+      font-size: 14px;
+    }
+  }
+
+  button.error {
+    color: var(--md-sys-color-error);
+  }
+
+  label {
+    display: flex;
+    position: relative;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-items: flex-start;
+    gap: 8px;
+    appearance: none;
+    padding: 0;
+    height: auto;
+    overflow: hidden;
+
+    .title {
+      font-weight: 600;
+    }
+  }
+
+  @keyframes attention {
+    0%,
+    100% {
+      filter: brightness(1);
+    }
+
+    50% {
+      filter: brightness(0.6);
+    }
+  }
+
+  @keyframes swoosh {
+    0% {
+      transform: translateX(-200%) skewX(-20deg);
+      opacity: 0;
+    }
+
+    50% {
+      opacity: 1;
+    }
+
+    100% {
+      transform: translateX(200%) skewX(-20deg);
+      opacity: 0;
+    }
+  }
+
+  .promote {
+    label:not(:has(input:checked)) {
+      animation: attention 1s ease;
+
+      &::after {
+        position: absolute;
+        z-index: -1;
+        animation: swoosh 1s ease forwards;
+        background-color: var(--md-sys-color-surface-variant);
+        width: 25%;
+        height: 200%;
+        content: "";
+      }
+    }
+  }
+
+  fieldset {
+    display: flex;
+    gap: 16px;
+    border: none;
+    padding: 0;
+  }
+</style>

src/routes/(app)/Footer.svelte

@@ -1,22 +1,20 @@
 <script lang="ts">
   import { browser, version } from "$app/environment";
-  import { action } from "$lib/title";
+  import { actionTooltip } from "$lib/title";
   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 { detectLocale } from "$i18n/i18n-util";
   import { loadLocaleAsync } from "$i18n/i18n-util.async";
   import { tick } from "svelte";
-  import SyncOverlay from "./SyncOverlay.svelte";
   import {
-    initSerial,
     serialPort,
     sync,
     syncProgress,
     syncStatus,
   } from "$lib/serial/connection";
   import { fade, slide } from "svelte/transition";
-  import { showConnectionFailedDialog } from "$lib/dialogs/connection-failed-dialog";
+  import ConnectPopup from "./ConnectPopup.svelte";
 
   let locale = $state(
     (browser && (localStorage.getItem("locale") as Locales)) || detectLocale(),
@@ -48,32 +46,21 @@
     }
   }
 
-  async function connect() {
-    try {
-      await initSerial(true);
-    } catch (error) {
-      console.error(error);
-      await showConnectionFailedDialog(String(error));
-    }
-  }
-
   function disconnect(event: MouseEvent) {
     if (event.shiftKey) {
       sync();
     } else {
-      $serialPort?.forget();
+      $serialPort?.close();
       $serialPort = undefined;
     }
   }
-
-  let languageSelect: HTMLSelectElement;
 </script>
 
 <footer>
   <ul>
     <li>
       <a
-        use:action={{ title: "Branch" }}
+        {@attach actionTooltip("Branch")}
         href={import.meta.env.VITE_HOMEPAGE_URL}
         rel="noreferrer"
         target="_blank"><span class="icon">commit</span> v{version}</a
@@ -82,24 +69,36 @@
     <li>
       <a
         href="/ccos/{currentDevice ? `${currentDevice}/` : ''}"
-        use:action={{ title: "Updates" }}
+        {@attach actionTooltip("Updates")}
       >
         CCOS {$serialPort?.version ?? "Updates"}
       </a>
     </li>
   </ul>
-  <div class="sync-box">
+  <div
+    class="sync-box"
+    class:primary={!$serialPort}
+    class:attention={$syncStatus !== "done"}
+  >
     {#if !$serialPort}
-      <button class="warning" onclick={connect} transition:slide={{ axis: "x" }}
+      <button
+        class="no-connection"
+        id="connect-button"
+        popovertarget="connect-popup"
+        transition:slide={{ axis: "x" }}
         ><span class="icon">usb</span>{$LL.deviceManager.CONNECT()}</button
       >
+      <div popover id="connect-popup">
+        <ConnectPopup />
+      </div>
     {:else}
+      {#snippet disconnectTooltip()}
+        Disconnect<br /><kbd class="icon">shift</kbd> Sync
+      {/snippet}
       <button
         transition:slide={{ axis: "x" }}
         onclick={disconnect}
-        use:action={{
-          title: "Disconnect<br><kbd class='icon'>shift</kbd> Sync",
-        }}
+        {@attach actionTooltip(disconnectTooltip)}
         ><b
           >{$serialPort.company}
           {$serialPort.device}
@@ -108,7 +107,7 @@
       >
     {/if}
 
-    {#if $syncStatus !== "done"}
+    {#if $syncStatus === "downloading"}
       <progress
         transition:fade
         max={$syncProgress?.max ?? 1}
@@ -117,6 +116,25 @@
     {/if}
   </div>
   <ul>
+    <li>
+      <a
+        href={import.meta.env.VITE_DISCORD_URL}
+        rel="noreferrer"
+        target="_blank"
+      >
+        <svg
+          class="discord-icon"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 126.64 96"
+        >
+          <path
+            fill="currentColor"
+            d="m81 0-3 7Q63 4 49 7l-4-7-26 8Q-4 45 1 80q14 10 32 16l6-11-10-5 2-2q33 13 64 0l3 2-11 5 7 11q17-5 32-16 4-40-19-72-12-5-26-8M42 65q-10-1-11-12 0-15 11-13c11 2 12 6 12 13q-1 11-12 12m42 0q-10-1-11-12 0-15 11-13c11 2 12 6 12 13q-1 11-12 12"
+          /></svg
+        >
+        Discord</a
+      >
+    </li>
     <li>
       <a href={import.meta.env.VITE_BUGS_URL} rel="noreferrer" target="_blank"
         ><span class="icon">bug_report</span> Bugs</a
@@ -129,7 +147,7 @@
     </li>
     <li class="hide-forced-colors">
       <input
-        use:action={{ title: $LL.profile.theme.COLOR_SCHEME() }}
+        {@attach actionTooltip($LL.profile.theme.COLOR_SCHEME())}
         type="color"
         bind:value={$theme.color}
       />
@@ -137,7 +155,7 @@
     <li class="hide-forced-colors">
       {#if $theme.mode === "light"}
         <button
-          use:action={{ title: $LL.profile.theme.DARK_MODE() }}
+          {@attach actionTooltip($LL.profile.theme.DARK_MODE())}
           class="icon"
           onclick={switchTheme}
         >
@@ -145,7 +163,7 @@
         </button>
       {:else if $theme.mode === "dark"}
         <button
-          use:action={{ title: $LL.profile.theme.LIGHT_MODE() }}
+          {@attach actionTooltip($LL.profile.theme.LIGHT_MODE())}
           class="icon"
           onclick={switchTheme}
         >
@@ -153,46 +171,63 @@
         </button>
       {/if}
     </li>
-    <!--<li>
-      <div
-        role="button"
-        class="icon"
-        use:action={{ title: $LL.profile.LANGUAGE() }}
-        onclick={() => languageSelect.click()}
-      >
-        translate
-
-        <select bind:value={locale} bind:this={languageSelect}>
-          {#each locales as code}
-            <option value={code}>{code}</option>
-          {/each}
-        </select>
-      </div>
-    </li>-->
   </ul>
 </footer>
 
 <style lang="scss">
+  @keyframes attention {
+    0%,
+    100% {
+      filter: brightness(0.5);
+    }
+    50% {
+      filter: brightness(1);
+    }
+  }
+
+  $sync-border-radius: 16px;
+
+  .discord-icon {
+    margin: 5px;
+    inline-size: 14px;
+  }
+
   .sync-box {
     display: flex;
     position: relative;
     justify-content: center;
     align-items: center;
+    translate: 0;
+    transition: all 250ms ease;
+    border-radius: 24px;
+    overflow: hidden;
 
     button {
       text-wrap: nowrap;
     }
+
+    &.primary {
+      translate: 0 -32px;
+      background: var(--md-sys-color-primary);
+      color: var(--md-sys-color-on-primary);
+    }
+
+    &.attention {
+      animation: attention 2s infinite;
+      border-radius: $sync-border-radius;
+      color: var(--md-sys-color-primary);
+    }
   }
 
   progress {
+    $inset: 8px;
     position: absolute;
-    right: 16px;
-    bottom: 0;
-    left: 16px;
+    opacity: 0.3;
     z-index: -1;
-    border-radius: 4px;
-    width: calc(100% - 32px);
-    height: 8px;
+    inset: $inset;
+    border-radius: #{$sync-border-radius - $inset};
+    width: calc(100% - $inset * 2);
+    height: calc(100% - $inset * 2);
     overflow: hidden;
   }
 
@@ -204,14 +239,6 @@
     background: var(--md-sys-color-primary);
   }
 
-  .warning {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 8px;
-    color: var(--md-sys-color-error);
-  }
-
   input[type="color"] {
     display: flex;
     justify-content: center;
@@ -246,7 +273,6 @@
     justify-content: center;
     align-items: center;
 
-    opacity: 0.4;
     padding: 8px;
     padding-inline-end: 16px;
     padding-block-start: 0;

src/routes/(app)/Sidebar.svelte

@@ -1,18 +1,27 @@
 <script lang="ts">
   import { page } from "$app/stores";
+  import { deviceMeta } from "$lib/serial/connection";
 
-  const routes = [
+  let routes = $derived([
     [
       {
         href: "/config/settings/",
-        icon: "cable",
-        title: "Device",
+        icon: "tune",
+        title: "Settings",
         primary: true,
       },
       { href: "/config/chords/", icon: "dictionary", title: "Library" },
       { href: "/config/layout/", icon: "keyboard", title: "Layout" },
+      ...($deviceMeta?.recipes
+        ? [{ href: "/recipes", icon: "skillet", title: "Cookbook" }]
+        : []),
     ],
     [
+      {
+        href: "/editor/",
+        icon: "playground_2",
+        title: "Emulator",
+      },
       {
         href: import.meta.env.VITE_LEARN_URL,
         icon: "school",
@@ -32,14 +41,6 @@
         external: true,
       },
     ],
-    [
-      { href: "/editor", icon: "edit_document", title: "Editor", wip: true },
-      { href: "/chat", icon: "chat", title: "Chat", wip: true },
-      { href: "/learn", icon: "school", title: "Learn", wip: true },
-    ],
-    /*[
-      { href: "/plugin", icon: "code", title: "Plugin", wip: true },
-    ],*/
   ] satisfies {
     href: string;
     icon: string;
@@ -47,7 +48,7 @@
     wip?: boolean;
     external?: boolean;
     primary?: boolean;
-  }[][];
+  }[][]);
 
   let connectButton: HTMLButtonElement;
 </script>

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

@@ -0,0 +1 @@
+export const prerender = false;

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

@@ -19,12 +19,7 @@
     {#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
-        >
+        <a href="./{version.name}/">{version.name}</a>
       </li>
     {/each}
   </ul>
@@ -70,14 +65,6 @@
     }
   }
 
-  time {
-    opacity: 0.5;
-    &:before {
-      padding-inline: 0.4ch;
-      content: "•";
-    }
-  }
-
   div.title:has(input:not(:checked)) ~ ul .pre-release {
     opacity: 0;
     height: 0;

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

@@ -4,6 +4,7 @@
   import { fade, slide } from "svelte/transition";
   import { lt as semverLt } from "semver";
   import type { LoaderOptions, ESPLoader } from "esptool-js";
+  import ProgressButton from "$lib/ProgressButton.svelte";
 
   let { data } = $props();
 
@@ -31,21 +32,45 @@
     success = false;
     const port = $serialPort!;
     $serialPort = undefined;
-    try {
-      const file = await fetch(
-        `${data.meta.path}/${data.meta.update.ota}`,
-      ).then((it) => it.arrayBuffer());
 
-      await port.updateFirmware(file, (transferred, total) => {
-        progress = transferred / total;
-      });
+    let file: ArrayBuffer | undefined;
+    let retries = 3;
+    let err: Error | undefined = undefined;
 
-      success = true;
-    } catch (e) {
-      error = e as Error;
-    } finally {
-      working = false;
+    while (!file && retries-- > 0) {
+      try {
+        file = await fetch(`${data.meta.path}/${data.meta.update.ota}`).then(
+          (it) => it.arrayBuffer(),
+        );
+      } catch (e) {
+        err = e as Error;
+      }
     }
+
+    if (!file) {
+      error = err;
+      working = false;
+      return;
+    }
+
+    retries = 2;
+    while (retries-- > 0 && !success) {
+      try {
+        await port.updateFirmware(file, (transferred, total) => {
+          progress = transferred / total;
+        });
+
+        success = true;
+      } catch (e) {
+        err = e as Error;
+        port.baudRate = 9600;
+      }
+    }
+
+    if (!success) {
+      error = err;
+    }
+    working = false;
   }
 
   let currentDevice = $derived(
@@ -72,7 +97,8 @@
 
   async function connect() {
     try {
-      await initSerial(true, false);
+      const port = await navigator.serial.requestPort();
+      await initSerial(port!, true);
       step = 1;
     } catch (e) {
       error = e as Error;
@@ -197,21 +223,20 @@
 </script>
 
 <div class="container">
+  {#if data.meta.update.js && data.meta.update.wasm}
+    <button>Add Virtual Device</button>
+  {/if}
+
   {#if data.meta.update.ota && !data.meta.device.endsWith("m0")}
     {@const buttonError = error || (!success && isCorrectDevice === false)}
     <section>
-      <button
-        class="update-button"
-        class:working={working && (progress <= 0 || progress >= 1)}
-        class:progress={working && progress > 0 && progress < 1}
-        style:--progress="{progress * 100}%"
-        class:primary={!buttonError}
-        class:error={buttonError}
-        disabled={isTooOld ||
-          working ||
-          $serialPort === undefined ||
-          !isCorrectDevice}
-        onclick={update}>Apply Update</button
+      <ProgressButton
+        {working}
+        {progress}
+        style="--height: 42px; --border-radius: 8px; margin-block: 16px;"
+        error={buttonError ? buttonError.toString() : undefined}
+        disabled={isTooOld || $serialPort === undefined || !isCorrectDevice}
+        onclick={update}>Apply Update</ProgressButton
       >
       {#if isTooOld}
         <div class="error" transition:slide>
@@ -236,7 +261,32 @@
       {:else if success}
         <div class="primary" transition:slide>Update successful</div>
       {:else if error}
-        <div class="error" transition:slide>{error.message}</div>
+        <div class="error" transition:slide>
+          {#if error.message.includes("ESP_ERR_OTA_VALIDATE_FAILED")}
+            <b>Update corrupted during transmission</b>
+            <ul>
+              <li>
+                Double-check your USB cable is <b>fully seated</b> on both ends
+              </li>
+              <li>Remove any USB hubs between the device and the computer</li>
+              <li>Unplug all other USB devices</li>
+              <li>Don't touch the device or your computer during the update</li>
+              <li>Try using a different USB cable</li>
+              <li>Try using a different USB Port</li>
+              <li>Try the update again a few times</li>
+              {#if navigator.userAgent.includes("Macintosh")}
+                <li>
+                  Try updating on either Windows, Linux or ChromeOS instead of
+                  MacOS
+                </li>
+              {/if}
+            </ul>
+            <b>DO NOT USE THE UNSAFE RECOVERY OPTIONS</b>, they bypass
+            corruption checks an can soft-brick your device.
+          {:else}
+            {error.message}
+          {/if}
+        </div>
       {:else if working}
         <div class="primary" transition:slide>Updating your device...</div>
       {:else}
@@ -260,47 +310,49 @@
       </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>
+    {#if data.meta.update.uf2}
+      <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 < 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 < 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>
+          <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}
 
     {#if false && data.meta.update.esptool}
       <section>
@@ -337,6 +389,15 @@
 
   <section class="changelog">
     <h2>Changelog</h2>
+
+    <time datetime={data.meta.date.toISOString()}
+      >Published {data.meta.date.toLocaleDateString()}</time
+    >
+
+    {#if data.meta.recipes}
+      <p>Includes {data.meta.recipes.length} recipes</p>
+    {/if}
+
     {#if data.meta.changelog.features}
       <h3>Features</h3>
       <ul>
@@ -417,27 +478,6 @@
     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;
     margin: 0;
@@ -463,67 +503,6 @@
     opacity: 0.8;
   }
 
-  button.update-button {
-    position: relative;
-    transition:
-      border 200ms ease,
-      color 200ms ease;
-
-    margin: 6px;
-    margin-block: 16px;
-
-    outline: 2px dashed currentcolor;
-    outline-offset: 4px;
-
-    border: 2px solid currentcolor;
-    border-radius: 8px;
-
-    background: var(--md-sys-color-background);
-    height: 42px;
-    overflow: hidden;
-
-    &.primary {
-      background: none;
-      color: var(--md-sys-color-primary);
-    }
-
-    &.progress,
-    &.working {
-      border-color: transparent;
-    }
-
-    &.working::before {
-      position: absolute;
-      z-index: -1;
-      border-radius: 8px;
-      background: var(--md-sys-color-background);
-      width: calc(100% - 4px);
-      height: calc(100% - 4px);
-      content: "";
-    }
-
-    &.working::after {
-      position: absolute;
-      z-index: -2;
-      animation: rotate 1s ease-out forwards infinite;
-      background: var(--md-sys-color-primary);
-      width: 120%;
-      height: 30%;
-      content: "";
-    }
-
-    &.progress::after {
-      position: absolute;
-      left: 0;
-      opacity: 0.2;
-      z-index: -2;
-      background: var(--md-sys-color-primary);
-      width: var(--progress);
-      height: 100%;
-      content: "";
-    }
-  }
-
   .version {
     color: var(--md-sys-color-secondary);
   }

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

@@ -1,92 +0,0 @@
-<script lang="ts">
-  import { initMatrixClient, isLoggedIn, matrix } from "$lib/chat/chat-rx";
-  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;
-    width: 100%;
-    height: 100%;
-  }
-
-  hr {
-    width: 60%;
-    height: 1px;
-  }
-
-  ul {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
-
-  button,
-  a {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background: var(--md-sys-color-surface-variant);
-    width: 56px;
-    height: 56px;
-    overflow: hidden;
-  }
-
-  .chats {
-    font-size: 24px;
-  }
-
-  .space {
-    margin-bottom: 8px;
-    font-size: 20px;
-  }
-</style>

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

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

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

@@ -1,180 +0,0 @@
-<script lang="ts">
-  import { browser } from "$app/environment";
-  import { onDestroy, onMount, setContext } from "svelte";
-  import type {
-    IndexedDBStore,
-    IndexedDBCryptoStore,
-    LoginResponse,
-  } from "matrix-js-sdk";
-  import MatrixTimeline from "$lib/chat/MatrixTimeline.svelte";
-  import { matrixClient, currentRoomId } from "$lib/chat/chat";
-  import MatrixRooms from "$lib/chat/MatrixRooms.svelte";
-  import MatrixRoomMembers from "$lib/chat/MatrixRoomMembers.svelte";
-
-  let loggedIn = $state(false);
-  let ready = $state(false);
-
-  let store: IndexedDBStore;
-  let cryptoStore: IndexedDBCryptoStore;
-
-  onMount(async () => {
-    if (!browser) return;
-    const { createClient, IndexedDBStore, IndexedDBCryptoStore } = await import(
-      "matrix-js-sdk"
-    );
-
-    const storedLogin = getStoredLogin();
-
-    store = new IndexedDBStore({
-      dbName: "matrix",
-      indexedDB: window.indexedDB,
-    });
-    cryptoStore = new IndexedDBCryptoStore(window.indexedDB, "matrix-crypto");
-
-    $matrixClient = createClient({
-      baseUrl: import.meta.env.VITE_MATRIX_URL,
-      userId: storedLogin?.user_id,
-      accessToken: storedLogin?.access_token,
-      timelineSupport: true,
-      store,
-      cryptoStore,
-    });
-
-    const loginToken = new URLSearchParams(window.location.search).get(
-      "loginToken",
-    );
-    if (loginToken) {
-      await handleLogin(await $matrixClient.loginWithToken(loginToken));
-      window.history.replaceState({}, document.title, window.location.pathname);
-    }
-
-    await postLogin();
-  });
-
-  async function passwordLogin(event: SubmitEvent) {
-    event.preventDefault();
-    const form = event.target as HTMLFormElement;
-    const username = (form.elements.namedItem("username") as HTMLInputElement)
-      .value;
-    const password = (form.elements.namedItem("password") as HTMLInputElement)
-      .value;
-
-    await handleLogin(
-      await $matrixClient.loginWithPassword(username, password),
-    );
-    await postLogin();
-  }
-
-  async function handleLogin(response: LoginResponse) {
-    localStorage.setItem("matrix-login", JSON.stringify(response));
-  }
-
-  async function postLogin() {
-    loggedIn = $matrixClient.isLoggedIn();
-
-    if (loggedIn) {
-      await store.startup();
-      await cryptoStore.startup();
-      await $matrixClient.startClient();
-      $matrixClient.once("sync", function (state, prevState, res) {
-        ready = true;
-      });
-    }
-  }
-
-  function getStoredLogin(): LoginResponse | undefined {
-    try {
-      return JSON.parse(localStorage.getItem("matrix-login")!);
-    } catch {
-      return undefined;
-    }
-  }
-
-  onDestroy(() => {
-    if ($matrixClient) {
-      $matrixClient.stopClient();
-    }
-  });
-</script>
-
-{#if $matrixClient && loggedIn}
-  {#if ready}
-    <div class="chat">
-      <div class="rooms">
-        <button
-          onclick={() => {
-            $matrixClient.logout(true);
-            $matrixClient.clearStores();
-            localStorage.removeItem("matrix-login");
-            window.location.reload();
-          }}>logout</button
-        >
-        <MatrixRooms rooms={$matrixClient.getRooms()} />
-      </div>
-      {#if $currentRoomId}
-        {@const room = $matrixClient.getRoom($currentRoomId)}
-        {#key room}
-          {#if room}
-            <div class="timeline">
-              <MatrixTimeline timeline={room.getLiveTimeline()} />
-            </div>
-            <div class="members">
-              <MatrixRoomMembers members={room.getJoinedMembers()} />
-            </div>
-          {/if}
-        {/key}
-      {/if}
-    </div>
-  {/if}
-{:else 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"}
-        <!-- TODO: unambigous sso
-        <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}
-
-<style lang="scss">
-  .chat {
-    display: flex;
-    width: 100%;
-    height: 100%;
-
-    > *:not(:last-child) {
-      border-right: 1px solid var(--md-sys-color-outline);
-    }
-  }
-
-  .timeline {
-    flex-grow: 1;
-  }
-
-  .rooms {
-    flex-shrink: 0;
-  }
-
-  .members {
-    flex-shrink: 0;
-    width: 200px;
-  }
-</style>

src/routes/(app)/config/EditActions.svelte

@@ -3,23 +3,27 @@
   import {
     changes,
     ChangeType,
-    chords,
     layout,
     overlay,
     settings,
+    duplicateChords,
   } from "$lib/undo-redo";
-  import type { Change } from "$lib/undo-redo";
+  import type { Change, ChordChange } from "$lib/undo-redo";
   import { fly } from "svelte/transition";
-  import { action } from "$lib/title";
+  import { actionTooltip } from "$lib/title";
   import {
     deviceChords,
     deviceLayout,
     deviceSettings,
+    serialLog,
     serialPort,
+    sync,
     syncProgress,
     syncStatus,
   } from "$lib/serial/connection";
-  import { askForConfirmation } from "$lib/dialogs/confirm-dialog";
+  import ProgressButton from "$lib/ProgressButton.svelte";
+  import { tick } from "svelte";
+  import { goto } from "$app/navigation";
 
   function undo(event: MouseEvent) {
     if (event.shiftKey) {
@@ -40,77 +44,13 @@
     }
   }
   let redoQueue: Change[][] = $state([]);
+  let error = $state<Error | undefined>(undefined);
+  let progressButton: HTMLButtonElement | undefined = $state();
 
-  async function save() {
+  async function saveLayoutChanges(progress: () => void): Promise<boolean> {
+    const port = $serialPort;
+    if (!port) return false;
     try {
-      const port = $serialPort;
-      if (!port) return;
-      $syncStatus = "uploading";
-
-      const layoutChanges = $overlay.layout.reduce(
-        (acc, profile) =>
-          acc + profile.reduce((acc, layer) => acc + layer.size, 0),
-        0,
-      );
-      const settingChanges = $overlay.settings.reduce(
-        (acc, profile) => acc + profile.size,
-        0,
-      );
-      const chordChanges = $overlay.chords.size;
-      const needsCommit = settingChanges > 0 || layoutChanges > 0;
-      const progressMax = layoutChanges + settingChanges + chordChanges;
-
-      let progressCurrent = 0;
-
-      syncProgress.set({
-        max: progressMax,
-        current: progressCurrent,
-      });
-
-      console.log($overlay);
-
-      for (const [id, chord] of $overlay.chords) {
-        if (!chord.deleted) {
-          if (id !== JSON.stringify(chord.actions)) {
-            const existingChord = await port.getChordPhrase(chord.actions);
-            if (
-              existingChord !== undefined &&
-              !(await askForConfirmation(
-                $LL.configure.chords.conflict.TITLE(),
-                $LL.configure.chords.conflict.DESCRIPTION(),
-                $LL.configure.chords.conflict.CONFIRM(),
-                $LL.configure.chords.conflict.ABORT(),
-                chord,
-              ))
-            ) {
-              changes.update((changes) =>
-                changes
-                  .map((it) =>
-                    it.filter(
-                      (it) =>
-                        !(
-                          it.type === ChangeType.Chord &&
-                          JSON.stringify(it.id) === id
-                        ),
-                    ),
-                  )
-                  .filter((it) => it.length > 0),
-              );
-              continue;
-            }
-
-            await port.deleteChord({ actions: JSON.parse(id) });
-          }
-          await port.setChord({ actions: chord.actions, phrase: chord.phrase });
-        } else {
-          await port.deleteChord({ actions: chord.actions });
-        }
-        syncProgress.set({
-          max: progressMax,
-          current: progressCurrent++,
-        });
-      }
-
       for (const [profile, layout] of $overlay.layout.entries()) {
         if (layout === undefined) continue;
         for (const [layer, actions] of layout.entries()) {
@@ -118,94 +58,271 @@
           for (const [id, action] of actions) {
             if (action === undefined) continue;
             await port.setLayoutKey(profile, layer + 1, id, action);
-            syncProgress.set({
-              max: progressMax,
-              current: progressCurrent++,
-            });
+            progress();
           }
         }
       }
+      $deviceLayout = $layout.map((profile) =>
+        profile.map((layer) => layer.map<number>(({ action }) => action)),
+      );
+      changes.update((changes) =>
+        changes
+          .map((it) => it.filter((it) => it.type !== ChangeType.Layout))
+          .filter((it) => it.length > 0),
+      );
+    } catch (e) {
+      console.error(e);
+      return false;
+    }
+    await tick();
+    return true;
+  }
 
+  async function saveSettings(progress: () => void): Promise<boolean> {
+    const port = $serialPort;
+    if (!port) return false;
+    try {
       for (const [profile, settings] of $overlay.settings.entries()) {
         if (settings === undefined) continue;
         for (const [id, setting] of settings.entries()) {
           if (setting === undefined) continue;
           await port.setSetting(profile, id, setting);
-          syncProgress.set({
-            max: progressMax,
-            current: progressCurrent++,
-          });
+          progress();
         }
       }
-
-      // Yes, this is a completely arbitrary and unnecessary delay.
-      // The only purpose of it is to create a sense of weight,
-      // aka make it more "energy intensive" to click.
-      // The only conceivable way users could reach the commit limit in this case
-      // would be if they click it every time they change a setting.
-      // Because of that, we don't need to show a fearmongering message such as
-      // "Your device will break after you click this 10,000 times!"
-      if (needsCommit) {
-        await port.commit();
-      }
-
-      $deviceLayout = $layout.map((profile) =>
-        profile.map((layer) => layer.map<number>(({ action }) => action)),
-      );
-      $deviceChords = $chords
-        .filter(({ deleted }) => !deleted)
-        .map(({ actions, phrase }) => ({ actions, phrase }));
       $deviceSettings = $settings.map((profile) =>
         profile.map(({ value }) => value),
       );
-      $changes = [];
+      changes.update((changes) =>
+        changes
+          .map((it) => it.filter((it) => it.type !== ChangeType.Setting))
+          .filter((it) => it.length > 0),
+      );
     } catch (e) {
-      alert(e);
       console.error(e);
+      return false;
+    }
+    await tick();
+    return true;
+  }
+
+  async function safeDeleteChord(actions: number[]): Promise<boolean> {
+    const port = $serialPort;
+    if (!port) return false;
+    try {
+      await port.deleteChord({ actions });
+      return true;
+    } catch (e) {
+      console.error(e);
+      try {
+        if ((await port.getChordPhrase(actions)) === undefined) {
+          return true;
+        }
+      } catch (e) {
+        console.error(e);
+      }
+    }
+    return false;
+  }
+
+  async function saveChords(progress: () => void): Promise<boolean> {
+    const port = $serialPort;
+    if (!port) return false;
+    let ok = true;
+
+    const empty = new Set<string>();
+    for (const [id, chord] of $overlay.chords) {
+      if (chord.actions.length === 0 || chord.phrase.length === 0) {
+        empty.add(id);
+      }
+    }
+    changes.update((changes) => {
+      changes.push([
+        ...empty.keys().map(
+          (id) =>
+            ({
+              type: ChangeType.Chord,
+              id: JSON.parse(id),
+              deleted: true,
+              actions: [],
+              phrase: [],
+            }) satisfies ChordChange,
+        ),
+      ]);
+      return changes;
+    });
+    await tick();
+
+    const deleted = new Set<string>();
+    const changed = new Map<string, number[]>();
+    for (const [id, chord] of $overlay.chords) {
+      if (!chord.deleted) continue;
+      if (await safeDeleteChord(JSON.parse(id))) {
+        deleted.add(id);
+      } else {
+        ok = false;
+      }
+      progress();
+    }
+    deviceChords.update((chords) =>
+      chords.filter((chord) => !deleted.has(JSON.stringify(chord.actions))),
+    );
+    deleted.clear();
+    await tick();
+
+    for (const [id, chord] of $overlay.chords) {
+      if (chord.deleted) continue;
+      if ($duplicateChords.has(JSON.stringify(chord.actions))) {
+        ok = false;
+      } else {
+        let skip = false;
+        if (id !== JSON.stringify(chord.actions)) {
+          if (await safeDeleteChord(JSON.parse(id))) {
+            deleted.add(id);
+          } else {
+            skip = true;
+            ok = false;
+          }
+        }
+        if (!skip) {
+          try {
+            await port.setChord({
+              actions: chord.actions,
+              phrase: chord.phrase,
+            });
+            deleted.add(JSON.stringify(chord.actions));
+            changed.set(JSON.stringify(chord.actions), chord.phrase);
+          } catch (e) {
+            console.error(e);
+            ok = false;
+          }
+        } else {
+          ok = false;
+        }
+      }
+      progress();
+    }
+    deviceChords.update((chords) => {
+      chords.filter((chord) => !deleted.has(JSON.stringify(chord.actions)));
+      for (const [id, phrase] of changed) {
+        chords.push({ actions: JSON.parse(id), phrase });
+      }
+      return chords;
+    });
+    await tick();
+    return ok;
+  }
+
+  async function save() {
+    let needsSync = false;
+    try {
+      const port = $serialPort;
+      if (!port) {
+        document
+          .getElementById("connect-popup")
+          ?.showPopover({ source: progressButton });
+        return;
+      }
+      $syncStatus = "uploading";
+
+      const layoutChanges = $overlay.layout.reduce(
+        (acc, profile) =>
+          acc +
+          (profile?.reduce((acc, layer) => acc + (layer?.size ?? 0), 0) ?? 0),
+        0,
+      );
+      const settingChanges = $overlay.settings.reduce(
+        (acc, profile) => acc + (profile?.size ?? 0),
+        0,
+      );
+      const chordChanges = $overlay.chords.size;
+      needsSync = chordChanges > 0;
+      const needsCommit = settingChanges > 0 || layoutChanges > 0;
+      const progressMax = layoutChanges + settingChanges + chordChanges;
+
+      let progressCurrent = 0;
+
+      function updateProgress() {
+        syncProgress.set({
+          max: progressMax,
+          current: Math.min(progressMax, progressCurrent++),
+        });
+      }
+      updateProgress();
+
+      let layoutSuccess = await saveLayoutChanges(updateProgress);
+      let settingsSuccess = await saveSettings(updateProgress);
+
+      if (needsCommit) {
+        try {
+          await port.commit();
+        } catch (e) {
+          console.error("Error during commit:", e);
+          layoutSuccess = false;
+        }
+      }
+      let chordsSuccess = await saveChords(updateProgress);
+
+      if (layoutSuccess && settingsSuccess && chordsSuccess) {
+        changes.set([]);
+        needsSync = true;
+      } else {
+        throw new Error("Some changes could not be saved.");
+      }
+    } catch (e) {
+      error = e as Error;
+      console.error("Error while saving changes:", error);
+      serialLog.update((log) => {
+        log.push({ type: "system", value: error?.message ?? "Error" });
+        return log;
+      });
+      goto("/terminal");
     } finally {
       $syncStatus = "done";
     }
+
+    if (needsSync) {
+      await sync();
+    }
   }
+
+  let progressPopover: HTMLElement | undefined = $state();
 </script>
 
 <button
-  use:action={{ title: $LL.saveActions.UNDO(), shortcut: "ctrl+z" }}
+  {@attach actionTooltip($LL.saveActions.UNDO(), "ctrl+z")}
   class="icon"
   disabled={$changes.length === 0}
   onclick={undo}>undo</button
 >
 <button
-  use:action={{ title: $LL.saveActions.REDO(), shortcut: "ctrl+y" }}
+  {@attach actionTooltip($LL.saveActions.REDO(), "ctrl+y")}
   class="icon"
   disabled={redoQueue.length === 0}
   onclick={redo}>redo</button
 >
-{#if $changes.length !== 0}
-  <button
+{#if $changes.length !== 0 || $syncStatus === "uploading" || $syncStatus === "error"}
+  <div
     transition:fly={{ x: 10 }}
-    use:action={{ title: $LL.saveActions.SAVE(), shortcut: "ctrl+shift+s" }}
-    onclick={save}
-    class="click-me"
-    ><span class="icon">save</span>{$LL.saveActions.SAVE()}</button
+    {@attach actionTooltip($LL.saveActions.SAVE(), "ctrl+shift+s")}
   >
+    <ProgressButton
+      disabled={$syncStatus !== "done"}
+      working={$syncStatus === "uploading" || $syncStatus === "downloading"}
+      progress={$syncProgress && $syncStatus === "uploading"
+        ? $syncProgress.current / $syncProgress.max
+        : 0}
+      style="--height: 36px"
+      error={error !== undefined
+        ? (error.message ?? error.toString())
+        : undefined}
+      onclick={save}
+      bind:element={progressButton}
+    >
+      <span class="icon">save</span>{$LL.saveActions.SAVE()}
+    </ProgressButton>
+    <div bind:this={progressPopover} popover="hint">
+      {$LL.saveActions.SAVE()}
+    </div>
+  </div>
 {/if}
-
-<style lang="scss">
-  .click-me {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-inline: 8px;
-    outline: 2px dashed var(--md-sys-color-primary);
-    outline-offset: 2px;
-    border: 2px solid var(--md-sys-color-primary);
-    border-radius: 18px;
-    padding-inline-start: 8px;
-    padding-inline-end: 12px;
-    padding-block: 2px;
-    height: fit-content;
-    color: var(--md-sys-color-primary);
-    font-weight: bold;
-    font-family: inherit;
-  }
-</style>

src/routes/(app)/config/Navigation.svelte

@@ -1,10 +1,75 @@
 <script lang="ts">
-  import { fly } from "svelte/transition";
+  import { fly, slide } from "svelte/transition";
   import { canShare, triggerShare } from "$lib/share";
-  import { action } from "$lib/title";
+  import { actionTooltip } from "$lib/title";
   import { activeProfile, serialPort } from "$lib/serial/connection";
   import LL from "$i18n/i18n-svelte";
   import EditActions from "./EditActions.svelte";
+  import { page } from "$app/state";
+  import { expoOut } from "svelte/easing";
+  import {
+    createChordBackup,
+    createLayoutBackup,
+    createSettingsBackup,
+    downloadFile,
+    restoreBackup,
+  } from "$lib/backup/backup";
+
+  const routeOrder = [
+    "/(app)/config/settings",
+    "/(app)/config/chords",
+    "/(app)/config/layout",
+  ];
+
+  let pageIndex = $derived(
+    routeOrder.findIndex((it) => page.route.id?.startsWith(it)),
+  );
+  let importExport: HTMLDivElement | undefined = $state(undefined);
+
+  $effect(() => {
+    pageIndex;
+    importExport?.animate(
+      [
+        { transform: "translateX(0)", opacity: 1 },
+        { transform: "translateX(-8px)", opacity: 0, offset: 0.2 },
+        { transform: "translateX(8px)", opacity: 0, offset: 0.7 },
+        { transform: "translateX(0)", opacity: 1 },
+      ],
+      {
+        duration: 1500,
+        easing: "cubic-bezier(0.19, 1, 0.22, 1)",
+      },
+    );
+  });
+
+  function importBackup(event: Event) {
+    switch (pageIndex) {
+      case 0:
+        restoreBackup(event, "settings");
+        break;
+      case 1:
+        restoreBackup(event, "chords");
+        break;
+      case 2:
+        restoreBackup(event, "layout");
+        break;
+    }
+    (event.target as HTMLInputElement).value = "";
+  }
+
+  function exportBackup() {
+    switch (pageIndex) {
+      case 0:
+        downloadFile(createSettingsBackup());
+        break;
+      case 1:
+        downloadFile(createChordBackup());
+        break;
+      case 2:
+        downloadFile(createLayoutBackup());
+        break;
+    }
+  }
 </script>
 
 <nav>
@@ -13,8 +78,11 @@
   </div>
 
   <div class="profiles">
-    {#if $serialPort}
-      {#if $serialPort.profileCount > 1}
+    {#if $serialPort && $serialPort.profileCount > 1 && !page.route.id?.startsWith("/(app)/config/chords")}
+      <div
+        transition:fly={{ y: -8, duration: 250, easing: expoOut }}
+        class="profiles"
+      >
         {#each Array.from({ length: $serialPort.profileCount }, (_, i) => i) as profile}
           <label
             ><input
@@ -25,20 +93,20 @@
             />{String.fromCodePoint("A".codePointAt(0)! + profile)}</label
           >
         {/each}
-      {/if}
+      </div>
     {/if}
   </div>
 
   <div class="actions">
     {#if $canShare}
       <button
-        use:action={{ title: $LL.share.TITLE() }}
+        {@attach actionTooltip($LL.share.TITLE())}
         transition:fly={{ x: -8 }}
         class="icon"
         onclick={triggerShare}>share</button
       >
       <button
-        use:action={{ title: $LL.print.TITLE() }}
+        {@attach actionTooltip($LL.print.TITLE())}
         transition:fly={{ x: -8 }}
         class="icon"
         onclick={() => print()}>print</button
@@ -49,10 +117,32 @@
         <PwaStatus />
       {/await}
     {/if}
+    <div class="import-export" bind:this={importExport}>
+      <label
+        ><input type="file" oninput={importBackup} />
+        <span class="icon">upload_file</span>Import</label
+      >
+      <button onclick={exportBackup}
+        ><span class="icon">file_save</span>Export</button
+      >
+    </div>
   </div>
 </nav>
 
 <style lang="scss">
+  .profiles {
+    display: flex;
+    justify-content: center;
+  }
+
+  input[type="file"] {
+    display: none;
+  }
+
+  .import-export {
+    display: flex;
+  }
+
   nav {
     display: grid;
     grid-template-columns: 1fr auto 1fr;

src/routes/(app)/config/chords/+page.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import { KEYMAP_CODES, type KeyInfo } from "$lib/serial/keymap-codes";
-  import FlexSearch from "flexsearch";
+  import FlexSearch, { type Index } from "flexsearch";
   import LL from "$i18n/i18n-svelte";
-  import { action } from "$lib/title";
+  import { actionTooltip } from "$lib/title";
   import { onDestroy, onMount, setContext, tick } from "svelte";
   import { changes, ChangeType, chords } from "$lib/undo-redo";
   import type { ChordChange, ChordInfo } from "$lib/undo-redo";
@@ -38,7 +38,7 @@
   });
 
   let index = new FlexSearch.Index();
-  let searchIndex = writable<FlexSearch.Index | undefined>(undefined);
+  let searchIndex = writable<Index | undefined>(undefined);
   $effect(() => {
     abortIndexing?.();
     progress = 0;
@@ -129,7 +129,7 @@
     chords: ChordInfo[],
     osLayout: Map<string, string>,
     codes: Map<number, KeyInfo>,
-  ): Promise<FlexSearch.Index> {
+  ): Promise<Index> {
     if (chords.length === 0 || !browser) return index;
 
     index = new FlexSearch.Index({
@@ -185,7 +185,7 @@
   const searchFilter = writable<number[] | undefined>(undefined);
   let currentSearchQuery = $state("");
 
-  async function search(index: FlexSearch.Index, event: Event) {
+  async function search(index: Index, event: Event) {
     const query = (event.target as HTMLInputElement).value;
     currentSearchQuery = query;
     searchFilter.set(
@@ -296,12 +296,12 @@
   <button
     class="icon"
     onclick={() => (page = Math.max(page - 1, 0))}
-    use:action={{ shortcut: "ctrl+left" }}>navigate_before</button
+    {@attach actionTooltip("", "ctrl+left")}>navigate_before</button
   >
   <button
     class="icon"
     onclick={() => (page = Math.min(page + 1, $lastPage))}
-    use:action={{ shortcut: "ctrl+right" }}>navigate_next</button
+    {@attach actionTooltip("", "ctrl+right")}>navigate_next</button
   >
 </div>
 
@@ -321,7 +321,7 @@
                 ><td></td><td></td></tr
               >
             {/if}
-            {#each $items.slice(page * $pageSize - (page === 0 ? 0 : 1), (page + 1) * $pageSize - 1) as [chord] (JSON.stringify(chord?.id))}
+            {#each $items.slice(page * $pageSize - (page === 0 ? 0 : 1), (page + 1) * $pageSize - 1) as [chord]}
               {#if chord}
                 <ChordEdit {chord} onduplicate={() => (page = 0)} />
               {/if}
@@ -370,10 +370,6 @@
     min-width: 8ch;
   }
 
-  .new-chord :global(.add) {
-    visibility: hidden;
-  }
-
   .sidebar {
     display: flex;
     flex-direction: column;
@@ -460,7 +456,7 @@
   }
 
   .results {
-    min-width: min(90vw, 16.5cm);
+    min-width: min(90vw, 20cm);
     height: 100%;
   }
 

src/routes/(app)/config/chords/ChordActionEdit.svelte

@@ -82,6 +82,7 @@
   function addSpecial(event: MouseEvent) {
     event.stopPropagation();
     selectAction(event, (action) => {
+      if (!chord) return onsubmit([action]);
       changes.update((changes) => {
         changes.push([
           {

src/routes/(app)/config/chords/ChordEditActions.svelte

@@ -1,21 +0,0 @@
-<div class="table-buttons">
-  {#if !chord.deleted}
-    <button transition:slide class="icon compact" onclick={remove}
-      >delete</button
-    >
-  {:else}
-    <button transition:slide class="icon compact" onclick={restore}
-      >restore_from_trash</button
-    >
-  {/if}
-  <button disabled={chord.deleted} class="icon compact" onclick={duplicate}
-    >content_copy</button
-  >
-  <button
-    class="icon compact"
-    class:disabled={chord.isApplied}
-    onclick={restore}>undo</button
-  >
-  <div class="separator"></div>
-  <button class="icon compact" onclick={share}>share</button>
-</div>

src/routes/(app)/config/chords/ChordPhraseEdit.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
-  import { KEYMAP_CODES } from "$lib/serial/keymap-codes";
+  import { KEYMAP_CODES, KEYMAP_IDS } from "$lib/serial/keymap-codes";
   import { onMount, tick } from "svelte";
   import { changes, ChangeType } from "$lib/undo-redo";
   import type { ChordInfo } from "$lib/undo-redo";
   import { scale } from "svelte/transition";
-  import ActionString from "$lib/components/ActionString.svelte";
   import { selectAction } from "./action-selector";
   import { inputToAction } from "./input-converter";
   import { deviceMeta, serialPort } from "$lib/serial/connection";
   import { get } from "svelte/store";
-  import { action } from "$lib/title";
   import semverGte from "semver/functions/gte";
+  import Action from "$lib/components/Action.svelte";
+  import AutospaceSelector from "$lib/chord-editor/AutospaceSelector.svelte";
 
   let { chord }: { chord: ChordInfo } = $props();
 
@@ -24,19 +24,23 @@
   });
 
   function keypress(event: KeyboardEvent) {
+    console.log(event);
     if (!event.shiftKey && event.key === "ArrowUp") {
       addSpecial(event);
     } else if (!event.shiftKey && event.key === "ArrowLeft") {
-      moveCursor(cursorPosition - 1);
+      moveCursor(cursorPosition - 1, true);
     } else if (!event.shiftKey && event.key === "ArrowRight") {
-      moveCursor(cursorPosition + 1);
+      moveCursor(cursorPosition + 1, true);
+    } else if (event.key === " " && $KEYMAP_IDS.has("HYPERSPACE")) {
+      insertAction(cursorPosition, $KEYMAP_IDS.get("HYPERSPACE")!.code);
+      tick().then(() => moveCursor(cursorPosition + 1));
     } else if (event.key === "Backspace") {
-      deleteAction(cursorPosition - 1);
-      moveCursor(cursorPosition - 1);
+      deleteAction(cursorPosition - 1, 1, true);
+      moveCursor(cursorPosition - 1, true);
     } else if (event.key === "Delete") {
-      deleteAction(cursorPosition);
+      deleteAction(cursorPosition, 1, true);
     } else {
-      if (event.key === "Shift") return;
+      if (event.key === "Shift" || event.key === "Meta") return;
       const action = inputToAction(event, get(serialPort)?.device === "X");
       if (action !== undefined) {
         insertAction(cursorPosition, action);
@@ -45,14 +49,24 @@
     }
   }
 
-  function moveCursor(to: number) {
+  function moveCursor(to: number, user = false) {
     if (!box) return;
-    cursorPosition = Math.max(0, Math.min(to, chord.phrase.length));
+    cursorPosition = Math.max(
+      user ? chord.phrase.findIndex((it, i, arr) => !isHidden(it, i, arr)) : 0,
+      Math.min(
+        to,
+        user
+          ? chord.phrase.findLastIndex((it, i, arr) => !isHidden(it, i, arr)) +
+              1 || chord.phrase.length
+          : chord.phrase.length,
+      ),
+    );
     const item = box.children.item(cursorPosition) as HTMLElement;
     cursorOffset = item.offsetLeft + item.offsetWidth;
   }
 
-  function deleteAction(at: number, count = 1) {
+  function deleteAction(at: number, count = 1, user = false) {
+    if (user && isHidden(chord.phrase[at]!, at, chord.phrase)) return;
     if (!(at in chord.phrase)) return;
     changes.update((changes) => {
       changes.push([
@@ -89,12 +103,12 @@
     for (const child of box.children) {
       const { offsetLeft, offsetWidth } = child as HTMLElement;
       if (distance < offsetLeft + offsetWidth / 2) {
-        moveCursor(i - 1);
+        moveCursor(i - 1, true);
         return;
       }
       i++;
     }
-    moveCursor(i - 1);
+    moveCursor(i - 1, true);
   }
 
   function addSpecial(event: MouseEvent | KeyboardEvent) {
@@ -118,6 +132,7 @@
           )
         ) {
           deleteAction(chord.phrase.length - 1);
+          moveCursor(cursorPosition, true);
         } else {
           return;
         }
@@ -126,13 +141,16 @@
           return;
         } else if (chord.phrase.at(-1) === NO_CONCATENATOR_ACTION) {
           deleteAction(chord.phrase.length - 1);
+          moveCursor(cursorPosition, true);
         } else {
           insertAction(chord.phrase.length, JOIN_ACTION);
+          moveCursor(cursorPosition, true);
         }
       }
     } else {
       if (chord.phrase.at(-1) === JOIN_ACTION) {
         deleteAction(chord.phrase.length - 1);
+        moveCursor(cursorPosition, true);
       } else {
         if (chord.phrase.at(-1) === NO_CONCATENATOR_ACTION) {
           if (
@@ -144,9 +162,11 @@
             return;
           } else {
             deleteAction(chord.phrase.length - 1);
+            moveCursor(cursorPosition, true);
           }
         } else {
           insertAction(chord.phrase.length, NO_CONCATENATOR_ACTION);
+          moveCursor(cursorPosition, true);
         }
       }
     }
@@ -167,51 +187,58 @@
   let supportsAutospace = $derived(
     semverGte($deviceMeta?.version ?? "0.0.0", "2.1.0"),
   );
+  let supportsAutospaceV2 = $derived(
+    semverGte($deviceMeta?.version ?? "0.0.0", "3.0.0-gamma.5"),
+  );
   let hasAutospace = $derived(
-    isPrintable || chord.phrase.at(-1) === JOIN_ACTION,
+    supportsAutospaceV2
+      ? chord.phrase.at(-1) !== NO_CONCATENATOR_ACTION
+      : isPrintable || chord.phrase.at(-1) === JOIN_ACTION,
   );
 
-  let displayPhrase = $derived(
-    chord.phrase.filter(
-      (it, i, arr) =>
-        !(
-          (i === 0 && it === JOIN_ACTION) ||
-          (i === arr.length - 1 &&
-            (it === JOIN_ACTION || it === NO_CONCATENATOR_ACTION))
-        ),
-    ),
-  );
+  function isHidden(action: number, index: number, array: number[]) {
+    return (
+      (index === 0 && action === JOIN_ACTION) ||
+      (index === array.length - 1 &&
+        (action === JOIN_ACTION || action === NO_CONCATENATOR_ACTION))
+    );
+  }
 </script>
 
+<!-- svelte-ignore a11y_interactive_supports_focus -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
 <div
+  role="textbox"
   class="wrapper"
   class:edited={!chord.deleted && chord.phraseChanged}
   onclick={() => {
-    box.focus();
+    box?.focus();
   }}
 >
   {#if supportsAutospace}
-    <label
-      class="auto-space-edit"
-      use:action={{ title: "Remove previous concatenator" }}
-      ><span class="icon">join_inner</span><input
-        checked={chord.phrase[0] === JOIN_ACTION}
-        onchange={(event) => {
-          const autospace = hasAutospace;
-          if ((event.target as HTMLInputElement).checked) {
-            if (chord.phrase[0] !== JOIN_ACTION) {
-              insertAction(0, JOIN_ACTION);
-            }
-          } else {
-            if (chord.phrase[0] === JOIN_ACTION) {
-              deleteAction(0, 1);
-            }
+    <AutospaceSelector
+      variant="start"
+      value={chord.phrase[0] === JOIN_ACTION}
+      onchange={async (event) => {
+        const autospace = hasAutospace;
+        if ((event.target as HTMLInputElement).checked) {
+          if (chord.phrase[0] === JOIN_ACTION) {
+            deleteAction(0, 1);
+            await tick();
+            moveCursor(cursorPosition - 1, true);
           }
-          tick().then(() => resolveAutospace(autospace));
-        }}
-        type="checkbox"
-      /></label
-    >
+        } else {
+          if (chord.phrase[0] !== JOIN_ACTION) {
+            insertAction(0, JOIN_ACTION);
+            moveCursor(cursorPosition + 1, true);
+          }
+        }
+        if (!supportsAutospaceV2) {
+          await tick();
+          resolveAutospace(autospace);
+        }
+      }}
+    />
   {/if}
   <div
     onkeydown={keypress}
@@ -233,17 +260,37 @@
       <div></div>
       <!-- placeholder for cursor placement -->
     {/if}
-    <ActionString actions={displayPhrase} />
+    {#each chord.phrase as action, i}
+      {#if isHidden(action, i, chord.phrase)}
+        <span style:display="none"></span>
+      {:else}
+        <Action display="inline-keys" {action} />
+      {/if}
+    {/each}
   </div>
   {#if supportsAutospace}
-    <label class="auto-space-edit" use:action={{ title: "Add concatenator" }}
-      ><span class="icon">space_bar</span><input
-        checked={hasAutospace}
-        onchange={(event) =>
-          resolveAutospace((event.target as HTMLInputElement).checked)}
-        type="checkbox"
-      /></label
-    >
+    <AutospaceSelector
+      variant="end"
+      value={!hasAutospace}
+      onchange={async (event) => {
+        if (supportsAutospaceV2) {
+          if ((event.target as HTMLInputElement).checked) {
+            if (chord.phrase.at(-1) === NO_CONCATENATOR_ACTION) {
+              deleteAction(chord.phrase.length - 1);
+              await tick();
+              moveCursor(cursorPosition, true);
+            }
+          } else {
+            if (chord.phrase.at(-1) !== NO_CONCATENATOR_ACTION) {
+              insertAction(chord.phrase.length, NO_CONCATENATOR_ACTION);
+              moveCursor(cursorPosition, true);
+            }
+          }
+        } else {
+          resolveAutospace((event.target as HTMLInputElement).checked);
+        }
+      }}
+    />
   {/if}
   <sup>•</sup>
 </div>
@@ -291,25 +338,6 @@
     }
   }
 
-  .auto-space-edit {
-    margin-inline: 8px;
-    border-radius: 4px;
-    background: var(--md-sys-color-tertiary-container);
-    padding-inline: 0;
-    height: 1em;
-    color: var(--md-sys-color-on-tertiary-container);
-    font-size: 1.3em;
-
-    &:first-of-type:not(:has(:checked)),
-    &:last-of-type:has(:checked) {
-      opacity: 0;
-    }
-  }
-
-  .wrapper:hover .auto-space-edit {
-    opacity: 1;
-  }
-
   .wrapper {
     display: flex;
 
@@ -342,8 +370,12 @@
       transition-duration: 250ms;
     }
 
-    &:hover::before {
-      opacity: 0.3;
+    &:hover {
+      --auto-space-show: 1;
+
+      &::before {
+        opacity: 0.3;
+      }
     }
 
     &:has(> :focus-within)::after {

src/routes/(app)/config/chords/will-my-compound-break/+page.svelte

@@ -47,19 +47,6 @@
     font-weight: bold;
   }
 
-  .chord {
-    display: flex;
-    gap: 0.5rem;
-    margin-bottom: 0.5rem;
-  }
-
-  .compound {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    margin-bottom: 1rem;
-  }
-
   p {
     max-width: 600px;
   }

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

@@ -7,6 +7,7 @@
   import SharePopup from "../SharePopup.svelte";
   import type { VisualLayoutConfig } from "$lib/components/layout/visual-layout";
   import { layout } from "$lib/undo-redo";
+  import { activeProfile } from "$lib/serial/connection";
 
   async function shareLayout(event: Event) {
     const url = new URL(window.location.href);
@@ -16,11 +17,9 @@
         charaVersion: 1,
         type: "layout",
         device: "one",
-        layout: $layout.map((it) => it.map((it) => it.action)) as [
-          number[],
-          number[],
-          number[],
-        ],
+        layout: $layout[$activeProfile]?.map((it) =>
+          it.map((it) => it.action),
+        ) as [number[], number[], number[]],
       }),
     );
     await navigator.clipboard.writeText(url.toString());

src/routes/(app)/config/settings/+page.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-  import Action from "$lib/components/Action.svelte";
-  import { popup } from "$lib/popup";
   import { deviceMeta, serialPort } from "$lib/serial/connection";
   import { setting } from "$lib/setting";
   import ResetPopup from "./ResetPopup.svelte";
@@ -14,8 +12,7 @@
     restoreBackup,
     restoreFromFile,
   } from "$lib/backup/backup";
-  import { preference } from "$lib/preferences";
-  import { action } from "$lib/title";
+  import { actionTooltip } from "$lib/title";
   import { fly } from "svelte/transition";
   import type { SettingsItemMeta } from "$lib/meta/types/meta";
 
@@ -49,12 +46,6 @@
     <a href="#backup">Backup</a>
   </nav>
   <div class="content">
-    <label
-      >{$LL.deviceManager.AUTO_CONNECT()}<input
-        type="checkbox"
-        use:preference={"autoConnect"}
-      /></label
-    >
     {#if $deviceMeta}
       {#each $deviceMeta.settings as category}
         <fieldset id={category.name}>
@@ -62,7 +53,7 @@
             {titlecase(category.name)}
           </legend>
           {#if category.description}
-            <p>{category.description}</p>
+            <p class="category-description">{@html category.description}</p>
           {/if}
           {#each category.items as item}
             {#if item.unit === "H"}
@@ -102,9 +93,11 @@
                     />{item.unit}
                   </div>
                 {/if}
-                <div class="title">{titlecase(item.name)}</div>
+                {#if item.name}
+                  <div class="title">{titlecase(item.name)}</div>
+                {/if}
                 {#if item.description}
-                  <div class="description">{item.description}</div>
+                  <div class="description">{@html item.description}</div>
                 {/if}
               </label>
             {/if}
@@ -115,15 +108,6 @@
 
     <fieldset id="backup">
       <legend>{$LL.backup.TITLE()}</legend>
-      <label
-        ><input
-          type="checkbox"
-          use:preference={"backup"}
-        />{$LL.backup.AUTO_BACKUP()}</label
-      >
-      <p class="disclaimer">
-        {$LL.backup.DISCLAIMER()}
-      </p>
       <div class="row" style="margin-top: auto">
         <button onclick={() => downloadFile(createChordBackup())}>
           <span class="icon">piano</span>
@@ -154,7 +138,7 @@
       {#if $serialPort}
         {#if $deviceMeta?.factoryDefaults?.settings}
           <button
-            use:action={{ title: "Reset Settings" }}
+            {@attach actionTooltip("Reset Settings")}
             transition:fly={{ x: -8 }}
             onclick={() =>
               restoreFromFile($deviceMeta.factoryDefaults!.settings)}
@@ -184,6 +168,13 @@
     scroll-behavior: smooth;
   }
 
+  .category-description {
+    margin-inline: 16px;
+    margin-block: 24px;
+    color: var(--md-sys-color-on-surface-variant);
+    font-size: 12px;
+  }
+
   legend {
     position: relative;
     padding: 0;
@@ -214,7 +205,7 @@
       display: flex;
       position: relative;
       flex-wrap: wrap;
-      justify-content: flex-start;
+      justify-content: flex-start !important;
       align-items: center;
       appearance: none;
 

src/routes/(app)/e2e/+page.svelte.wip

@@ -1,232 +0,0 @@
-<script lang="ts">
-  import {
-    compileLayout,
-    type VisualLayout,
-  } from "$lib/serialization/visual-layout";
-  import ccxLayout from "$lib/assets/layouts/generic/103-key.yml";
-  import keycodes from "./keycodes.json";
-
-  let width = $state(16);
-  let height = $state(16);
-
-  let layout = $state(compileLayout(ccxLayout as VisualLayout));
-  let layoutMargin = $state(0.2);
-
-  let timelineCanvas = $state<HTMLCanvasElement | undefined>(undefined);
-
-  interface Report {
-    modifiers?: number;
-    keys?: number[];
-  }
-
-  interface Tick {
-    ms?: number;
-    reports?: Report[];
-    keys?: number[];
-  }
-
-  let test: Tick[] = $state([
-    { ms: 1, reports: [{ keys: [4] }], keys: [4] },
-    { ms: 2, reports: [{ keys: [4, 2] }], keys: [4, 12] },
-  ]);
-
-  function timelineData<T extends { ms: number }>(
-    ticks: T[],
-    value: (tick: T) => number[],
-  ) {
-    let totalTicks = 0;
-    const result = new Map<number, [number, number][]>();
-    for (const tick of ticks) {
-      const key = value(tick);
-    }
-  }
-
-  let timelineData = $derived.by(() => {
-    const result = new Map<number, [number, number][]>();
-    for (const tick of test) {
-      if (!tick.keys) continue;
-      if (Array.isArray(action)) {
-        if (typeof action[0] === "number") {
-          ticks.push([action[0]]);
-          totalTicks++;
-        } else if (action.length === 0) {
-          ticks.push([1]);
-          totalTicks++;
-        }
-      }
-      if (typeof action !== "number") continue;
-      if (action >= 0) {
-        if (!result.has(action)) {
-          result.set(action, []);
-        }
-        result.get(action)!.push([totalTicks, test.length - 1]);
-      } else {
-        const value = result.get(~action)?.at(-1);
-        if (!value || value[1] !== test.length - 1) continue;
-        value[1] = totalTicks;
-      }
-    }
-    return {
-      totalTicks,
-      ticks,
-      presses: [...result.entries()].sort(([a], [b]) => a - b),
-    };
-  });
-</script>
-
-<h1>E2E Testing</h1>
-
-{#snippet Layout(keys: Set<number>)}
-  <svg viewBox="0 0 {layout.size[0]} {layout.size[1]}">
-    {#each layout.keys as key}
-      {#if key.shape === "square"}
-        <rect
-          x={key.pos[0] + layoutMargin / 2}
-          y={key.pos[1] + layoutMargin / 2}
-          rx={0.5 - layoutMargin / 2}
-          width={key.size[0] - layoutMargin}
-          height={key.size[1] - layoutMargin}
-          fill={keys.has(key.id)
-            ? "var(--md-sys-color-primary)"
-            : "var(--md-sys-color-on-surface)"}
-          opacity={keys.has(key.id) ? 1 : 0.1}
-        />
-      {/if}
-    {/each}
-  </svg>
-{/snippet}
-
-<canvas bind:this={timelineCanvas}></canvas>
-
-<div class="t">
-  {#each test as { ms, reports, keys }}
-    <div class="tick">
-      {ms}ms
-      <div class="keys">
-        {#each keys ?? [] as key}
-          <kbd>{keycodes[key] ?? key}</kbd>
-        {/each}
-        <button class="icon">+</button>
-      </div>
-      {@render Layout(new Set(keys))}
-      {#each reports ?? [] as report}
-        <div class="report">
-          <div class="modifiers">{report.modifiers}</div>
-          <div class="keys">
-            {#each report.keys ?? [] as key}
-              <kbd>{keycodes[key] ?? key}</kbd>
-            {/each}
-          </div>
-        </div>
-      {/each}
-    </div>
-  {/each}
-</div>
-
-<div class="actions">
-  {#each test as action, i}
-    {@const isActionTick = Array.isArray(action)}
-    {@const isActionPress = typeof action === "number" && action >= 0}
-    {@const isActionRelease = typeof action === "number" && action < 0}
-    {#if isActionTick}
-      <div class="tick">
-        <span class="icon">step_over</span>
-        {action[0]}ms
-      </div>
-      {#if action[1]}
-        <div class="report">
-          {#each Array.from({ length: 8 }) as _, j}
-            <div class="modifier">{j}</div>
-          {/each}
-          {#each action[1][1] as key}
-            <div class="key">
-              {key}
-            </div>
-          {/each}
-        </div>
-      {/if}
-    {:else if typeof action === "string"}
-      <div>Command: {action}</div>
-    {:else if isActionPress}
-      <button class="release" onclick={() => (test[i] = ~action)}
-        >{action}</button
-      >
-    {:else if isActionRelease}
-      <button class="press" onclick={() => (test[i] = ~action)}
-        >{~action}</button
-      >
-    {:else}
-      <div>Unsupported {action}</div>
-    {/if}
-  {/each}
-</div>
-
-<style lang="scss">
-  svg {
-    width: 100px;
-  }
-
-  $shadow-inset: 1px;
-
-  .timeline {
-    display: grid;
-    grid-template-rows: auto repeat(auto-fit, minmax(var(--height), 1fr));
-  }
-
-  .timeline-press {
-    margin-inline: calc(var(--width) / 2);
-    border-radius: calc(var(--height) / 2);
-    background-color: var(--md-sys-color-surface-variant);
-    height: var(--height);
-  }
-
-  .actions {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-  }
-
-  .tick {
-    display: flex;
-    position: relative;
-    flex-direction: column;
-    align-items: center;
-    gap: 0.5rem;
-    cursor: ew-resize;
-    padding: 0.5rem;
-    user-select: none;
-
-    span.icon {
-      position: absolute;
-      top: 0;
-      transform: translateY(-50%);
-    }
-  }
-
-  button {
-    cursor: pointer;
-    margin: 0;
-    border: none;
-    padding: 8px;
-    aspect-ratio: 1;
-    user-select: none;
-
-    &.release {
-      box-shadow:
-        inset #{$shadow-inset} #{$shadow-inset} #{$shadow-inset * 2}
-          rgba(0, 0, 0, 0.6),
-        inset -#{$shadow-inset} -#{$shadow-inset} #{$shadow-inset * 2}
-          rgba(255, 255, 255, 0.2);
-      border-radius: 0.5rem;
-    }
-
-    &.press {
-      box-shadow:
-        #{$shadow-inset} #{$shadow-inset} #{$shadow-inset * 2}
-          rgba(0, 0, 0, 0.6),
-        -#{$shadow-inset} -#{$shadow-inset} #{$shadow-inset * 2}
-          rgba(255, 255, 255, 0.2);
-      border-radius: 0.5rem;
-    }
-  }
-</style>

src/routes/(app)/e2e/keycodes.json

@@ -1,251 +0,0 @@
-[
-  "reserved",
-  "esc",
-  "1",
-  "2",
-  "3",
-  "4",
-  "5",
-  "6",
-  "7",
-  "8",
-  "9",
-  "0",
-  "-",
-  "=",
-  "bksp",
-  "tab",
-  "q",
-  "w",
-  "e",
-  "r",
-  "t",
-  "y",
-  "u",
-  "i",
-  "o",
-  "p",
-  "[",
-  "]",
-  "enter",
-  "lctrl",
-  "a",
-  "s",
-  "d",
-  "f",
-  "g",
-  "h",
-  "j",
-  "k",
-  "l",
-  ";",
-  "'",
-  "`",
-  "lshift",
-  "\\",
-  "z",
-  "x",
-  "c",
-  "v",
-  "b",
-  "n",
-  "m",
-  ",",
-  ".",
-  "/",
-  "rshift",
-  "kp*",
-  "lalt",
-  "_",
-  "capslock",
-  "f1",
-  "f2",
-  "f3",
-  "f4",
-  "f5",
-  "f6",
-  "f7",
-  "f8",
-  "f9",
-  "f10",
-  "numlock",
-  "scrolllock",
-  "kp7",
-  "kp8",
-  "kp9",
-  "kp-",
-  "kp4",
-  "kp5",
-  "kp6",
-  "kp+",
-  "kp1",
-  "kp2",
-  "kp3",
-  "kp0",
-  "kp.",
-  "ksc_84",
-  "zenkaku_hankaku",
-  "102nd",
-  "f11",
-  "f12",
-  "ro",
-  "katakana",
-  "hiragana",
-  "henkan",
-  "katakana_hiragana",
-  "muhenkan",
-  "kp,",
-  "kp_enter",
-  "rctrl",
-  "kp/",
-  "sysrq",
-  "ralt",
-  "linefeed",
-  "home",
-  "up",
-  "pageup",
-  "left",
-  "right",
-  "end",
-  "down",
-  "pagedown",
-  "insert",
-  "delete",
-  "macro",
-  "mute",
-  "volume_down",
-  "volume_up",
-  "power",
-  "kp=",
-  "kp+-",
-  "pause",
-  "scale",
-  "kp,",
-  "hangeul",
-  "hanja",
-  "yen",
-  "lmeta",
-  "rmeta",
-  "compose",
-  "stop",
-  "again",
-  "props",
-  "undo",
-  "front",
-  "copy",
-  "open",
-  "paste",
-  "find",
-  "cut",
-  "help",
-  "menu",
-  "calc",
-  "setup",
-  "sleep",
-  "wakeup",
-  "file",
-  "sendfile",
-  "deletefile",
-  "xfer",
-  "prog1",
-  "prog2",
-  "www",
-  "msdos",
-  "coffee",
-  "rotate_display",
-  "cyclewindows",
-  "mail",
-  "bookmarks",
-  "computer",
-  "back",
-  "forward",
-  "close_cd",
-  "eject_cd",
-  "eject_close_cd",
-  "next_song",
-  "play_pause",
-  "prev_song",
-  "stop_cd",
-  "record",
-  "rewind",
-  "phone",
-  "iso",
-  "config",
-  "homepage",
-  "refresh",
-  "exit",
-  "move",
-  "edit",
-  "scroll_up",
-  "scroll_down",
-  "kp_left_paren",
-  "kp_right_paren",
-  "new",
-  "redo",
-  "f13",
-  "f14",
-  "f15",
-  "f16",
-  "f17",
-  "f18",
-  "f19",
-  "f20",
-  "f21",
-  "f22",
-  "f23",
-  "f24",
-  "sc_195",
-  "sc_196",
-  "sc_197",
-  "sc_198",
-  "sc_199",
-  "play_cd",
-  "pause_cd",
-  "prog3",
-  "prog4",
-  "all_applications",
-  "suspend",
-  "close",
-  "play",
-  "fastforward",
-  "bass_boost",
-  "print",
-  "hp",
-  "camera",
-  "sound",
-  "question",
-  "email",
-  "chat",
-  "search",
-  "connect",
-  "finance",
-  "sport",
-  "shop",
-  "alterase",
-  "cancel",
-  "brightness_down",
-  "brightness_up",
-  "media",
-  "switch_video_mode",
-  "kbd_illum_toggle",
-  "kbd_illum_down",
-  "kbd_illum_up",
-  "send",
-  "reply",
-  "forward_mail",
-  "save",
-  "documents",
-  "battery",
-  "bluetooth",
-  "wlan",
-  "uwb",
-  "unknown",
-  "video_next",
-  "video_prev",
-  "brightness_cycle",
-  "brightness_auto",
-  "display_off",
-  "wwan",
-  "rfkill",
-  "mic_mute"
-]

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

@@ -5,18 +5,17 @@
   import TrackChords from "$lib/charrecorder/TrackChords.svelte";
   import TrackRollingWpm from "$lib/charrecorder/TrackRollingWpm.svelte";
   import { fade } from "svelte/transition";
+  import { initSerial, serialPort } from "$lib/serial/connection";
+  import { tick } from "svelte";
+  import { ccosKeyInterceptor } from "$lib/ccos/attachment";
 
   let recorder: ReplayRecorder = $state(new ReplayRecorder());
   let replay: Replay | undefined = $state();
 
   let wpm = $state(0);
+  let cc0Loading = $state(false);
   let chords: InferredChord[] = $state([]);
 
-  function handleRawKey(event: KeyboardEvent) {
-    event.preventDefault();
-    keyEvent(event);
-  }
-
   function keyEvent(event: KeyboardEvent) {
     if (event.key === "Tab") {
       clear();
@@ -47,15 +46,60 @@
     a.download = "replay.json";
     a.click();
   }
+
+  async function connectCC0(event: MouseEvent) {
+    cc0Loading = true;
+    try {
+      await tick();
+      if ($serialPort) {
+        $serialPort?.close();
+        $serialPort = undefined;
+      }
+      const { fetchCCOS } = await import("$lib/ccos/ccos");
+      const ccos = await fetchCCOS();
+      if (ccos) {
+        try {
+          await initSerial(ccos, !event.shiftKey);
+        } catch (error) {
+          console.error(error);
+        }
+      }
+    } finally {
+      cc0Loading = false;
+    }
+  }
 </script>
 
 <svelte:head>
   <title>Editor</title>
 </svelte:head>
-<svelte:window onkeydown={handleRawKey} onkeyup={handleRawKey} />
 
 <section>
-  <h2>Editor</h2>
+  <h2>
+    CCOS Emulator
+    {#if $serialPort?.chipset === "WASM"}
+      <small>(Emulator Active)</small>
+    {:else}
+      <button class="primary" disabled={cc0Loading} onclick={connectCC0}>
+        <span class="icon">play_arrow</span>
+        Boot CCOS Emulator</button
+      >
+    {/if}
+  </h2>
+
+  <p style:max-width="600px">
+    Try a (limited) demo of CCOS running directly in your browser.<br /><span
+      style:color="var(--md-sys-color-primary)"
+      >Chording requires an <b>NKRO Keyboard</b> to work properly.</span
+    >
+    <br />Browsers usually report key timings with limited accuracy to revent
+    fingerprinting, which can impact chording.
+    <br /><i>Results may vary.</i>
+    <br />
+    Use sidebar tabs to configure <a href="/config/chords/">Chords</a>,
+    <a href="/config/layout/">Layout</a>
+    and <a href="/config/settings/">Settings</a>.
+  </p>
 
   {#if replay}
     <div class="replay" transition:fade={{ duration: 100 }}>
@@ -66,7 +110,9 @@
   {#key recorder}
     <div
       class="editor"
+      tabindex="-1"
       out:fade={{ duration: 100 }}
+      {@attach ccosKeyInterceptor($serialPort, recorder)}
       style:opacity={replay ? 0 : undefined}
     >
       <CharRecorder replay={recorder.player} cursor={true} keys={true}>
@@ -95,15 +141,38 @@
     width: 100%;
   }
 
+  a {
+    display: inline;
+    padding: 0;
+    color: var(--md-sys-color-primary);
+  }
+
+  small {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    color: var(--md-sys-color-primary);
+    font-weight: 500;
+    font-size: 0.6em;
+  }
+
+  button.primary {
+    display: inline-flex;
+    background: none;
+    color: var(--md-sys-color-primary);
+  }
+
   .replay,
   .editor {
-    position: absolute;
-    top: 3em;
-    left: 0;
     transition: opacity 0.1s;
+    margin: 4px;
+    outline: 1px solid var(--md-sys-color-outline);
     padding: 16px;
     padding-bottom: 5em;
-    padding-left: 0;
+
+    &:focus-within {
+      outline: 2px solid var(--md-sys-color-primary);
+    }
   }
 
   .toolbar {

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

@@ -1,24 +0,0 @@
-<script lang="ts">
-</script>
-
-<ul>
-  <li><a href="/learn/layout/">Layout</a></li>
-  <li><a href="/learn/chords/">Chords</a></li>
-  <li><a href="/learn/sentence/">Sentences</a></li>
-</ul>
-
-<style lang="scss">
-  ul {
-    display: flex;
-    gap: 16px;
-    margin: 16px;
-    padding: 0;
-    list-style-type: none;
-  }
-
-  a {
-    border: 1px solid var(--md-sys-color-outline);
-    width: 128px;
-    height: 128px;
-  }
-</style>

src/routes/(app)/learn/chords/+page.svelte

@@ -1,228 +0,0 @@
-<script lang="ts">
-  import CharRecorder from "$lib/charrecorder/CharRecorder.svelte";
-  import { ReplayRecorder } from "$lib/charrecorder/core/recorder";
-  import {
-    words,
-    nextWord,
-    scores,
-    learnConfigDefault,
-    learnConfig,
-    learnConfigStored,
-  } from "$lib/learn/chords";
-  import { blur, fade } from "svelte/transition";
-  import ChordActionEdit from "../../config/chords/ChordActionEdit.svelte";
-  import TrackChords from "$lib/charrecorder/TrackChords.svelte";
-  import type { InferredChord } from "$lib/charrecorder/core/types";
-
-  let recorder = $derived(new ReplayRecorder($nextWord));
-  let start = performance.now();
-  $effect(() => {
-    start = recorder && performance.now();
-  });
-
-  let chords: InferredChord[] = $state([]);
-
-  function onkeyboard(event: KeyboardEvent) {
-    recorder.next(event);
-  }
-
-  function lerp(a: number, b: number, t: number) {
-    return a + (b - a) * t;
-  }
-
-  $effect(() => {
-    const [chord] = chords;
-    if (!chord) return;
-
-    console.log(chord);
-
-    if (chord.output.trim() === $nextWord) {
-      scores.update((scores) => {
-        const score = Math.max(
-          $learnConfig.minScore,
-          $learnConfig.maxScore - (performance.now() - start) / 1000,
-        );
-
-        if (!scores[$nextWord]) {
-          scores[$nextWord] = {
-            score,
-            lastTyped: performance.now(),
-            total: 1,
-          };
-          return scores;
-        }
-
-        const oldScore = scores[$nextWord].score;
-        scores[$nextWord].score = lerp(
-          score,
-          oldScore,
-          $learnConfig.scoreBlend,
-        );
-        scores[$nextWord].lastTyped = performance.now();
-        scores[$nextWord].total += 1;
-
-        return scores;
-      });
-    }
-  });
-
-  function skip() {
-    button?.blur();
-    scores.update((scores) => {
-      return scores;
-    });
-  }
-
-  let button = $state<HTMLButtonElement>();
-</script>
-
-<h2>WIP</h2>
-
-<svelte:window onkeydown={onkeyboard} onkeyup={onkeyboard} />
-
-{#key $nextWord}
-  <h3>
-    {$nextWord}
-    {#if $scores[$nextWord!] === undefined}
-      <sup class="new-word">new</sup>
-    {:else if ($scores[$nextWord!]?.score ?? 0) < 0}
-      <sup class="weak">weak</sup>
-    {/if}
-  </h3>
-
-  <div class="chord" in:fade>
-    <CharRecorder replay={recorder.player} cursor={true}>
-      <TrackChords bind:chords />
-    </CharRecorder>
-  </div>
-{/key}
-
-{#key $nextWord}
-  <div class="hint" in:fade={{ delay: 2000, duration: 500 }}>
-    <ChordActionEdit chord={$words.get($nextWord!)} onsubmit={() => {}} />
-  </div>
-{/key}
-<button onclick={skip} bind:this={button}>skip</button>
-
-<section class="stats">
-  <table>
-    <thead>
-      <tr><th>Weak</th></tr>
-    </thead>
-    <tbody>
-      {#each Object.entries($scores)
-        .sort(([, a], [, b]) => a.score - b.score)
-        .splice(0, 10) as [word, score]}
-        <tr class="decay">
-          <td>{word}</td>
-          <td><i>{score.score.toFixed(2)}</i></td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-
-  <table>
-    <thead>
-      <tr><th>Strong</th></tr>
-    </thead>
-    <tbody>
-      {#each Object.entries($scores)
-        .sort(([, a], [, b]) => b.score - a.score)
-        .splice(0, 10) as [word, score]}
-        <tr class="decay">
-          <td>{word}</td>
-          <td><i>{score.score.toFixed(2)}</i></td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-
-  <table>
-    <thead>
-      <tr><th>Rehearse</th></tr>
-    </thead>
-    <tbody>
-      {#each Object.entries($scores)
-        .sort(([, a], [, b]) => b.lastTyped - a.lastTyped)
-        .splice(0, 10) as [word, score]}
-        <tr class="decay">
-          <td>{word}</td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</section>
-
-<details>
-  <summary>Settings</summary>
-  <button onclick={() => ($scores = {})}>Reset</button>
-  <table>
-    <tbody>
-      {#each Object.entries(learnConfigDefault) as [key, value]}
-        <tr>
-          <th>{key}</th>
-          <td
-            ><input
-              type="number"
-              value={$learnConfig[key] ?? value}
-              step="0.1"
-              oninput={(event) =>
-                ($learnConfigStored[key] = event.target.value)}
-            />
-          </td>
-          <td>
-            <button
-              disabled={!$learnConfigStored[key]}
-              onclick={() => ($learnConfigStored[key] = undefined)}>⟲</button
-            >
-          </td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</details>
-
-<style lang="scss">
-  @use "sass:math";
-
-  input {
-    border: none;
-    background: none;
-    width: 5ch;
-    color: inherit;
-    font: inherit;
-    text-align: right;
-  }
-
-  div {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    padding: 1ch;
-    min-width: 20ch;
-  }
-
-  .stats {
-    display: flex;
-    gap: 3em;
-  }
-
-  sup {
-    font-weight: normal;
-    font-size: 0.8em;
-
-    &.new-word {
-      color: var(--md-sys-color-primary);
-    }
-    &.weak {
-      color: var(--md-sys-color-error);
-    }
-  }
-
-  @for $i from 1 through 10 {
-    tr.decay:nth-child(#{$i}) {
-      opacity: 1 - math.div($i, 10);
-    }
-  }
-</style>

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

@@ -1,126 +0,0 @@
-<script lang="ts">
-  import { share } from "$lib/share";
-  import tippy from "tippy.js";
-  import { mount, setContext, unmount } from "svelte";
-  import Layout from "$lib/components/layout/Layout.svelte";
-  import { charaFileToUriComponent } from "$lib/share/share-url";
-  import type { VisualLayoutConfig } from "$lib/components/layout/visual-layout";
-  import { writable, derived } from "svelte/store";
-  import { layout } from "$lib/undo-redo";
-  import Action from "$lib/components/Action.svelte";
-  import { serialPort } from "$lib/serial/connection";
-
-  let hasStarted = $state(false);
-
-  setContext<VisualLayoutConfig>("visual-layout-config", {
-    scale: 50,
-    inactiveScale: 0.5,
-    inactiveOpacity: 0.4,
-    strokeWidth: 1,
-    margin: 5,
-    fontSize: 9,
-    iconFontSize: 14,
-  });
-
-  const actions = derived(layout, (layout) => {
-    const result = new Set<number>();
-    for (const layer of layout) {
-      for (const key of layer) {
-        result.add(key.action);
-      }
-    }
-    return [...result];
-  });
-
-  const currentAction = writable(0);
-
-  const expected = derived(
-    [layout, currentAction],
-    ([layout, currentAction]) => {
-      const result: Array<{ layer: number; key: number }> = [];
-      for (let layer = 0; layer <= layout.length; layer++) {
-        if (layout[layer] === undefined) {
-          continue;
-        }
-        for (let key = 0; key <= layout[layer].length; key++) {
-          if (layout[layer][key]?.action === currentAction) {
-            result.push({ layer, key });
-          }
-        }
-      }
-      return result;
-    },
-  );
-
-  const highlight = derived(
-    expected,
-    (expected) => new Set(expected.map(({ key }) => key)),
-  );
-
-  const highlightAction = derived(
-    currentAction,
-    (currentAction) => new Set([currentAction]),
-  );
-
-  const currentLayer = writable(0);
-
-  setContext("highlight", highlight);
-
-  setContext("highlight-action", highlightAction);
-
-  setContext("active-layer", currentLayer);
-
-  async function next() {
-    console.log("Next");
-    const nextAction = $actions[Math.floor(Math.random() * $actions.length)];
-    if (nextAction !== undefined) {
-      currentAction.set(nextAction);
-      currentLayer.set($expected[0]?.layer ?? 0);
-      const key = await $serialPort?.queryKey();
-      if ($expected.some(({ key: expectedKey }) => expectedKey === key)) {
-        console.log("Correct", key);
-      } else {
-        console.log("Incorrect", key);
-      }
-      next();
-    }
-  }
-
-  $effect(() => {
-    if ($serialPort && $layout[0]?.[0] && !hasStarted) {
-      hasStarted = true;
-      next();
-    }
-  });
-</script>
-
-<section>
-  <div class="challenge">
-    <Action display="inline-keys" action={$currentAction}></Action>
-  </div>
-
-  <Layout />
-</section>
-
-<style lang="scss">
-  .challenge {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    width: 100%;
-    height: 100px;
-
-    font-size: 24px;
-  }
-
-  section {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-
-    width: 100%;
-    height: 100%;
-  }
-</style>

src/routes/(app)/learn/sentence/+page.svelte

@@ -1,652 +0,0 @@
-<script lang="ts">
-  import { page } from "$app/stores";
-  import { SvelteMap } from "svelte/reactivity";
-  import CharRecorder from "$lib/charrecorder/CharRecorder.svelte";
-  import debounce from "$lib/util/debounce";
-  import { ReplayRecorder } from "$lib/charrecorder/core/recorder";
-  import { shuffleInPlace } from "$lib/util/shuffle";
-  import { fade, fly, slide } from "svelte/transition";
-  import TrackChords from "$lib/charrecorder/TrackChords.svelte";
-  import ChordHud from "$lib/charrecorder/ChordHud.svelte";
-  import type { InferredChord } from "$lib/charrecorder/core/types";
-  import TrackText from "$lib/charrecorder/TrackText.svelte";
-  import { browser } from "$app/environment";
-  import { expoOut } from "svelte/easing";
-  import { goto } from "$app/navigation";
-  import { untrack } from "svelte";
-  import {
-    type PageParam,
-    SENTENCE_TRAINER_PAGE_PARAMS,
-  } from "./configuration";
-  import {
-    AVG_WORD_LENGTH,
-    MILLIS_IN_SECOND,
-    SECONDS_IN_MINUTE,
-  } from "./constants";
-  import { pickNextWord } from "./word-selector";
-
-  /**
-   * Resolves parameter from search URL or returns default
-   * @param param {@link PageParam} generic parameter that can be provided
-   * in search url
-   * @return Value of the parameter converted to its type or default value
-   * if parameter is not present in the URL.
-   */
-  function getParamOrDefault<T>(param: PageParam<T>): T {
-    if (browser) {
-      const value = $page.url.searchParams.get(param.key);
-      if (null !== value) {
-        return param.parse ? param.parse(value) : (value as unknown as T);
-      }
-    }
-    return param.default;
-  }
-
-  function viaLocalStorage<T>(key: string, initial: T) {
-    try {
-      return JSON.parse(localStorage.getItem(key) ?? "");
-    } catch {
-      return initial;
-    }
-  }
-
-  // Delay to ensure cursor is visible after focus is set.
-  // it is a workaround for conflict between goto call on sentence update
-  // and cursor focus when next word is selected.
-  const CURSOR_FOCUS_DELAY_MS = 10;
-
-  let masteryThresholds: [slow: number, fast: number, title: string][] = $state(
-    viaLocalStorage("mastery-thresholds", [
-      [1500, 1050, "Words"],
-      [3000, 2500, "Pairs"],
-      [5000, 3500, "Trios"],
-    ]),
-  );
-
-  function reset() {
-    localStorage.removeItem("mastery-thresholds");
-    localStorage.removeItem("idle-timeout");
-    window.location.reload();
-  }
-
-  const inputSentence = $derived(
-    getParamOrDefault(SENTENCE_TRAINER_PAGE_PARAMS.sentence),
-  );
-
-  const wpmTarget = $derived(
-    getParamOrDefault(SENTENCE_TRAINER_PAGE_PARAMS.wpm),
-  );
-
-  const devTools = $derived(
-    getParamOrDefault(SENTENCE_TRAINER_PAGE_PARAMS.showDevTools),
-  );
-
-  let chordInputContainer: HTMLDivElement | null = null;
-
-  let sentenceWords = $derived(inputSentence.trim().split(/\s+/));
-
-  let inputSentenceLength = $derived(inputSentence.length);
-  let msPerChar = $derived(
-    (1 / ((wpmTarget / SECONDS_IN_MINUTE) * AVG_WORD_LENGTH)) *
-      MILLIS_IN_SECOND,
-  );
-  let totalMs = $derived(inputSentenceLength * msPerChar);
-  let msPerWord = $derived(
-    (inputSentenceLength * msPerChar) / sentenceWords.length,
-  );
-  let currentWord = $state("");
-  let wordStats = new SvelteMap<string, number[]>();
-  let wordMastery = new SvelteMap<string, number>();
-  let text = $state("");
-  let level = $state(0);
-  let bestWPM = $state(0);
-  let wpm = $state(0);
-  let chords: InferredChord[] = $state([]);
-  let recorder = $state(new ReplayRecorder());
-  let idle = $state(true);
-  let idleTime = $state(viaLocalStorage("idle-timeout", 100));
-
-  let idleTimeout: ReturnType<typeof setTimeout> | null = null;
-
-  $effect(() => {
-    if (wpm > bestWPM) {
-      bestWPM = wpm;
-    }
-  });
-
-  $effect(() => {
-    if (browser && $page.url.searchParams) {
-      selectNextWord();
-    }
-  });
-
-  $effect(() => {
-    localStorage.setItem("idle-timeout", idleTime.toString());
-  });
-
-  $effect(() => {
-    localStorage.setItem(
-      "mastery-thresholds",
-      JSON.stringify(masteryThresholds),
-    );
-  });
-
-  let words = $derived.by(() => {
-    const words = sentenceWords;
-    switch (level) {
-      case 0: {
-        shuffleInPlace(words);
-        return words;
-      }
-      case 1: {
-        const pairs = [];
-        for (let i = 0; i < words.length - 1; i++) {
-          pairs.push(`${words[i]} ${words[i + 1]}`);
-        }
-        shuffleInPlace(pairs);
-        return pairs;
-      }
-      case 2: {
-        const trios = [];
-        for (let i = 0; i < words.length - 2; i++) {
-          trios.push(`${words[i]} ${words[i + 1]} ${words[i + 2]}`);
-        }
-        shuffleInPlace(trios);
-        return trios;
-      }
-      default: {
-        return [inputSentence];
-      }
-    }
-  });
-
-  $effect(() => {
-    for (const [word, speeds] of wordStats.entries()) {
-      const level = word.split(" ").length - 1;
-      const masteryThreshold = masteryThresholds[level];
-      if (masteryThreshold === undefined) continue;
-      const averageSpeed = speeds.reduce((a, b) => a + b) / speeds.length;
-      wordMastery.set(
-        word,
-        1 -
-          Math.min(
-            1,
-            Math.max(
-              0,
-              (averageSpeed - masteryThreshold[1]) /
-                (masteryThreshold[0] - masteryThreshold[1]),
-            ),
-          ),
-      );
-    }
-  });
-
-  let progress = $derived(
-    level === masteryThresholds.length
-      ? Math.min(1, Math.max(0, bestWPM / wpmTarget))
-      : words.length > 0
-        ? words.reduce((a, word) => a + (wordMastery.get(word) ?? 0), 0) /
-          words.length
-        : 0,
-  );
-  let mastered = $derived(
-    words.length > 0
-      ? words.filter((it) => wordMastery.get(it) === 1).length / words.length
-      : 0,
-  );
-
-  $effect(() => {
-    if (progress === 1 && level < masteryThresholds.length) {
-      level++;
-    }
-  });
-
-  function selectNextWord() {
-    const nextWord = pickNextWord(
-      words,
-      wordMastery,
-      untrack(() => currentWord),
-    );
-    currentWord = nextWord;
-    recorder = new ReplayRecorder(nextWord);
-    setTimeout(() => {
-      chordInputContainer?.focus();
-    }, CURSOR_FOCUS_DELAY_MS);
-  }
-
-  function checkInput() {
-    if (recorder.player.stepper.challenge.length === 0) return;
-    const replay = recorder.finish(false);
-    const elapsed = replay.finish - replay.start! - idleTime;
-    if (elapsed < masteryThresholds[level]![0]) {
-      const prevStats = wordStats.get(currentWord) ?? [];
-      prevStats.push(elapsed);
-      wordStats.set(currentWord, prevStats.slice(-10));
-    }
-
-    text = "";
-    setTimeout(() => {
-      selectNextWord();
-    });
-  }
-
-  $effect(() => {
-    if (!idle || !text) return;
-    if (text.trim() !== currentWord.trim()) return;
-    if (level === masteryThresholds.length) {
-      const replay = recorder.finish();
-      const elapsed = replay.finish - replay.start!;
-      text = "";
-      recorder = new ReplayRecorder(currentWord);
-      console.log(elapsed, totalMs);
-      wpm = (totalMs / elapsed) * wpmTarget;
-    } else {
-      checkInput();
-    }
-  });
-
-  function onkey(event: KeyboardEvent) {
-    if (idleTimeout) {
-      clearTimeout(idleTimeout);
-    }
-    idle = false;
-    recorder.next(event);
-    idleTimeout = setTimeout(() => {
-      idle = true;
-    }, idleTime);
-  }
-
-  function updateSentence(event: Event) {
-    const params = new URLSearchParams(window.location.search);
-    params.set(
-      SENTENCE_TRAINER_PAGE_PARAMS.sentence.key,
-      (event.target as HTMLInputElement).value,
-    );
-    goto(`?${params.toString()}`);
-  }
-
-  const debouncedUpdateSentence = debounce(
-    updateSentence,
-    getParamOrDefault(SENTENCE_TRAINER_PAGE_PARAMS.textAreaDebounceInMillis),
-  );
-
-  function handleInputAreaKeyDown(event: KeyboardEvent) {
-    if (event.key === "Enter" && !event.shiftKey) {
-      event.preventDefault(); // Prevent new line.
-      debouncedUpdateSentence.cancel(); // Cancel any pending debounced update
-      updateSentence(event); // Update immediately
-    }
-  }
-</script>
-
-<div>
-  <h1>Sentence Trainer</h1>
-  <textarea
-    rows="7"
-    cols="80"
-    oninput={debouncedUpdateSentence}
-    onkeydown={handleInputAreaKeyDown}>{untrack(() => inputSentence)}</textarea
-  >
-
-  <div class="levels">
-    {#each masteryThresholds as [, , title], i}
-      <button
-        class:active={level === i}
-        class:mastered={i < level || progress === 1}
-        class="threshold"
-        onclick={() => {
-          level = i;
-          selectNextWord();
-        }}
-      >
-        {title}
-      </button>
-    {/each}
-    <button
-      class:active={level === masteryThresholds.length}
-      class:mastered={masteryThresholds.length < level || progress === 1}
-      class="threshold"
-      onclick={() => {
-        level = masteryThresholds.length;
-        selectNextWord();
-      }}
-    >
-      {wpmTarget} WPM
-    </button>
-    {#each masteryThresholds as _, i}
-      <div
-        class="progress"
-        style:--progress="{-100 *
-          (1 - (level === i ? progress : i < level ? 1 : 0))}%"
-        style:--mastered="{-100 *
-          (1 - (level === i ? mastered : i < level ? 1 : 0))}%"
-        class:active={level === i}
-      ></div>
-    {/each}
-    <div
-      class="progress"
-      style:--progress="-100%"
-      style:--mastered="{-100 *
-        (1 -
-          (level === masteryThresholds.length
-            ? progress
-            : masteryThresholds.length < level
-              ? 1
-              : 0))}%"
-      class:active={level === masteryThresholds.length}
-    ></div>
-  </div>
-  <div class="sentence">
-    {#each sentenceWords as _, i}
-      {#if i !== sentenceWords.length - 1}
-        {@const word = sentenceWords.slice(i, i + 2).join(" ")}
-        {@const mastery = wordMastery.get(word) ?? 0}
-        <div
-          class="arch"
-          class:mastered={mastery === 1}
-          style:opacity={mastery}
-          style:grid-row={(i % 2) + 1}
-          style:grid-column="{i + 1} / span 2"
-          style:border-bottom="none"
-        ></div>
-      {/if}
-    {/each}
-    {#each sentenceWords as word, i}
-      {@const mastery = wordMastery.get(word)}
-      <div
-        class="word"
-        class:mastered={mastery === 1}
-        style:opacity={mastery ?? 0}
-        style:grid-row={3}
-        style:grid-column={i + 1}
-      >
-        {word}
-      </div>
-    {/each}
-    {#each sentenceWords as _, i}
-      {#if i < sentenceWords.length - 2}
-        {@const word = sentenceWords.slice(i, i + 3).join(" ")}
-        {@const mastery = wordMastery.get(word) ?? 0}
-        <div
-          class="arch"
-          class:mastered={mastery === 1}
-          style:opacity={mastery}
-          style:grid-row={(i % 3) + 4}
-          style:grid-column="{i + 1} / span 3"
-          style:border-top="none"
-        ></div>
-      {/if}
-    {/each}
-  </div>
-  {#if level === masteryThresholds.length}
-    {@const maxDigits = 4}
-    {@const indices = Array.from({ length: maxDigits }, (_, i) => i)}
-    {@const wpmString = Math.floor(bestWPM).toString().padStart(maxDigits, " ")}
-    <div class="finish" transition:slide>
-      <div
-        class="wpm"
-        style:grid-template-columns="repeat({maxDigits}, 1ch) 1ch auto"
-        style:opacity={progress}
-        style:font-size="3rem"
-        style:color="var(--md-sys-color-{progress === 1
-          ? 'primary'
-          : 'on-background'})"
-        style:scale={(progress + 0.5) / 2}
-      >
-        {#each indices as i}
-          {@const char = wpmString[i]}
-          {#key char}
-            <div
-              style:grid-column={i + 1}
-              in:fly={{ y: 20, duration: 1000, easing: expoOut }}
-              out:fly={{ y: -20, duration: 1000, easing: expoOut }}
-            >
-              {char}
-            </div>
-          {/key}
-        {/each}
-        <div style:grid-column={maxDigits + 3} style:justify-self="start">
-          WPM
-        </div>
-      </div>
-      <div
-        class="wpm"
-        style:grid-template-columns="4ch 1ch auto"
-        style:font-size="1.5rem"
-      >
-        {#key wpm}
-          <div
-            style:grid-column={1}
-            style:justify-self="end"
-            transition:fade={{ duration: 200 }}
-          >
-            {Math.floor(wpm)}
-          </div>
-        {/key}
-        <div style:grid-column={3} style:justify-self="start">WPM</div>
-      </div>
-    </div>
-  {/if}
-  <ChordHud {chords} />
-  <div class="container">
-    <div
-      bind:this={chordInputContainer}
-      class="input-section"
-      onkeydown={onkey}
-      onkeyup={onkey}
-      tabindex="0"
-      role="textbox"
-    >
-      {#key recorder}
-        <div class="input" transition:fade={{ duration: 200 }}>
-          <CharRecorder replay={recorder.player} cursor={true} keys={true}>
-            <TrackText bind:text />
-            <TrackChords bind:chords />
-          </CharRecorder>
-        </div>
-      {/key}
-    </div>
-  </div>
-  {#if devTools}
-    <div>Dev Tools</div>
-    <button onclick={reset}>Reset</button>
-    <label>Idle Time <input bind:value={idleTime} /></label>
-    <table>
-      <tbody>
-        <tr>
-          <th>Total</th>
-          <td
-            ><span style:color="var(--md-sys-color-tertiary)"
-              >{Math.round(totalMs)}</span
-            >ms
-          </td>
-        </tr>
-        <tr>
-          <th>Char</th>
-          <td
-            ><span style:color="var(--md-sys-color-tertiary)"
-              >{Math.round(msPerChar)}</span
-            >ms
-          </td>
-        </tr>
-        <tr>
-          <th>Word</th>
-          <td
-            ><span style:color="var(--md-sys-color-tertiary)"
-              >{Math.round(msPerWord)}</span
-            >ms
-          </td>
-        </tr>
-      </tbody>
-    </table>
-    <table>
-      <tbody>
-        {#each masteryThresholds as _, i}
-          <tr>
-            <th>L{i + 1}</th>
-            <td><input bind:value={masteryThresholds[i]![0]} /></td>
-            <td><input bind:value={masteryThresholds[i]![1]} /></td>
-            <td><input bind:value={masteryThresholds[i]![2]} /></td>
-          </tr>
-        {/each}
-      </tbody>
-    </table>
-    <table>
-      <tbody>
-        {#each wordStats.entries() as [word, stats]}
-          {@const mastery = wordMastery.get(word) ?? 0}
-          <tr>
-            <th>{word}</th>
-            <td
-              style:color="var(--md-sys-color-{mastery === 1
-                ? 'primary'
-                : 'tertiary'})"
-              >{Math.round(mastery * 100)}%
-            </td>
-            {#each stats as stat}
-              <td>{stat}</td>
-            {/each}
-          </tr>
-        {/each}
-      </tbody>
-    </table>
-  {/if}
-</div>
-
-<style lang="scss">
-  .levels {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 2px;
-
-    button {
-      margin: 0;
-      font-size: 1rem;
-    }
-  }
-
-  .wpm {
-    display: grid;
-    transition: scale 0.2s ease;
-    width: min-content;
-
-    * {
-      grid-row: 1;
-    }
-  }
-
-  .finish {
-    display: grid;
-    grid-template-rows: repeat(2, 1fr);
-    align-items: center;
-    justify-items: center;
-    font-weight: bold;
-  }
-
-  .sentence {
-    display: grid;
-    grid-template-rows: repeat(4, auto);
-    gap: 4px 1ch;
-    margin-block: 1rem;
-    width: min-content;
-
-    .word,
-    .arch {
-      transition: opacity 0.2s ease;
-
-      &.mastered {
-        border-color: var(--md-sys-color-primary);
-        color: var(--md-sys-color-primary);
-      }
-    }
-
-    .arch {
-      border: 2px solid var(--md-sys-color-outline);
-      height: 8px;
-    }
-  }
-
-  .progress {
-    position: relative;
-    grid-row: 2;
-    border: none;
-    background: var(--md-sys-color-outline-variant);
-    width: auto;
-    height: 1rem;
-    overflow: hidden;
-
-    &::before,
-    &::after {
-      display: block;
-      position: absolute;
-      transition: transform 0.2s;
-      width: 100%;
-      height: 100%;
-      content: "";
-    }
-
-    &::before {
-      transform: translateX(var(--progress));
-      background: var(--md-sys-color-outline);
-    }
-
-    &::after {
-      transform: translateX(var(--mastered));
-      background: var(--md-sys-color-primary);
-    }
-  }
-
-  .threshold {
-    grid-row: 1;
-    justify-self: center;
-    opacity: 0.5;
-    transition: opacity 0.2s;
-    width: auto;
-
-    &.mastered,
-    &.active {
-      opacity: 1;
-    }
-
-    &.mastered {
-      color: var(--md-sys-color-primary);
-    }
-  }
-
-  .input-section {
-    display: grid;
-    cursor: text;
-
-    :global(.cursor) {
-      opacity: 0;
-    }
-  }
-
-  .input {
-    display: flex;
-    grid-row: 1;
-    grid-column: 1;
-    transition:
-      outline 0.2s ease,
-      border-radius 0.2s ease;
-    margin-block: 1rem;
-    outline: 2px dashed transparent;
-    border-radius: 0.25rem;
-    padding: 1rem;
-    max-width: 16cm;
-    font-size: 1.5rem;
-  }
-
-  .input-section:focus-within {
-    outline: none;
-
-    .input {
-      outline-color: var(--md-sys-color-primary);
-      border-radius: 1rem;
-    }
-
-    :global(.cursor) {
-      opacity: 1;
-    }
-  }
-</style>

src/routes/(app)/learn/sentence/configuration.ts

@@ -1,32 +0,0 @@
-export interface PageParam<T> {
-  key: string;
-  default: T;
-  parse?: (value: string) => T;
-}
-
-export const SENTENCE_TRAINER_PAGE_PARAMS: {
-  sentence: PageParam<string>;
-  wpm: PageParam<number>;
-  showDevTools: PageParam<boolean>;
-  textAreaDebounceInMillis: PageParam<number>;
-} = {
-  sentence: {
-    key: "sentence",
-    default: "This text has been typed at the speed of thought",
-  },
-  wpm: {
-    key: "wpm",
-    default: 250,
-    parse: (value) => Number(value),
-  },
-  showDevTools: {
-    key: "dev",
-    default: false,
-    parse: (value) => value === "true",
-  },
-  textAreaDebounceInMillis: {
-    key: "debounceMillis",
-    default: 5000,
-    parse: (value) => Number(value),
-  },
-};

src/routes/(app)/learn/sentence/constants.ts

@@ -1,8 +0,0 @@
-// Domain constants
-export const AVG_WORD_LENGTH = 5;
-export const SECONDS_IN_MINUTE = 60;
-export const MILLIS_IN_SECOND = 1000;
-
-// Error messages.
-export const TOO_SHORT_SENTENCE_FOR_NGRAMS_MESSAGE =
-  "The sentence is too short to make N-Grams, please enter longer sentence";