feat: sentence trainer prototype

feat: layout learner prototype

flake.nix

@@ -14,7 +14,13 @@
     flake-utils.lib.eachDefaultSystem (
       system:
       let
-        overlays = [ (import rust-overlay) ];
+        overlays = [
+          (import rust-overlay)
+          (final: prev: {
+            nodejs = prev.nodejs_22;
+            corepack = prev.corepack_22;
+          })
+        ];
         pkgs = import nixpkgs { inherit system overlays; };
         rust-bin = pkgs.rust-bin.stable.latest.default.override {
           extensions = [
@@ -46,8 +52,8 @@
         ];
         packages =
           (with pkgs; [
-            nodejs_22
-            nodePackages.pnpm
+            nodejs
+            pnpm
             rust-bin
             fontMin
           ])

package.json

@@ -93,5 +93,6 @@
     "web-serial-polyfill": "^1.0.15",
     "workbox-window": "^7.3.0"
   },
-  "type": "module"
+  "type": "module",
+  "packageManager": "pnpm@8.15.4+sha1.c85a4305534f76d461407b59277b954bac97b5c4"
 }

src/lib/charrecorder/TrackText.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { getContext } from "svelte";
+  import type { ReplayPlayer } from "./core/player";
+  import { TextPlugin } from "./core/plugins/text";
+
+  const player: { player: ReplayPlayer | undefined } = getContext("replay");
+
+  let { text = $bindable("") } = $props();
+
+  $effect(() => {
+    if (!player.player) return;
+    const tracker = new TextPlugin();
+    tracker.register(player.player);
+    const unsubscribe = tracker.subscribe((value) => {
+      text = value;
+    });
+
+    return unsubscribe;
+  });
+</script>

src/lib/charrecorder/TrackWpm.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { getContext } from "svelte";
+  import { WpmReplayPlugin } from "./core/plugins/wpm";
+  import type { ReplayPlayer } from "./core/player";
+
+  const player: { player: ReplayPlayer | undefined } = getContext("replay");
+
+  let { wpm = $bindable(0) } = $props();
+
+  $effect(() => {
+    if (!player.player) return;
+    const tracker = new WpmReplayPlugin();
+    tracker.register(player.player);
+    const unsubscribe = tracker.subscribe((value) => {
+      wpm = value;
+    });
+
+    return unsubscribe;
+  });
+</script>

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

@@ -85,7 +85,6 @@ export class ChordsReplayPlugin
           }
         }
       }
-      console.log(this.tokens);
 
       clearTimeout(this.timeout);
       if (replay.stepper.held.size === 0) {

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

@@ -0,0 +1,23 @@
+import type { ReplayPlayer } from "../player";
+import type { ReplayPlugin, StoreContract } from "../types";
+
+export class TextPlugin implements StoreContract<string>, ReplayPlugin {
+  private subscribers = new Set<(value: string) => void>();
+
+  register(replay: ReplayPlayer) {
+    replay.subscribe(() => {
+      if (this.subscribers.size === 0) return;
+      const text = replay.stepper.text
+        .filter((it) => it.source !== "ghost")
+        .map((it) => it.text)
+        .join("");
+      for (const subscription of this.subscribers) {
+        subscription(text);
+      }
+    });
+  }
+  subscribe(subscription: (value: string) => void) {
+    this.subscribers.add(subscription);
+    return () => this.subscribers.delete(subscription);
+  }
+}

src/lib/charrecorder/renderer/renderer.ts

@@ -36,6 +36,7 @@ export class TextRenderer {
     );
     this.cursorNode.setAttribute("x", "0");
     this.cursorNode.setAttribute("y", "0");
+    this.cursorNode.setAttribute("class", "cursor");
     this.svg.appendChild(this.cursorNode);
   }
 

src/lib/components/layout/KeyText.svelte

@@ -11,6 +11,9 @@
   const { fontSize, margin, inactiveOpacity, inactiveScale, iconFontSize } =
     getContext<VisualLayoutConfig>("visual-layout-config");
   const activeLayer = getContext<Writable<number>>("active-layer");
+  const currentAction = getContext<Writable<Set<number>> | undefined>(
+    "highlight-action",
+  );
 
   let {
     key,
@@ -47,6 +50,7 @@
   ]}
   {@const hasIcon = !dynamicMapping && !!icon}
   <text
+    class:hidden={$currentAction?.has(actionId) === false}
     fill={isApplied ? "currentcolor" : "var(--md-sys-color-primary)"}
     font-weight={isApplied ? "" : "bold"}
     text-anchor="middle"
@@ -96,4 +100,8 @@
   text:focus-within {
     outline: none;
   }
+
+  text.hidden {
+    opacity: 0.2;
+  }
 </style>

src/lib/components/layout/KeyboardKey.svelte

@@ -8,11 +8,14 @@
     KeyboardEventHandler,
     MouseEventHandler,
   } from "svelte/elements";
+  import { type Writable } from "svelte/store";
 
   const { scale, margin, strokeWidth } = getContext<VisualLayoutConfig>(
     "visual-layout-config",
   );
 
+  const highlight = getContext<Writable<Set<number>> | undefined>("highlight");
+
   let {
     i,
     key,
@@ -35,6 +38,8 @@
 
 <g
   class="key-group"
+  class:highlight={$highlight?.has(key.id) === true}
+  class:faded={$highlight?.has(key.id) === false}
   {onclick}
   {onkeypress}
   {onfocusin}
@@ -131,12 +136,14 @@
     stroke-opacity: 0.3;
   }
 
+  g.faded,
   g:hover {
     cursor: default;
     opacity: 0.6;
     transition: opacity #{$transition} ease;
   }
 
+  g.highlight,
   g:focus-within {
     color: var(--md-sys-color-primary);
     outline: none;

src/lib/serial/device.ts

@@ -134,9 +134,9 @@ export class CharaDevice {
       await this.port.close();
 
       this.version = new SemVer(
-        await this.send(1, "VERSION").then(([version]) => version),
+        await this.send(1, ["VERSION"]).then(([version]) => version),
       );
-      const [company, device, chipset] = await this.send(3, "ID");
+      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;
@@ -185,9 +185,12 @@ export class CharaDevice {
     });
   }
 
-  private async internalRead() {
+  private async internalRead(timeoutMs: number | undefined) {
     try {
-      const { value } = await timeout(this.reader.read(), 5000);
+      const { value } =
+        timeoutMs !== undefined
+          ? await timeout(this.reader.read(), timeoutMs)
+          : await this.reader.read();
       serialLog.update((it) => {
         it.push({
           type: "output",
@@ -278,14 +281,15 @@ export class CharaDevice {
    */
   async send<T extends number>(
     expectedLength: T,
-    ...command: string[]
+    command: string[],
+    timeout: number | undefined = 5000,
   ): Promise<LengthArray<string, T>> {
     return this.runWith(async (send, read) => {
       await send(...command);
       const commandString = command
         .join(" ")
         .replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
-      const readResult = await read();
+      const readResult = await read(timeout);
       if (readResult === undefined) {
         console.error("No response");
         return Array(expectedLength).fill("NO_RESPONSE") as LengthArray<
@@ -307,7 +311,7 @@ export class CharaDevice {
   }
 
   async getChordCount(): Promise<number> {
-    const [count] = await this.send(1, "CML C0");
+    const [count] = await this.send(1, ["CML", "C0"]);
     return Number.parseInt(count);
   }
 
@@ -315,7 +319,11 @@ export class CharaDevice {
    * Retrieves a chord by index
    */
   async getChord(index: number | number[]): Promise<Chord> {
-    const [actions, phrase] = await this.send(2, `CML C1 ${index}`);
+    const [actions, phrase] = await this.send(2, [
+      "CML",
+      "C1",
+      index.toString(),
+    ]);
     return {
       actions: parseChordActions(actions),
       phrase: parsePhrase(phrase),
@@ -326,29 +334,30 @@ export class CharaDevice {
    * Retrieves the phrase for a set of actions
    */
   async getChordPhrase(actions: number[]): Promise<number[] | undefined> {
-    const [phrase] = await this.send(
-      1,
-      `CML C2 ${stringifyChordActions(actions)}`,
-    );
+    const [phrase] = await this.send(1, [
+      "CML",
+      "C2",
+      stringifyChordActions(actions),
+    ]);
     return phrase === "2" ? undefined : parsePhrase(phrase);
   }
 
   async setChord(chord: Chord) {
-    const [status] = await this.send(
-      1,
+    const [status] = await this.send(1, [
       "CML",
       "C3",
       stringifyChordActions(chord.actions),
       stringifyPhrase(chord.phrase),
-    );
+    ]);
     if (status !== "0") console.error(`Failed with status ${status}`);
   }
 
   async deleteChord(chord: Pick<Chord, "actions">) {
-    const status = await this.send(
-      1,
-      `CML C4 ${stringifyChordActions(chord.actions)}`,
-    );
+    const status = await this.send(1, [
+      "CML",
+      "C4",
+      stringifyChordActions(chord.actions),
+    ]);
     if (status?.at(-1) !== "2" && status?.at(-1) !== "0")
       throw new Error(`Failed with status ${status}`);
   }
@@ -360,7 +369,13 @@ export class CharaDevice {
    * @param action the assigned action id
    */
   async setLayoutKey(layer: number, id: number, action: number) {
-    const [status] = await this.send(1, `VAR B4 A${layer} ${id} ${action}`);
+    const [status] = await this.send(1, [
+      "VAR",
+      "B4",
+      `A${layer}`,
+      id.toString(),
+      action.toString(),
+    ]);
     if (status !== "0") throw new Error(`Failed with status ${status}`);
   }
 
@@ -371,7 +386,12 @@ export class CharaDevice {
    * @returns the assigned action id
    */
   async getLayoutKey(layer: number, id: number) {
-    const [position, status] = await this.send(2, `VAR B3 A${layer} ${id}`);
+    const [position, status] = await this.send(2, [
+      "VAR",
+      "B3",
+      `A${layer}`,
+      id.toString(),
+    ]);
     if (status !== "0") throw new Error(`Failed with status ${status}`);
     return Number(position);
   }
@@ -384,7 +404,7 @@ export class CharaDevice {
    * **This does not need to be called for chords**
    */
   async commit() {
-    const [status] = await this.send(1, "VAR B0");
+    const [status] = await this.send(1, ["VAR", "B0"]);
     if (status !== "0") throw new Error(`Failed with status ${status}`);
   }
 
@@ -395,10 +415,12 @@ export class CharaDevice {
    * To permanently store the settings, you *must* call commit.
    */
   async setSetting(id: number, value: number) {
-    const [status] = await this.send(
-      1,
-      `VAR B2 ${id.toString(16).toUpperCase()} ${value}`,
-    );
+    const [status] = await this.send(1, [
+      "VAR",
+      "B2",
+      id.toString(16).toUpperCase(),
+      value.toString(),
+    ]);
     if (status !== "0") throw new Error(`Failed with status ${status}`);
   }
 
@@ -406,10 +428,11 @@ export class CharaDevice {
    * Retrieves a setting from the device
    */
   async getSetting(id: number): Promise<number> {
-    const [value, status] = await this.send(
-      2,
-      `VAR B1 ${id.toString(16).toUpperCase()}`,
-    );
+    const [value, status] = await this.send(2, [
+      "VAR",
+      "B1",
+      id.toString(16).toUpperCase(),
+    ]);
     if (status !== "0")
       throw new Error(
         `Setting "0x${id.toString(16)}" doesn't exist (Status code ${status})`,
@@ -421,14 +444,14 @@ export class CharaDevice {
    * Reboots the device
    */
   async reboot() {
-    await this.send(0, "RST");
+    await this.send(0, ["RST"]);
   }
 
   /**
    * Reboots the device to the bootloader
    */
   async bootloader() {
-    await this.send(0, "RST BOOTLOADER");
+    await this.send(0, ["RST", "BOOTLOADER"]);
   }
 
   /**
@@ -437,7 +460,12 @@ export class CharaDevice {
   async reset(
     type: "FACTORY" | "PARAMS" | "KEYMAPS" | "STARTER" | "CLEARCML" | "FUNC",
   ) {
-    await this.send(0, `RST ${type}`);
+    await this.send(0, ["RST", type]);
+  }
+
+  async queryKey(): Promise<number> {
+    const [value] = await this.send(1, ["QRY", "KEY"], undefined);
+    return Number(value);
   }
 
   /**
@@ -446,7 +474,7 @@ export class CharaDevice {
    * This is useful for debugging when there is a suspected heap or stack issue.
    */
   async getRamBytesAvailable(): Promise<number> {
-    return Number(await this.send(1, "RAM").then(([bytes]) => bytes));
+    return Number(await this.send(1, ["RAM"]).then(([bytes]) => bytes));
   }
 
   async updateFirmware(file: File | Blob): Promise<void> {

src/lib/util/shuffle.ts

@@ -0,0 +1,15 @@
+/**
+ * https://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle#The_modern_algorithm
+ */
+export function shuffleInPlace<T>(array: 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]!];
+  }
+}
+
+export function shuffle<T>(array: T[]): T[] {
+  const result = [...array];
+  shuffleInPlace(result);
+  return result;
+}

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

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

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

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

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

@@ -0,0 +1,132 @@
+<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;
+  }
+
+  .input {
+    width: 100%;
+    height: 100px;
+    border: 1px solid black;
+  }
+
+  section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    width: 100%;
+    height: 100%;
+  }
+</style>

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

@@ -0,0 +1,422 @@
+<script lang="ts">
+  import { page } from "$app/stores";
+  import { SvelteMap } from "svelte/reactivity";
+  import CharRecorder from "$lib/charrecorder/CharRecorder.svelte";
+  import { ReplayRecorder } from "$lib/charrecorder/core/recorder";
+  import { shuffleInPlace } from "$lib/util/shuffle";
+  import TrackWpm from "$lib/charrecorder/TrackWpm.svelte";
+  import { fly } 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 { onMount } from "svelte";
+  import TrackText from "$lib/charrecorder/TrackText.svelte";
+  import { browser } from "$app/environment";
+
+  function initialThresholds(): [slow: number, fast: number][] {
+    try {
+      return JSON.parse(localStorage.getItem("mastery-thresholds") ?? "");
+    } catch {
+      return [
+        [1500, 1050],
+        [3000, 2500],
+        [5000, 3500],
+        [6000, 5000],
+      ];
+    }
+  }
+
+  let masteryThresholds: [slow: number, fast: number][] =
+    $state(initialThresholds());
+
+  let inputSentence = $derived(
+    (browser && $page.url.searchParams.get("sentence")) || "Hello World",
+  );
+  let devTools = $derived(
+    browser && $page.url.searchParams.get("dev") === "true",
+  );
+  let sentenceWords = $derived(inputSentence.split(" "));
+  let currentWord = $state("");
+  let wordStats = new SvelteMap<string, number[]>();
+  let wordMastery = new SvelteMap<string, number>();
+  let text = $state("");
+  let level = $state(0);
+  let lastWPM = $state(0);
+  let bestWPM = $state(0);
+  let wpm = $state(0);
+  let chords: InferredChord[] = $state([]);
+  let recorder = $state(new ReplayRecorder());
+
+  let cooldown = $state(false);
+
+  onMount(() => {
+    selectNextWord();
+  });
+
+  $effect(() => {
+    if (lastWPM > bestWPM) {
+      bestWPM = lastWPM;
+    }
+  });
+
+  $effect(() => {
+    localStorage.setItem(
+      "mastery-thresholds",
+      JSON.stringify(masteryThresholds),
+    );
+  });
+
+  let words = $derived.by(() => {
+    const words = inputSentence.trim().split(" ");
+    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] ?? masteryThresholds.at(-1)!;
+      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.by(() => {
+    return words.length > 0
+      ? words.reduce((a, word) => a + (wordMastery.get(word) ?? 0), 0) /
+          words.length
+      : 0;
+  });
+
+  $effect(() => {
+    if (progress === 1 && level < masteryThresholds.length - 1) {
+      level++;
+    }
+  });
+
+  function selectNextWord() {
+    const unmasteredWords = words
+      .map((it) => [it, wordMastery.get(it) ?? 0] as const)
+      .filter(([, it]) => it !== 1);
+    unmasteredWords.sort(([, a], [, b]) => a - b);
+    let nextWord = unmasteredWords[0]?.[0] ?? words[0] ?? "ERROR";
+    for (const [word] of unmasteredWords) {
+      if (word === currentWord || Math.random() > 0.5) continue;
+      nextWord = word;
+      break;
+    }
+    text = "";
+    currentWord = nextWord;
+    recorder = new ReplayRecorder(nextWord);
+  }
+
+  function checkInput() {
+    if (recorder.player.stepper.challenge.length === 0) return;
+    const replay = recorder.finish(false);
+    const elapsed = replay.finish - replay.start!;
+    if (elapsed < masteryThresholds[level]![0]) {
+      lastWPM = wpm;
+
+      const prevStats = wordStats.get(currentWord) ?? [];
+      prevStats.push(elapsed);
+      wordStats.set(currentWord, prevStats.slice(-10));
+    }
+
+    cooldown = true;
+    setTimeout(() => {
+      selectNextWord();
+      cooldown = false;
+    });
+  }
+
+  $effect(() => {
+    if (!cooldown && text && text === currentWord) checkInput();
+  });
+
+  function onkey(event: KeyboardEvent) {
+    recorder.next(event);
+  }
+</script>
+
+<div>
+  <h1>Sentence Trainer</h1>
+
+  <div class="levels">
+    {#each masteryThresholds as _, i}
+      <button
+        class:active={level === i}
+        class:mastered={i < level || progress === 1}
+        class="threshold"
+        onclick={() => {
+          level = i;
+          selectNextWord();
+        }}
+      >
+        Level {i + 1}
+      </button>
+    {/each}
+    {#each masteryThresholds as _, i}
+      <div
+        class="progress"
+        style:--progress="{-100 *
+          (1 - (level === i ? progress : i < level ? 1 : 0))}%"
+        class:active={level === i}
+      ></div>
+    {/each}
+  </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>
+  <ChordHud {chords} />
+  <div class="container">
+    <div
+      class="input-section"
+      onkeydown={onkey}
+      onkeyup={onkey}
+      tabindex="0"
+      role="textbox"
+    >
+      {#if level === masteryThresholds.length - 1 && progress === 1}
+        <div class="finish" in:fly={{ y: -50, duration: 500 }}>
+          You have mastered this sentence!
+        </div>
+      {:else}
+        {#key recorder}
+          <div
+            class="input"
+            out:fly={{ y: 50, duration: 200 }}
+            in:fly={{ y: -50, duration: 500 }}
+          >
+            <CharRecorder replay={recorder.player} cursor={true} keys={true}>
+              <TrackText bind:text />
+              <TrackWpm bind:wpm />
+              <TrackChords bind:chords />
+            </CharRecorder>
+          </div>
+        {/key}
+      {/if}
+    </div>
+  </div>
+  {#if devTools}
+    <div>Dev Tools</div>
+    <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>
+          </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;
+    }
+  }
+
+  .finish {
+    font-weight: bold;
+    grid-row: 1;
+    grid-column: 1;
+    color: var(--md-sys-color-primary);
+    text-align: center;
+    font-size: 1.5rem;
+  }
+
+  .sentence {
+    display: grid;
+    width: min-content;
+    gap: 4px 1ch;
+    grid-template-rows: repeat(4, auto);
+    margin-block: 1rem;
+
+    .word,
+    .arch {
+      transition: opacity 0.2s ease;
+
+      &.mastered {
+        color: var(--md-sys-color-primary);
+        border-color: var(--md-sys-color-primary);
+      }
+    }
+
+    .arch {
+      border: 2px solid var(--md-sys-color-outline);
+      height: 8px;
+    }
+  }
+
+  .progress {
+    position: relative;
+    height: 1rem;
+    width: auto;
+    background: var(--md-sys-color-outline-variant);
+    border: none;
+    overflow: hidden;
+    grid-row: 2;
+
+    &::after {
+      content: "";
+      display: block;
+      height: 100%;
+      width: 100%;
+      background: var(--md-sys-color-primary);
+      transform: translateX(var(--progress));
+      transition: transform 0.2s;
+    }
+  }
+
+  .threshold {
+    width: auto;
+    justify-self: center;
+    opacity: 0.5;
+    transition: opacity 0.2s;
+
+    &.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;
+    font-size: 1.5rem;
+    padding: 1rem;
+    max-width: 16cm;
+    outline: 2px dashed transparent;
+    border-radius: 0.25rem;
+    margin-block: 1rem;
+    transition:
+      outline 0.2s ease,
+      border-radius 0.2s ease;
+  }
+
+  .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/StatsTable.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+  let {
+    wordStats,
+    level,
+    masteryThresholds,
+  }: { wordStats: object; level: number; masteryThresholds: number[] } =
+    $props();
+
+  // Function to calculate average time for a word
+  function calculateAverageTime(times: number[]): number {
+    if (times.length === 0) return Number.NaN;
+    const totalTime = times.reduce((a, b) => a + b, 0);
+    return totalTime / times.length;
+  }
+
+  // Function to calculate WPM for each timing
+  function calculateWPM(elapsedTime: number, wordLength: number): number {
+    const minutesElapsed = elapsedTime / 60000;
+    return Math.floor(wordLength / minutesElapsed);
+  }
+
+  // Function to get the best WPM for a word
+  function getBestWPM(times: number[], wordLength: number): number {
+    if (times.length === 0) return Number.NaN;
+    const wpms = times.map((time) => calculateWPM(time, wordLength));
+    return Math.max(...wpms);
+  }
+
+  function getLastWPM(times: number[], wordLength: number) {
+    const lastTime = times[times.length - 1];
+    return lastTime === undefined
+      ? Number.NaN
+      : calculateWPM(lastTime, wordLength);
+  }
+</script>
+
+<div class="stats-table">
+  <h2>Stats for Level {level}</h2>
+
+  <table>
+    <thead>
+      <tr>
+        <th>Word</th>
+        <th>Last WPM</th>
+        <!-- Individualized -->
+        <th>Best WPM</th>
+        <!-- Individualized -->
+        <th>Attempts</th>
+        <th>Average Time</th>
+      </tr>
+    </thead>
+    <tbody>
+      {#each Object.entries(wordStats) as [word, times]}
+        <tr>
+          <td>{word}</td>
+          <td>{getLastWPM(times, word.split(" ").length)}</td>
+          <!-- Individualized -->
+          <td>{getBestWPM(times, word.split(" ").length)}</td>
+          <!-- Individualized -->
+          <td>{times.length}</td>
+          <td>{calculateAverageTime(times)}</td>
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+</div>
+
+<style>
+  .stats-table {
+    margin-top: 20px;
+  }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 10px;
+  }
+
+  th,
+  td {
+    padding: 10px;
+    border: 1px solid #ccc;
+    text-align: left;
+  }
+
+  th {
+    background-color: #f4f4f4;
+    font-weight: bold;
+  }
+</style>