feat: cv2

icons.config.js

@@ -6,6 +6,7 @@ const config = {
   icons: [
     "rocket_launch",
     "deployed_code_update",
+    "difference",
     "adjust",
     "add",
     "piano",

package.json

@@ -25,6 +25,7 @@
     "build:tauri": "tauri build",
     "tauri": "tauri",
     "test": "vitest run --coverage",
+    "test:chord-sync": "vitest chord-sync",
     "preview": "vite preview",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "minify-icons": "node src/tools/minify-icon-font.js",
@@ -41,6 +42,7 @@
     "@codemirror/language": "^6.12.1",
     "@codemirror/lint": "^6.9.2",
     "@codemirror/merge": "^6.11.2",
+    "@codemirror/search": "^6.6.0",
     "@codemirror/state": "^6.5.3",
     "@codemirror/view": "^6.39.9",
     "@fontsource-variable/material-symbols-rounded": "^5.2.30",

pnpm-lock.yaml

@@ -29,6 +29,9 @@ importers:
       '@codemirror/merge':
         specifier: ^6.11.2
         version: 6.11.2
+      '@codemirror/search':
+        specifier: ^6.6.0
+        version: 6.6.0
       '@codemirror/state':
         specifier: ^6.5.3
         version: 6.5.3
@@ -759,8 +762,8 @@ packages:
   '@codemirror/merge@6.11.2':
     resolution: {integrity: sha512-NO5EJd2rLRbwVWLgMdhIntDIhfDtMOKYEZgqV5WnkNUS2oXOCVWLPjG/kgl/Jth2fGiOuG947bteqxP9nBXmMg==}
 
-  '@codemirror/search@6.5.6':
+  '@codemirror/search@6.6.0':
-    resolution: {integrity: sha512-rpMgcsh7o0GuCDUXKPvww+muLA1pDJaFrpq/CCHtpQJYz8xopu4D1hPcKRoDD0YlF8gZaqTNIRa4VRBWyhyy7Q==}
+    resolution: {integrity: sha512-koFuNXcDvyyotWcgOnZGmY7LZqEOXZaaxD/j6n18TCLx2/9HieZJ5H6hs1g8FiRxBD0DNfs0nXn17g872RmYdw==}
 
   '@codemirror/state@6.5.3':
     resolution: {integrity: sha512-MerMzJzlXogk2fxWFU1nKp36bY5orBG59HnPiz0G9nLRebWa0zXuv2siH6PLIHBvv5TH8CkQRqjBs0MlxCZu+A==}
@@ -5270,7 +5273,7 @@ snapshots:
       '@lezer/highlight': 1.2.3
       style-mod: 4.1.2
 
-  '@codemirror/search@6.5.6':
+  '@codemirror/search@6.6.0':
     dependencies:
       '@codemirror/state': 6.5.3
       '@codemirror/view': 6.39.9
@@ -6259,7 +6262,7 @@ snapshots:
       '@codemirror/commands': 6.10.1
       '@codemirror/language': 6.12.1
       '@codemirror/lint': 6.9.2
-      '@codemirror/search': 6.5.6
+      '@codemirror/search': 6.6.0
       '@codemirror/state': 6.5.3
       '@codemirror/view': 6.39.9
 

src/lib/backup/backup.ts

@@ -6,15 +6,9 @@ import type {
   CharaSettingsFile,
 } from "$lib/share/chara-file.js";
 import type { Change } from "$lib/undo-redo.js";
-import {
+import { changes, ChangeType, layout, settings } from "$lib/undo-redo.js";
-  changes,
-  ChangeType,
-  chords,
-  layout,
-  settings,
-} from "$lib/undo-redo.js";
 import { get } from "svelte/store";
-import { activeProfile, serialPort } from "../serial/connection";
+import { activeProfile, deviceChords, serialPort } from "../serial/connection";
 import { csvLayoutToJson, isCsvLayout } from "$lib/backup/compat/legacy-layout";
 import { isCsvChords, csvChordsToJson } from "./compat/legacy-chords";
 
@@ -60,7 +54,7 @@ export function createChordBackup(): CharaChordFile {
   return {
     charaVersion: 1,
     type: "chords",
-    chords: get(chords).map((it) => [it.actions, it.phrase]),
+    chords: get(deviceChords).map((it) => [it.actions, it.phrase]),
   };
 }
 
@@ -168,7 +162,9 @@ export function restoreFromFile(
 export function getChangesFromChordFile(file: CharaChordFile) {
   const changes: Change[] = [];
   const existingChords = new Set(
-    get(chords).map(({ phrase, actions }) => JSON.stringify([actions, phrase])),
+    get(deviceChords).map(({ phrase, actions }) =>
+      JSON.stringify([actions, phrase]),
+    ),
   );
   for (const [input, output] of file.chords) {
     if (existingChords.has(JSON.stringify([input, output]))) {

src/lib/chord-editor/ChangesPanel.svelte

@@ -0,0 +1,149 @@
+<script lang="ts">
+  import {
+    serialPort,
+    sync,
+    syncProgress,
+    syncStatus,
+  } from "$lib/serial/connection";
+  import type { ParseResult } from "./parse-meta";
+  import { actionTooltip } from "$lib/title";
+  import LL from "$i18n/i18n-svelte";
+  import ProgressButton from "$lib/ProgressButton.svelte";
+  import type { EditorView } from "codemirror";
+  import { createSaveTask } from "./save-chords";
+  import { goto } from "$app/navigation";
+
+  let { parsed, view }: { parsed: ParseResult; view: EditorView } = $props();
+
+  $inspect(parsed);
+
+  let added = $derived(
+    parsed.chords.reduce(
+      (acc, chord) =>
+        acc +
+        (chord.phrase && chord.phrase.originalValue === undefined ? 1 : 0),
+      0,
+    ),
+  );
+
+  let changed = $derived(
+    parsed.chords.reduce(
+      (acc, chord) =>
+        acc +
+        (chord.phrase?.originalValue !== undefined &&
+        chord.phrase.originalValue !== chord.phrase.value
+          ? 1
+          : 0),
+      0,
+    ),
+  );
+
+  let error: Error | undefined = $state(undefined);
+
+  async function save() {
+    const port = $serialPort;
+    if (!view || !port) return;
+    error = undefined;
+    const task = createSaveTask(view);
+    const total = task.remove.length + task.set.length;
+    $syncStatus = "uploading";
+    $syncProgress = { current: 0, max: total };
+    let progressCount = 0;
+    for (const input of task.remove) {
+      try {
+        await port.deleteChord({ actions: input });
+      } catch (e) {
+        error = e as Error;
+      }
+      progressCount++;
+      $syncProgress = { current: progressCount, max: total };
+    }
+    for (const [input, phrase] of task.set) {
+      try {
+        await port.setChord({ actions: input, phrase });
+      } catch (e) {
+        error = e as Error;
+      }
+      progressCount++;
+      $syncProgress = { current: progressCount, max: total };
+    }
+    if (error !== undefined) {
+      goto("/terminal");
+    }
+    await sync();
+  }
+
+  let removed = $derived(parsed.removed.length);
+</script>
+
+<div class="container">
+  {#if added + changed + removed !== 0 || $syncStatus === "uploading" || $syncStatus === "error"}
+    <div {@attach actionTooltip($LL.saveActions.SAVE())}>
+      <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}
+      >
+        <span class="icon">save</span>
+        {$LL.saveActions.SAVE()}
+      </ProgressButton>
+    </div>
+  {/if}
+
+  <div>
+    {#if added}
+      <span class="added">+{added}</span>
+    {/if}
+    {#if changed}
+      <span class="changed">~{changed}</span>
+    {/if}
+    {#if removed}
+      <span class="removed">-{removed}</span>
+    {/if}
+  </div>
+
+  {#if parsed.aliases.size > 0}
+    <div class="section">
+      <span class="icon">content_copy</span>
+      <span>{parsed.aliases.size}</span>
+    </div>
+  {/if}
+</div>
+
+<style lang="scss">
+  .icon {
+    font-size: 16px;
+  }
+
+  .container {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 32px;
+  }
+
+  .section {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .added {
+    color: var(--md-sys-color-success);
+  }
+
+  .changed {
+    color: var(--md-sys-color-warning);
+  }
+
+  .removed {
+    color: var(--md-sys-color-error);
+  }
+</style>

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

@@ -128,6 +128,27 @@ export function actionLinter(config?: Parameters<typeof linter>[1]) {
             message: `Phrase changed`,
           });
         }
+
+        if (chord.aliases) {
+          diagnostics.push({
+            from: chord.phrase.range[0],
+            to: chord.phrase.range[1],
+            severity: "warning",
+            markClass: "chord-alias",
+            message: `Alias of ${chord.aliases.length} chord(s)`,
+            actions: chord.aliases.map((alias) => ({
+              name: `Go to ${view.state.doc.sliceString(alias.range[0], alias.input?.range[1] ?? alias.range[1])}`,
+              apply(view) {
+                view.dispatch({
+                  selection: {
+                    anchor: alias.range[0],
+                  },
+                  scrollIntoView: true,
+                });
+              },
+            })),
+          });
+        }
       }
     }
     return diagnostics;

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

@@ -1,8 +1,5 @@
-import { KEYMAP_CODES, type KeyInfo } from "$lib/serial/keymap-codes";
+import type { KeyInfo } from "$lib/serial/keymap-codes";
 import type { CharaChordFile } from "$lib/share/chara-file";
-import { syntaxTree } from "@codemirror/language";
-import type { EditorState } from "@codemirror/state";
-import { get } from "svelte/store";
 import {
   composeChordInput,
   hasConcatenator,
@@ -15,25 +12,13 @@ import type {
   MetaRange,
   ParseResult,
 } from "./parse-meta";
+import type { Tree } from "@lezer/common";
 
-export function canUseIdAsString(info: KeyInfo): boolean {
+function parseChordMeta(
-  return !!info.id && /^[^>\n]+$/.test(info.id);
+  tree: Tree,
-}
-
-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}>`;
-}
-
-export function parseChordMeta(
-  data: EditorState,
   ids: Map<string, KeyInfo>,
   codes: Map<number, KeyInfo>,
+  sliceString: (from: number, to: number) => string,
 ): ChordMeta[] {
   console.time("parseChordTree");
   const result: ChordMeta[] = [];
@@ -42,9 +27,7 @@ export function parseChordMeta(
   let actions: ActionMeta[] = [];
   let actionRange: MetaRange | undefined = undefined;
 
-  syntaxTree(data)
+  tree.cursor().iterate(
-    .cursor()
-    .iterate(
     (node) => {
       if (node.name === "Action") {
         actionRange = [node.from, node.to];
@@ -61,7 +44,7 @@ export function parseChordMeta(
       } else if (node.name === "ActionString") {
         actions = [];
       } else if (node.name === "HexNumber") {
-          const hexString = data.doc.sliceString(node.from, node.to);
+        const hexString = sliceString(node.from, node.to);
         const code = Number.parseInt(hexString, 16);
         const parentNode = node.node.parent;
         if (parentNode?.type.name === "CompoundLiteral") {
@@ -87,7 +70,7 @@ export function parseChordMeta(
         node.name === "SingleLetter" ||
         node.name === "EscapedLetter"
       ) {
-          const id = data.doc.sliceString(node.from, node.to);
+        const id = sliceString(node.from, node.to);
         const info = ids.get(id);
         const value: ActionMeta = {
           code: info?.code ?? Number.NaN,
@@ -131,10 +114,8 @@ export function parseChordMeta(
           ),
           actions,
           valid:
-              willBeValidChordInput(
+            willBeValidChordInput(actions.length, lastCompound !== undefined) &&
-                actions.length,
+            actions.every(({ valid }) => valid),
-                lastCompound !== undefined,
-              ) && actions.every(({ valid }) => valid),
         });
       } else if (node.name === "ChordInput") {
         const lastCompound = current.compounds?.at(-1);
@@ -145,10 +126,8 @@ export function parseChordMeta(
             lastCompound?.value,
           ),
           valid:
-              willBeValidChordInput(
+            willBeValidChordInput(actions.length, lastCompound !== undefined) &&
-                actions.length,
+            actions.every(({ valid }) => valid),
-                lastCompound !== undefined,
-              ) && actions.every(({ valid }) => valid),
           actions,
         };
       }
@@ -159,7 +138,7 @@ export function parseChordMeta(
   return result;
 }
 
-function resolveChordOverrides(chords: ChordMeta[]) {
+function resolveChordOverrides(chords: ChordMeta[]): Map<string, ChordMeta> {
   console.time("resolveOverrides");
   const seen = new Map<string, ChordMeta>();
   for (const info of chords) {
@@ -176,9 +155,10 @@ function resolveChordOverrides(chords: ChordMeta[]) {
     }
   }
   console.timeEnd("resolveOverrides");
+  return seen;
 }
 
-function resolveChordAliases(chords: ChordMeta[]) {
+function resolveChordAliases(chords: ChordMeta[]): Map<string, ChordMeta[]> {
   console.time("resolveAliases");
   const aliases = new Map<string, ChordMeta[]>();
   for (const info of chords) {
@@ -188,17 +168,20 @@ function resolveChordAliases(chords: ChordMeta[]) {
     list.push(info);
     aliases.set(key, list);
   }
-  for (const aliasList of aliases.values()) {
+  for (const [key, value] of aliases) {
-    if (aliasList.length > 1) {
+    if (value.length <= 1) {
-      for (const info of aliasList) {
+      aliases.delete(key);
-        info.aliases = aliasList.filter((i) => i !== info);
+    } else {
+      for (const info of value) {
+        info.aliases = value.filter((i) => i !== info);
       }
     }
   }
   console.timeEnd("resolveAliases");
+  return aliases;
 }
 
-function resolveCompoundParents(chords: ChordMeta[]) {
+function resolveCompoundParents(chords: ChordMeta[]): Map<number, ChordMeta> {
   console.time("resolveCompoundParents");
   const compounds = new Map<number, ChordMeta>();
   for (const chord of chords) {
@@ -222,31 +205,32 @@ function resolveCompoundParents(chords: ChordMeta[]) {
     }
   }
   console.timeEnd("resolveCompoundParents");
+  return compounds;
 }
 
 export function resolveChanges(
   chords: ChordMeta[],
+  inputs: Map<string, ChordMeta>,
   deviceChords: CharaChordFile["chords"],
-): CharaChordFile["chords"] {
+): [CharaChordFile["chords"], Map<string, ChordMeta>] {
   console.time("resolveChanges");
   const removed: CharaChordFile["chords"] = [];
-  const info = new Map<string, ChordMeta>();
+  const exact = new Map<string, ChordMeta>();
   for (const chord of chords) {
     if (chord.input && chord.phrase && !chord.disabled) {
-      info.set(
+      exact.set(
         JSON.stringify([chord.input.value, chord.phrase?.value ?? []]),
         chord,
       );
-      info.set(JSON.stringify(chord.input.value), chord);
     }
   }
   for (const deviceChord of deviceChords) {
-    const exact = info.get(JSON.stringify(deviceChord));
+    const exactMatch = exact.get(JSON.stringify(deviceChord));
-    if (exact) {
+    if (exactMatch) {
-      exact.phrase!.originalValue = exact.phrase!.value;
+      exactMatch.phrase!.originalValue = exactMatch.phrase!.value;
       continue;
     }
-    const byInput = info.get(JSON.stringify(deviceChord[0]));
+    const byInput = inputs.get(JSON.stringify(deviceChord[0]));
     if (byInput) {
       byInput.phrase!.originalValue = deviceChord[1];
       continue;
@@ -255,54 +239,25 @@ export function resolveChanges(
   }
 
   console.timeEnd("resolveChanges");
-  return removed;
+  return [removed, exact];
 }
 
 export function parseCharaChords(
-  data: EditorState,
+  tree: Tree,
   ids: Map<string, KeyInfo>,
   codes: Map<number, KeyInfo>,
   deviceChords: CharaChordFile["chords"],
+  sliceString: (from: number, to: number) => string,
 ): ParseResult {
   console.time("parseTotal");
 
-  const chords = parseChordMeta(data, ids, codes);
+  const chords = parseChordMeta(tree, ids, codes, sliceString);
-  resolveChordOverrides(chords);
+  const inputs = resolveChordOverrides(chords);
-  resolveChordAliases(chords);
+  const aliases = resolveChordAliases(chords);
-  resolveCompoundParents(chords);
+  const compounds = resolveCompoundParents(chords);
-  const removed = resolveChanges(chords, deviceChords);
+  const [removed, exact] = resolveChanges(chords, inputs, deviceChords);
-
-  /*for (let i = 0; i < metas.length; i++) {
-    const [, compound] = splitCompound(chords[i]![0]);
-    if (
-      compound !== undefined &&
-      (!compoundInputs.has(compound) || orphanCompounds.has(compound))
-    ) {
-      metas[i]!.orphan = true;
-    }
-  }
-
-  const removed: CharaChordFile["chords"] = [];
-  for (let deviceChord of deviceChords) {
-    const key = JSON.stringify(deviceChord[0]);
-    if (!keys.has(key)) {
-      removed.push(deviceChord);
-    } else {
-      const index = keys.get(key)!;
-      const meta = metas[index]!;
-      if (
-        JSON.stringify(deviceChord[1]) !==
-        JSON.stringify(chords[keys.get(key)!]![1])
-      ) {
-        meta.originalPhrase = deviceChord[1];
-      } else {
-        meta.unchanged = true;
-      }
-    }
-  }*/
 
   console.timeEnd("parseTotal");
 
-  console.log(chords);
+  return { chords, removed, aliases, compounds, inputs, exact };
-  return { chords, removed };
 }

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

@@ -1,23 +0,0 @@
-import { EditorView, Decoration, type DecorationSet } from "@codemirror/view";
-import { StateField } from "@codemirror/state";
-import { parsedChordsEffect } from "./parsed-chords-plugin";
-
-const changedMark = Decoration.mark({ class: "cm-changed" });
-
-const chordMetaMark = StateField.define<DecorationSet>({
-  create() {
-    return Decoration.none;
-  },
-  update(decorations, tr) {
-    const newChords = tr.effects.findLast((e) => e.is(parsedChordsEffect));
-    if (!newChords) {
-      return decorations.map(tr.changes);
-    }
-    return newChords.value.meta.map(meta => {
-      if (meta.originalPhrase) {
-    return underlineMark.range(meta.from, meta.to);
-}
-});
-  },
-  provide: (f) => EditorView.decorations.from(f),
-});

src/lib/chord-editor/changes-panel.svelte.ts

@@ -0,0 +1,44 @@
+import { EditorView, showPanel, type Panel } from "@codemirror/view";
+import { parsedChordsField } from "./parsed-chords-plugin";
+import { mount, unmount } from "svelte";
+import ChangesPanel from "./ChangesPanel.svelte";
+
+function changesPanelFunc(view: EditorView): Panel {
+  let dom = document.createElement("div");
+  dom.style.display = "contents";
+  let viewState = $state.raw(view);
+  let parsed = $state.raw(view.state.field(parsedChordsField));
+  let component: {};
+  return {
+    dom,
+    mount() {
+      component = mount(ChangesPanel, {
+        target: dom,
+        props: {
+          get parsed() {
+            return parsed;
+          },
+          get view() {
+            return viewState;
+          },
+        },
+      });
+    },
+    update: (update) => {
+      if (
+        update.startState.field(parsedChordsField) !==
+        update.state.field(parsedChordsField)
+      ) {
+        console.log("update changes panel");
+        parsed = update.state.field(parsedChordsField);
+      }
+    },
+    destroy() {
+      unmount(component);
+    },
+  };
+}
+
+export function changesPanel() {
+  return showPanel.of(changesPanelFunc);
+}

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

@@ -1,39 +0,0 @@
-import type { EditorState } from "@codemirror/state";
-import { EditorView, showPanel, type Panel } from "@codemirror/view";
-import { parsedChordsField } from "./parsed-chords-plugin";
-
-function getChanges(state: EditorState): string {
-  const parsed = state.field(parsedChordsField);
-  const added = parsed.chords.reduce(
-    (acc, chord) =>
-      acc + (chord.phrase && chord.phrase.originalValue === undefined ? 1 : 0),
-    0,
-  );
-  const changed = parsed.chords.reduce(
-    (acc, chord) =>
-      acc +
-      (chord.phrase &&
-      chord.phrase.originalValue &&
-      chord.phrase.originalValue !== chord.phrase.value
-        ? 1
-        : 0),
-    0,
-  );
-  const removed = parsed.removed.length;
-  return `+${added} ~${changed} -${removed} (${parsed.chords.length} total)`;
-}
-
-function wordCountPanel(view: EditorView): Panel {
-  let dom = document.createElement("div");
-  dom.textContent = getChanges(view.state);
-  return {
-    dom,
-    update(update) {
-      dom.textContent = getChanges(update.state);
-    },
-  };
-}
-
-export function changesPanel() {
-  return showPanel.of(wordCountPanel);
-}

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

@@ -1,28 +1,40 @@
 import type { CharaChordFile } from "$lib/share/chara-file";
 import { StateEffect, StateField } from "@codemirror/state";
+import { actionMetaPlugin } from "./action-meta-plugin";
+import { syncCharaChords } from "./chord-sync";
+import type { EditorView } from "@codemirror/view";
 
-export const chordSyncEffect = StateEffect.define<CharaChordFile["chords"]>();
+const chordSyncEffect = StateEffect.define<CharaChordFile["chords"]>();
+
+export function editorSyncChords(
+  view: EditorView,
+  newDeviceChords: CharaChordFile["chords"],
+) {
+  const { ids, codes } = view.state.field(actionMetaPlugin.field);
+  const oldDeviceChords = view.state.field(deviceChordField);
+  const changes = syncCharaChords(
+    oldDeviceChords,
+    newDeviceChords,
+    ids,
+    codes,
+    view.state.doc.toString(),
+  );
+  view.dispatch({
+    effects: chordSyncEffect.of(newDeviceChords),
+    changes,
+  });
+}
 
 export const deviceChordField = StateField.define<CharaChordFile["chords"]>({
   create() {
     return [];
   },
   update(value, transaction) {
-    // save initial device chords
-    // compare new device chords with initial device chords
-    // take changed/new/removed chords
-    // compare current editor chords with initial device chords
-    // compare two change sets
-    // apply removals if the chord didn't change on either end
-    // apply
     return (
       transaction.effects.findLast((it) => it.is(chordSyncEffect))?.value ??
       value
     );
   },
-  compare(a, b) {
-    return JSON.stringify(a) === JSON.stringify(b);
-  },
   toJSON(value) {
     return value;
   },

src/lib/chord-editor/chord-sync.spec.ts

@@ -0,0 +1,135 @@
+import type { KeyInfo } from "$lib/serial/keymap-codes";
+import type { CharaChordFile } from "$lib/share/chara-file";
+import { describe, it, expect } from "vitest";
+import { parseCharaChords } from "./action-serializer";
+import { parser } from "./chords.grammar";
+import { syncCharaChords } from "./chord-sync";
+import { Text } from "@codemirror/state";
+
+const asciiInfo: KeyInfo[] = Array.from(
+  { length: 0x7f - 0x20 },
+  (_, i) =>
+    ({
+      code: i + 0x20,
+      id: String.fromCharCode(i + 0x20),
+    }) satisfies KeyInfo,
+);
+const asciiCodes = new Map<number, KeyInfo>(
+  asciiInfo.map((info) => [info.code, info]),
+);
+const asciiIds = new Map<string, KeyInfo>(
+  asciiInfo.map((info) => [info.id!, info]),
+);
+
+function chords(...strings: string[]): string {
+  return strings.join("\n");
+}
+
+function backup(doc: string): CharaChordFile["chords"] {
+  const tree = parser.parse(doc);
+  const result = parseCharaChords(tree, asciiIds, asciiCodes, [], (from, to) =>
+    doc.slice(from, to),
+  );
+  return result.chords
+    .filter((chord) => !chord.disabled)
+    .map((chord) => [chord.input?.value ?? [], chord.phrase?.value ?? []]);
+}
+
+function expectSync(options: {
+  org: string[];
+  mod: string[];
+  cur: string[];
+  exp: string[];
+}) {
+  expect(
+    syncCharaChords(
+      backup(chords(...options.org)),
+      backup(chords(...options.mod)),
+      asciiIds,
+      asciiCodes,
+      chords(...options.cur),
+    )
+      .apply(Text.of(options.cur))
+      .toString()
+      .replace(/\n$/, ""),
+  ).toEqual(chords(...options.exp));
+}
+
+describe("chord sync", function () {
+  it("should not do anything when no changes happened", function () {
+    expectSync({
+      org: ["abc=>def", "def=>ghi", "jkl=>mno"],
+      mod: ["abc=>def", "def=>ghi", "jkl=>mno"],
+      cur: ["abc=>def", "def=>ghi", "jkl=>mno"],
+      exp: ["abc=>def", "def=>ghi", "jkl=>mno"],
+    });
+  });
+
+  it("should not touch the doc if device chords are unchanged", function () {
+    expectSync({
+      org: ["abc=>def", "def=>ghi", "jkl=>mno"],
+      mod: ["abc=>def", "def=>ghi", "jkl=>mno"],
+      cur: ["ab=>def", "def=>gh"],
+      exp: ["ab=>def", "def=>gh"],
+    });
+  });
+
+  it("should apply removals to unchanged chords only", function () {
+    expectSync({
+      org: ["abc=>def", "def=>ghi", "jkl=>mno", "mno=>pqr"],
+      mod: ["abc=>def"],
+      cur: ["abc=>def", "def=>ghij", "jkl=>mno", "mno=>pqr"],
+      exp: ["abc=>def", "def=>ghij"],
+    });
+  });
+
+  it("should keep user modifications over device modifications", function () {
+    expectSync({
+      org: ["abc=>def", "def=>ghi", "jkl=>mno", "mno=>pqr"],
+      mod: ["abc=>def", "def=>ghijk", "jkl=>mnop", "mno=>pqr"],
+      cur: ["abc=>def", "def=>ghij", "jkl=>mno", "mno=>pqr"],
+      exp: ["abc=>def", "def=>ghij", "jkl=>mnop", "mno=>pqr"],
+    });
+  });
+
+  it("should handle complex changes", function () {
+    expectSync({
+      org: [
+        "unchanged=>unchanged",
+        "usermod=>usermod",
+        "devmod=>devmod",
+        "userremoval=>userremoval",
+        "devremoval=>devremoval",
+        "devremusermod=>devremusermod",
+      ],
+      mod: [
+        "unchanged=>unchanged",
+        "devadd=>devadd",
+        "usermod=>usermod",
+        "userremoval=>userremoval",
+        "devmod=>devmod1",
+        "sameadd=>sameadd",
+      ],
+      cur: [
+        "useradd1=>useradd1",
+        "unchanged=>unchanged",
+        "usermod=>use",
+        "devremusermod=>xyz",
+        "devmod=>devmod",
+        "sameadd=>sameadd",
+        "devremoval=>devremoval",
+        "useradd=>useradd",
+      ],
+      exp: [
+        "devadd=>devadd",
+        "useradd1=>useradd1",
+        "unchanged=>unchanged",
+        "usermod=>use",
+        "devremusermod=>xyz",
+        "devmod=>devmod1",
+        "sameadd=>sameadd",
+        "useradd=>useradd",
+      ],
+    });
+  });
+});

src/lib/chord-editor/chord-sync.ts

@@ -0,0 +1,130 @@
+import type { KeyInfo } from "$lib/serial/keymap-codes";
+import { ChangeSet, type ChangeSpec } from "@codemirror/state";
+import { parseCharaChords } from "./action-serializer";
+import { parser } from "./chords.grammar";
+import type { CharaChordFile } from "$lib/share/chara-file";
+import { splitCompound } from "$lib/serial/chord";
+
+function canUseIdAsString(info: KeyInfo): boolean {
+  return !!info.id && /^[^>\n]+$/.test(info.id);
+}
+
+export function actionToValue(code: number, info?: KeyInfo) {
+  if (info && info.id?.length === 1)
+    return /^[<>|\\\s]$/.test(info.id) ? `\\${info.id}` : info.id;
+  if (!info || !canUseIdAsString(info))
+    return `<0x${code.toString(16).padStart(2, "0")}>`;
+  return `<${info.id}>`;
+}
+
+function canonicalInputSorting(input: number[], phrase: number[]): number[] {
+  const tail = [...input];
+  const prefix = phrase.filter((code) => {
+    const index = tail.indexOf(code);
+    if (index !== -1) {
+      tail.splice(index, 1);
+      return true;
+    }
+    return false;
+  });
+  return [...prefix, ...tail];
+}
+
+export interface ChangeType {
+  from: number;
+  to: number;
+  insert: string;
+}
+
+export function syncCharaChords(
+  originalDeviceChords: CharaChordFile["chords"],
+  newDeviceChords: CharaChordFile["chords"],
+  ids: Map<string, KeyInfo>,
+  codes: Map<number, KeyInfo>,
+  doc: string,
+): ChangeSet {
+  const tree = parser.parse(doc);
+  const result = parseCharaChords(
+    tree,
+    ids,
+    codes,
+    originalDeviceChords,
+    (from, to) => doc.slice(from, to),
+  );
+
+  const exactChords = new Map<string, number>();
+  for (const chord of originalDeviceChords) {
+    const key = JSON.stringify(chord);
+    const count = exactChords.get(key) ?? 0;
+    exactChords.set(key, count + 1);
+  }
+
+  const changes: ChangeType[] = [];
+
+  const inputModified = new Set<string>();
+  for (const chord of newDeviceChords) {
+    const key = JSON.stringify(chord);
+    const count = exactChords.get(key) ?? 0;
+    if (count > 0) {
+      exactChords.set(key, count - 1);
+      continue;
+    }
+
+    const inputKey = JSON.stringify(chord[0]);
+    inputModified.add(inputKey);
+    const byInput = result.inputs.get(inputKey);
+    if (byInput) {
+      if (
+        byInput.phrase?.originalValue &&
+        byInput.phrase.originalValue === byInput.phrase.value
+      ) {
+        changes.push({
+          from: byInput.phrase.range[0],
+          to: byInput.phrase.range[1],
+          insert: chord[1]
+            .map((code) => actionToValue(code, codes.get(code)))
+            .join(""),
+        });
+      }
+    } else {
+      const [inputs, compound] = splitCompound(chord[0]);
+      const sortedInput = canonicalInputSorting(inputs, chord[1]);
+      changes.push({
+        from: 0,
+        to: 0,
+        insert:
+          (compound ? `|0x${compound.toString(16)}|` : "") +
+          sortedInput
+            .map((code) => actionToValue(code, codes.get(code)))
+            .join("") +
+          "=>" +
+          chord[1]
+            .map((code) => actionToValue(code, codes.get(code)))
+            .join("") +
+          "\n",
+      });
+    }
+  }
+
+  changes.push(
+    ...exactChords
+      .entries()
+      .filter(([, count]) => count > 0)
+      .map(([key]) => result.exact.get(key))
+      .filter((chord) => chord !== undefined)
+      .filter(
+        (chord) =>
+          chord.input && !inputModified.has(JSON.stringify(chord.input.value)),
+      )
+      .map(
+        (chord) =>
+          ({
+            from: chord.range[0],
+            to: chord.range[1],
+            insert: "",
+          }) satisfies ChangeSpec,
+      ),
+  );
+
+  return ChangeSet.of(changes, doc.length);
+}

src/lib/chord-editor/parse-meta.ts

@@ -132,6 +132,10 @@ export function mapChordMeta(chord: ChordMeta, change: ChangeDesc): ChordMeta {
 export interface ParseResult {
   chords: ChordMeta[];
   removed: CharaChordFile["chords"];
+  aliases: Map<string, ChordMeta[]>;
+  compounds: Map<number, ChordMeta>;
+  inputs: Map<string, ChordMeta>;
+  exact: Map<string, ChordMeta>;
 }
 
 export function mapParseResult(

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

@@ -10,6 +10,10 @@ export const parsedChordsField = StateField.define<ParseResult>({
     return {
       chords: [],
       removed: [],
+      aliases: new Map(),
+      compounds: new Map(),
+      inputs: new Map(),
+      exact: new Map(),
     };
   },
   update(value, transaction) {
@@ -23,7 +27,13 @@ export const parsedChordsField = StateField.define<ParseResult>({
       codes !== transaction.startState.field(actionMetaPlugin.field).codes ||
       deviceChords !== transaction.startState.field(deviceChordField)
     ) {
-      return parseCharaChords(transaction.state, ids, codes, deviceChords);
+      return parseCharaChords(
+        syntaxTree(transaction.state),
+        ids,
+        codes,
+        deviceChords,
+        (from, to) => transaction.state.doc.sliceString(from, to),
+      );
     }
     return mapParseResult(value, transaction.changes);
   },

src/lib/chord-editor/persistent-state-plugin.ts

@@ -27,11 +27,8 @@ import { syntaxHighlighting } from "@codemirror/language";
 import { deviceChordField } from "./chord-sync-plugin";
 import { actionMetaPlugin } from "./action-meta-plugin";
 import { parsedChordsField } from "./parsed-chords-plugin";
-import { changesPanel } from "./changes-panel";
+import { changesPanel } from "./changes-panel.svelte";
-import {
+import { searchKeymap } from "@codemirror/search";
-  parseCompressed,
-  stringifyCompressed,
-} from "$lib/serial/serialization";
 
 const serializedFields = {
   history: historyField,
@@ -44,11 +41,8 @@ export interface EditorConfig {
   autocomplete(query: string | undefined): void;
 }
 
-export async function loadPersistentState(
+export function createConfig(params: EditorConfig) {
-  params: EditorConfig,
+  return {
-): Promise<EditorState> {
-  const stored = localStorage.getItem(params.storeName);
-  const config = {
     extensions: [
       actionMetaPlugin.plugin,
       deviceChordField,
@@ -86,14 +80,20 @@ export async function loadPersistentState(
           borderColor: "var(--md-sys-color-on-surface)",
         },
       }),
-      keymap.of([...standardKeymap, ...historyKeymap]),
+      keymap.of([...standardKeymap, ...historyKeymap, ...searchKeymap]),
     ],
   } satisfies EditorStateConfig;
+}
+
+export async function loadPersistentState(
+  params: EditorConfig,
+): Promise<EditorState> {
+  const stored = await getState(params.storeName);
+  const config = createConfig(params);
 
   if (stored) {
     try {
-      const parsed = await parseCompressed(new Blob([stored]));
+      return EditorState.fromJSON(stored, config, serializedFields);
-      return EditorState.fromJSON(parsed, config, serializedFields);
     } catch (e) {
       console.error("Failed to parse persistent state:", e);
     }
@@ -109,13 +109,10 @@ export function persistentStatePlugin(storeName: string) {
         .pipe(
           debounceTime(500),
           mergeMap(() =>
-            stringifyCompressed(this.view.state.toJSON(serializedFields)),
+            storeState(storeName, this.view.state.toJSON(serializedFields)),
           ),
-          mergeMap((blob) => blob.text()),
         )
-        .subscribe((value) => {
+        .subscribe(() => {});
-          localStorage.setItem(storeName, value);
-        });
 
       constructor(readonly view: EditorView) {}
 
@@ -131,3 +128,58 @@ export function persistentStatePlugin(storeName: string) {
     },
   );
 }
+
+const dbName = "chord-state";
+const dbVersion = 1;
+const storeName = "state";
+
+async function openDb(): Promise<IDBDatabase> {
+  const dbRequest = indexedDB.open(dbName, dbVersion);
+  return new Promise<IDBDatabase>((resolve, reject) => {
+    dbRequest.onsuccess = () => resolve(dbRequest.result);
+    dbRequest.onerror = () => reject(dbRequest.error);
+    dbRequest.onupgradeneeded = () => {
+      const db = dbRequest.result;
+      if (!db.objectStoreNames.contains(storeName)) {
+        db.createObjectStore(storeName);
+      }
+    };
+  });
+}
+
+async function getState<T>(name: string): Promise<T | undefined> {
+  const db = await openDb();
+  try {
+    const readTransaction = db.transaction([storeName], "readonly");
+    const store = readTransaction.objectStore(storeName);
+    const itemRequest = store.get(name);
+    const result = await new Promise<T | undefined>((resolve) => {
+      itemRequest.onsuccess = () => resolve(itemRequest.result);
+      itemRequest.onerror = () => resolve(undefined);
+    });
+    return result;
+  } catch (e) {
+    console.error(e);
+    return undefined;
+  } finally {
+    db.close();
+  }
+}
+
+async function storeState<T>(name: string, state: T): Promise<void> {
+  const db = await openDb();
+  try {
+    const putTransaction = db.transaction([storeName], "readwrite");
+    const putStore = putTransaction.objectStore(storeName);
+    const putRequest = putStore.put(state, name);
+    await new Promise<void>((resolve, reject) => {
+      putRequest.onsuccess = () => resolve();
+      putRequest.onerror = () => reject(putRequest.error);
+    });
+    putTransaction.commit();
+  } catch (e) {
+    console.error(e);
+  } finally {
+    db.close();
+  }
+}

src/lib/chord-editor/save-chords.ts

@@ -0,0 +1,58 @@
+import type { EditorView } from "@codemirror/view";
+import { parser } from "./chords.grammar";
+import { parseCharaChords } from "./action-serializer";
+import { actionMetaPlugin } from "./action-meta-plugin";
+import { deviceChordField } from "./chord-sync-plugin";
+import type { CharaChordFile } from "$lib/share/chara-file";
+
+export interface SaveChordsTask {
+  remove: number[][];
+  set: [number[], number[]][];
+}
+
+export function createSaveTask(view: EditorView): SaveChordsTask {
+  const tree = parser.parse(view.state.doc.toString());
+  const { ids, codes } = view.state.field(actionMetaPlugin.field);
+  const deviceChords = view.state.field(deviceChordField);
+  const result = parseCharaChords(tree, ids, codes, deviceChords, (from, to) =>
+    view.state.doc.sliceString(from, to),
+  );
+
+  return {
+    remove: result.removed.map((chord) => chord[0]),
+    set: result.chords
+      .filter(
+        (chord) =>
+          !chord.disabled &&
+          (!chord.phrase ||
+            chord.phrase?.originalValue !== chord.phrase?.value),
+      )
+      .map((chord) => [chord.input?.value ?? [], chord.phrase?.value ?? []]),
+  };
+}
+
+export function applySaveTask(
+  backup: CharaChordFile["chords"],
+  task: SaveChordsTask,
+): CharaChordFile["chords"] {
+  const newBackup = [...backup];
+  for (const input of task.remove) {
+    const index = newBackup.findIndex((chord) => {
+      return JSON.stringify(chord[0]) === JSON.stringify(input);
+    });
+    if (index !== -1) {
+      newBackup.splice(index, 1);
+    }
+  }
+  for (const [input, phrase] of task.set) {
+    const index = newBackup.findIndex((chord) => {
+      return JSON.stringify(chord[0]) === JSON.stringify(input);
+    });
+    if (index !== -1) {
+      newBackup[index] = [input, phrase];
+    } else {
+      newBackup.push([input, phrase]);
+    }
+  }
+  return newBackup;
+}

src/lib/components/layout/ActionList.svelte

@@ -14,7 +14,7 @@
   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";
+  import { actionToValue } from "$lib/chord-editor/chord-sync";
 
   let {
     currentAction = undefined,

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, KEYMAP_CODES],
-  ([chords, layout, KEYMAP_CODES]) =>
-    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/undo-redo.ts

@@ -1,16 +1,9 @@
 import { persistentWritable } from "$lib/storage";
 import { derived } from "svelte/store";
-import { hashChord, type Chord } from "$lib/serial/chord";
+import { deviceLayout, deviceSettings } from "$lib/serial/connection";
-import {
-  deviceChords,
-  deviceLayout,
-  deviceSettings,
-} from "$lib/serial/connection";
-import { KEYMAP_CODES } from "$lib/serial/keymap-codes";
 
 export enum ChangeType {
   Layout,
-  Chord,
   Setting,
 }
 
@@ -22,14 +15,6 @@ export interface LayoutChange {
   profile?: number;
 }
 
-export interface ChordChange {
-  type: ChangeType.Chord;
-  deleted?: true;
-  id: number[];
-  actions: number[];
-  phrase: number[];
-}
-
 export interface SettingChange {
   type: ChangeType.Setting;
   id: number;
@@ -42,20 +27,18 @@ export interface ChangeInfo {
   isCommitted?: boolean;
 }
 
-export type Change = LayoutChange | ChordChange | SettingChange;
+export type Change = LayoutChange | SettingChange;
 
 export const changes = persistentWritable<Change[][]>("changes", []);
 
 export interface Overlay {
   layout: Array<Array<Map<number, number> | undefined> | undefined>;
-  chords: Map<string, Chord & { deleted: boolean }>;
   settings: Array<Map<number, number> | undefined>;
 }
 
 export const overlay = derived(changes, (changes) => {
   const overlay: Overlay = {
     layout: [],
-    chords: new Map(),
     settings: [],
   };
 
@@ -71,13 +54,6 @@ export const overlay = derived(changes, (changes) => {
             change.action,
           );
           break;
-        case ChangeType.Chord:
-          overlay.chords.set(JSON.stringify(change.id), {
-            actions: change.actions,
-            phrase: change.phrase,
-            deleted: change.deleted ?? false,
-          });
-          break;
         case ChangeType.Setting:
           change.profile ??= 0;
           overlay.settings[change.profile] ??= new Map();
@@ -113,90 +89,3 @@ export const layout = derived([overlay, deviceLayout], ([overlay, profiles]) =>
     ),
   ),
 );
-
-export type ChordInfo = Chord &
-  ChangeInfo & {
-    phraseChanged: boolean;
-    actionsChanged: boolean;
-    sortBy: string;
-  } & {
-    id: number[];
-    deleted: boolean;
-  };
-export const chords = derived(
-  [overlay, deviceChords, KEYMAP_CODES],
-  ([overlay, chords, codes]) => {
-    const newChords = new Set(overlay.chords.keys());
-
-    const changedChords = chords.map<ChordInfo>((chord) => {
-      const id = JSON.stringify(chord.actions);
-      if (overlay.chords.has(id)) {
-        newChords.delete(id);
-        const changedChord = overlay.chords.get(id)!;
-        return {
-          id: chord.actions,
-          // use the old phrase for stable editing
-          sortBy: chord.phrase.map((it) => codes.get(it)?.id ?? it).join(),
-          actions: changedChord.actions,
-          phrase: changedChord.phrase,
-          actionsChanged: id !== JSON.stringify(changedChord.actions),
-          phraseChanged:
-            JSON.stringify(chord.phrase) !==
-            JSON.stringify(changedChord.phrase),
-          isApplied: false,
-          deleted: changedChord.deleted,
-        };
-      } else {
-        return {
-          id: chord.actions,
-          sortBy: chord.phrase.map((it) => codes.get(it)?.id ?? it).join(),
-          actions: chord.actions,
-          phrase: chord.phrase,
-          phraseChanged: false,
-          actionsChanged: false,
-          isApplied: true,
-          deleted: false,
-        };
-      }
-    });
-    for (const id of newChords) {
-      const chord = overlay.chords.get(id)!;
-      changedChords.push({
-        sortBy: "",
-        isApplied: false,
-        actionsChanged: true,
-        phraseChanged: false,
-        deleted: chord.deleted,
-        id: JSON.parse(id),
-        phrase: chord.phrase,
-        actions: chord.actions,
-      });
-    }
-
-    return changedChords.sort(({ sortBy: a }, { sortBy: b }) =>
-      a.localeCompare(b),
-    );
-  },
-);
-
-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) =>
-    new Map(chords.map((chord) => [hashChord(chord.actions), chord] as const)),
-);

src/routes/(app)/PageTransition.svelte

@@ -13,14 +13,7 @@
 
   let isNavigating = $state(false);
 
-  const routeOrder = [
+  const routeOrder = ["/config", "/docs", "/editor", "/chat", "/plugin"];
-    "/config",
-    "/learn",
-    "/docs",
-    "/editor",
-    "/chat",
-    "/plugin",
-  ];
 
   function routeIndex(route: string | undefined): number {
     return routeOrder.findIndex((it) => route?.startsWith(it));

src/routes/(app)/Sidebar.svelte

@@ -39,7 +39,12 @@
     [
       { 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: "https://adventure.charachorder.io/",
+        icon: "school",
+        title: "Learn",
+        external: true,
+      },
     ],
     /*[
       { href: "/plugin", icon: "code", title: "Plugin", wip: true },

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

@@ -6,18 +6,15 @@
     layout,
     overlay,
     settings,
-    duplicateChords,
   } from "$lib/undo-redo";
-  import type { Change, ChordChange } from "$lib/undo-redo";
+  import type { Change } from "$lib/undo-redo";
   import { fly } from "svelte/transition";
   import { actionTooltip } from "$lib/title";
   import {
-    deviceChords,
     deviceLayout,
     deviceSettings,
     serialLog,
     serialPort,
-    sync,
     syncProgress,
     syncStatus,
   } from "$lib/serial/connection";
@@ -106,115 +103,7 @@
     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) {
@@ -235,10 +124,8 @@
         (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;
+      const progressMax = layoutChanges + settingChanges;
 
       let progressCurrent = 0;
 
@@ -261,11 +148,9 @@
           layoutSuccess = false;
         }
       }
-      let chordsSuccess = await saveChords(updateProgress);
 
-      if (layoutSuccess && settingsSuccess && chordsSuccess) {
+      if (layoutSuccess && settingsSuccess) {
         changes.set([]);
-        needsSync = true;
       } else {
         throw new Error("Some changes could not be saved.");
       }
@@ -280,10 +165,6 @@
     } finally {
       $syncStatus = "done";
     }
-
-    if (needsSync) {
-      await sync();
-    }
   }
 
   let progressPopover: HTMLElement | undefined = $state();

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

@@ -1,468 +1,278 @@
 <script lang="ts">
-  import { KEYMAP_CODES, type KeyInfo } from "$lib/serial/keymap-codes";
+  import { EditorView } from "codemirror";
-  import FlexSearch, { type Index } from "flexsearch";
+  import "$lib/chord-editor/chords.grammar";
-  import LL from "$i18n/i18n-svelte";
+  import { persistentWritable } from "$lib/storage";
-  import { actionTooltip } from "$lib/title";
+  import ActionList from "$lib/components/layout/ActionList.svelte";
-  import { onDestroy, onMount, setContext, tick } from "svelte";
+  import {
-  import { changes, ChangeType, chords } from "$lib/undo-redo";
+    createConfig,
-  import type { ChordChange, ChordInfo } from "$lib/undo-redo";
+    loadPersistentState,
-  import { derived, writable } from "svelte/store";
+  } from "$lib/chord-editor/persistent-state-plugin";
-  import ChordEdit from "./ChordEdit.svelte";
+  import { parsedChordsField } from "$lib/chord-editor/parsed-chords-plugin";
-  import { crossfade, fly } from "svelte/transition";
+  import type { CharaChordFile } from "$lib/share/chara-file";
-  import ChordActionEdit from "./ChordActionEdit.svelte";
+  import { EditorState } from "@codemirror/state";
-  import { browser } from "$app/environment";
+  import { deviceChords } from "$lib/serial/connection";
-  import { expoOut } from "svelte/easing";
+  import { editorSyncChords } from "$lib/chord-editor/chord-sync-plugin";
-  import { osLayout } from "$lib/os-layout";
-  import randomTips from "$lib/assets/random-tips/en.json";
-  import { deviceMeta } from "$lib/serial/connection";
-  import { restoreFromFile } from "$lib/backup/backup";
 
-  const resultSize = 38;
+  let queryFilter: string | undefined = $state(undefined);
-  let results: HTMLElement;
-  const pageSize = writable(0);
-  let resizeObserver: ResizeObserver;
 
-  let abortIndexing: (() => void) | undefined;
+  const rawCode = persistentWritable("chord-editor-raw-code", false);
-  let progress = $state(0);
+  const showEdits = persistentWritable("chord-editor-show-edits", true);
+  const denseSpacing = persistentWritable("chord-editor-spacing", false);
 
-  onMount(() => {
+  let editor: HTMLDivElement | undefined = $state(undefined);
-    resizeObserver = new ResizeObserver(() => {
+  let view: EditorView | undefined = $state(undefined);
-      pageSize.set(Math.floor(results.clientHeight / resultSize));
-    });
-    pageSize.set(Math.floor(results.clientHeight / resultSize));
-    resizeObserver.observe(results);
-  });
 
-  onDestroy(() => {
-    resizeObserver?.disconnect();
-  });
-
-  let index = new FlexSearch.Index();
-  let searchIndex = writable<Index | undefined>(undefined);
   $effect(() => {
-    abortIndexing?.();
+    if (!editor) return;
-    progress = 0;
+    const viewPromise = loadPersistentState({
-    buildIndex($chords, $osLayout, $KEYMAP_CODES).then(searchIndex.set);
+      rawCode: $rawCode,
-  });
+      storeName: "chord-editor-state-storage",
-
+      autocomplete(query) {
-  function encodeChord(
+        queryFilter = query;
-    chord: ChordInfo,
-    osLayout: Map<string, string>,
-    codes: Map<number, KeyInfo>,
-    onlyPhrase: boolean = false,
-  ) {
-    const plainPhrase: string[] = [""];
-    const tags = new Set<string>();
-    const extraActions = new Set<string>();
-    const extraCodes = new Set<string>();
-
-    for (const actionCode of chord.phrase ?? []) {
-      const action = codes.get(actionCode);
-      if (!action) {
-        extraCodes.add(`0x${actionCode.toString(16)}`);
-        continue;
-      }
-
-      const osCode = action.keyCode && osLayout.get(action.keyCode);
-      const token = osCode?.length === 1 ? osCode : action.display || action.id;
-      if (!token) {
-        extraCodes.add(`0x${action.code.toString(16)}`);
-        continue;
-      }
-
-      if (
-        (token === "SPACE" || /^\s$/.test(token)) &&
-        plainPhrase.at(-1) !== ""
-      ) {
-        plainPhrase.push("");
-      } else if (token.length === 1) {
-        plainPhrase[plainPhrase.length - 1] =
-          plainPhrase[plainPhrase.length - 1] + token;
-      } else {
-        extraActions.add(token);
-      }
-    }
-
-    if (chord.phrase?.[0] === 298) {
-      tags.add("suffix");
-    }
-    if (
-      ["ARROW_LT", "ARROW_RT", "ARROW_UP", "ARROW_DN"].some((it) =>
-        extraActions.has(it),
-      )
-    ) {
-      tags.add("cursor warp");
-    }
-    if (
-      ["CTRL", "ALT", "GUI", "ENTER", "TAB"].some((it) => extraActions.has(it))
-    ) {
-      tags.add("macro");
-    }
-    if (chord.actions[0] !== 0) {
-      tags.add("compound");
-    }
-
-    const input = chord.actions
-      .slice(chord.actions.lastIndexOf(0) + 1)
-      .map((it) => {
-        const info = codes.get(it);
-        if (!info) return `0x${it.toString(16)}`;
-        const osCode = info.keyCode && osLayout.get(info.keyCode);
-        const result = osCode?.length === 1 ? osCode : info.id;
-        return result ?? `0x${it.toString(16)}`;
-      });
-
-    if (onlyPhrase) {
-      return plainPhrase.join(" ");
-    }
-
-    return [
-      ...plainPhrase,
-      `+${input.join("+")}`,
-      ...tags,
-      ...extraActions,
-      ...extraCodes,
-    ].join(" ");
-  }
-
-  async function buildIndex(
-    chords: ChordInfo[],
-    osLayout: Map<string, string>,
-    codes: Map<number, KeyInfo>,
-  ): Promise<Index> {
-    if (chords.length === 0 || !browser) return index;
-
-    index = new FlexSearch.Index({
-      tokenize: "full",
-      encode(phrase: string) {
-        return phrase.split(/\s+/).flatMap((it) => {
-          if (/^[A-Z_]+$/.test(it)) {
-            return it;
-          }
-          if (it.startsWith("+")) {
-            return it
-              .slice(1)
-              .split("+")
-              .map((it) => `+${it}`);
-          }
-          return it.toLowerCase();
-        });
       },
-    });
+    }).then(
-
+      (state) =>
-    let abort = false;
+        new EditorView({
-    abortIndexing = () => {
+          parent: editor,
-      abort = true;
+          state,
-    };
+        }),
-
-    const batchSize = 200;
-    const batches = Math.ceil(chords.length / batchSize);
-
-    for (let b = 0; b < batches; b++) {
-      if (abort) return index;
-
-      const start = b * batchSize;
-      const end = Math.min((b + 1) * batchSize, chords.length);
-      const batch = chords.slice(start, end);
-
-      const promises = batch.map((chord, i) => {
-        const chordIndex = start + i;
-        progress = chordIndex + 1;
-
-        if ("phrase" in chord) {
-          const encodedChord = encodeChord(chord, osLayout, codes);
-          return index.addAsync(chordIndex, encodedChord);
-        }
-        return Promise.resolve();
-      });
-
-      await Promise.all(promises);
-    }
-
-    return index;
-  }
-
-  const searchFilter = writable<number[] | undefined>(undefined);
-  let currentSearchQuery = $state("");
-
-  async function search(index: Index, event: Event) {
-    const query = (event.target as HTMLInputElement).value;
-    currentSearchQuery = query;
-    searchFilter.set(
-      query && searchIndex
-        ? ((await index.searchAsync(query)) as number[])
-        : undefined,
     );
-    page = 0;
+    viewPromise.then((it) => (view = it));
-  }
+    return () => viewPromise.then((it) => it.destroy());
+  });
 
-  // Re-run search when chords change to fix stale indices
   $effect(() => {
-    if (currentSearchQuery && $searchIndex) {
+    console.log("Syncing chords to editor");
-      search($searchIndex, { target: { value: currentSearchQuery } } as any);
+    if (view) {
+      editorSyncChords(
+        view,
+        $deviceChords.map((chord) => [chord.actions, chord.phrase] as const),
+      );
     }
   });
 
-  function insertChord(actions: number[]) {
+  function regenerate() {
-    const id = JSON.stringify(actions);
+    if (!view) return;
-    if ($chords.some((it) => JSON.stringify(it.actions) === id)) {
+    view.setState(
-      alert($LL.configure.chords.DUPLICATE());
+      EditorState.create(
-      return;
+        createConfig({
-    }
+          rawCode: $rawCode,
-    changes.update((changes) => {
+          storeName: "chord-editor-state-storage",
-      changes.push([
+          autocomplete(query) {
-        {
+            queryFilter = query;
-          type: ChangeType.Chord,
-          id: actions,
-          actions,
-          phrase: [],
           },
-      ]);
+        }),
-      return changes;
-    });
-  }
-
-  function downloadVocabulary() {
-    const vocabulary = new Set(
-      $chords.map((it) =>
-        "phrase" in it
-          ? encodeChord(it, $osLayout, $KEYMAP_CODES, true).trim()
-          : "",
       ),
     );
-    vocabulary.delete("");
+    editorSyncChords(
-    const blob = new Blob([Array.from(vocabulary).join("|")], {
+      view,
-      type: "text/plain",
+      $deviceChords.map((chord) => [chord.actions, chord.phrase] as const),
+    );
+  }
+
+  function downloadBackup() {
+    if (!view) return;
+    const backup: CharaChordFile = {
+      charaVersion: 1,
+      type: "chords",
+      chords: view.state
+        .field(parsedChordsField)
+        .chords.map((chord) => [
+          chord.input?.value ?? [],
+          chord.phrase?.value ?? [],
+        ]),
+    };
+    const blob = new Blob([JSON.stringify(backup)], {
+      type: "application/json",
     });
     const url = URL.createObjectURL(blob);
     const a = document.createElement("a");
     a.href = url;
-    a.download = "vocabulary.txt";
+    a.download = "chord-backup.json";
     a.click();
     URL.revokeObjectURL(url);
   }
-
-  function clearChords() {
-    changes.update((changes) => {
-      changes.push(
-        $chords.map<ChordChange>((it) => ({
-          type: ChangeType.Chord,
-          id: it.id,
-          actions: it.actions,
-          phrase: it.phrase,
-          deleted: true,
-        })),
-      );
-      return changes;
-    });
-  }
-
-  const items = derived(
-    [searchFilter, chords],
-    ([filter, chords]) =>
-      filter?.map((it) => [chords[it], it] as const) ??
-      chords.map((it, i) => [it, i] as const),
-  );
-  const lastPage = derived(
-    [items, pageSize],
-    ([items, pageSize]) => Math.ceil((items.length + 1) / pageSize) - 1,
-  );
-
-  setContext("cursor-crossfade", crossfade({}));
-
-  let page = $state(0);
 </script>
 
-<svelte:head>
+<div class="vertical">
-  <title>Chord Manager - CharaChorder Device Manager</title>
+  <div style:display="flex">
-  <meta name="description" content="Manage your chords" />
+    <label><input type="checkbox" bind:checked={$rawCode} />Edit as code</label>
-</svelte:head>
+    <!--<label><input type="checkbox" bind:checked={$showEdits} />Show edits</label>-->
-
+    <label
-<div class="search-container">
+      ><input type="checkbox" bind:checked={$denseSpacing} />Dense Spacing</label
-  <input
+    >
-    type="search"
+    <button onclick={regenerate}>Reset</button>
-    placeholder={$LL.configure.chords.search.PLACEHOLDER(progress)}
+    <!--<button onclick={largeFile}>Create Huge File</button>-->
-    value={currentSearchQuery}
+    <button onclick={downloadBackup}>Download Backup</button>
-    oninput={(event) => $searchIndex && search($searchIndex, event)}
+  </div>
-    class:loading={progress !== $chords.length}
+
-  />
+  <div class="split">
-  <div class="paginator">
+    <div
-    {#if $lastPage !== -1}
+      class="editor"
-      {page + 1} / {$lastPage + 1}
+      class:hide-edits={!$showEdits}
-    {:else}
+      class:raw={$rawCode}
-      - / -
+      class:dense-spacing={$denseSpacing}
-    {/if}
+      bind:this={editor}
+    ></div>
+    <ActionList {queryFilter} ignoreIcon={$rawCode} />
   </div>
-  <button
-    class="icon"
-    onclick={() => (page = Math.max(page - 1, 0))}
-    {@attach actionTooltip("", "ctrl+left")}>navigate_before</button
-  >
-  <button
-    class="icon"
-    onclick={() => (page = Math.min(page + 1, $lastPage))}
-    {@attach actionTooltip("", "ctrl+right")}>navigate_next</button
-  >
 </div>
 
-<section bind:this={results}>
-  <!-- fixes some unresponsiveness -->
-  {#await tick() then}
-    <div class="results">
-      <table transition:fly={{ y: 48, easing: expoOut }}>
-        {#if $lastPage !== -1}
-          <tbody>
-            {#if page === 0}
-              <tr
-                ><th class="new-chord"
-                  ><ChordActionEdit
-                    onsubmit={(action) => insertChord(action)}
-                  /></th
-                ><td></td><td></td></tr
-              >
-            {/if}
-            {#each $items.slice(page * $pageSize - (page === 0 ? 0 : 1), (page + 1) * $pageSize - 1) as [chord]}
-              {#if chord}
-                <ChordEdit {chord} onduplicate={() => (page = 0)} />
-              {/if}
-            {/each}</tbody
-          >
-        {:else}
-          <caption>{$LL.configure.chords.search.NO_RESULTS()}</caption>
-        {/if}
-      </table>
-    </div>
-    <div class="sidebar">
-      <textarea
-        placeholder={$LL.configure.chords.TRY_TYPING() +
-          "\n\nDid you know? " +
-          randomTips[Math.floor(randomTips.length * Math.random())]}
-      ></textarea>
-      <button onclick={clearChords}
-        ><span class="icon">delete_sweep</span>
-        Clear Chords</button
-      >
-      <div>
-        {#each Object.entries($deviceMeta?.factoryDefaults?.chords ?? {}) as [title, library]}
-          <button onclick={() => restoreFromFile(library)}
-            ><span class="icon">library_add</span>{title}</button
-          >
-        {/each}
-      </div>
-      <button onclick={downloadVocabulary}
-        ><span class="icon">download</span>
-        {$LL.configure.chords.VOCABULARY()}</button
-      >
-    </div>
-  {/await}
-</section>
-
 <style lang="scss">
-  .search-container {
+  .vertical {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .paginator {
-    display: flex;
-    justify-content: flex-end;
-    min-width: 8ch;
-  }
-
-  .sidebar {
     display: flex;
     flex-direction: column;
-
+    align-items: center;
-    > button {
+    height: 100%;
-      padding-inline-start: 0;
-    }
   }
 
-  textarea {
+  .split {
+    display: flex;
+    flex-grow: 1;
+    flex-shrink: 1;
+    width: calc(min(100%, 1400px));
+    min-height: 0;
+
+    > :global(*) {
       flex: 1;
-    transition: outline-color 250ms ease;
-    margin: 2px;
-    outline: 2px solid transparent;
-    outline-offset: -1px;
-    border: 1px dashed var(--md-sys-color-outline);
-    border-radius: 4px;
-    background: none;
-    padding: 8px;
-    color: inherit;
-
-    &:focus {
-      outline-color: var(--md-sys-color-primary);
     }
   }
 
-  @keyframes pulse {
+  .editor :global(.cm-deletedChunk) {
-    0% {
+    opacity: 0.2;
-      opacity: 0.4;
-    }
-    50% {
-      opacity: 1;
-    }
-    100% {
-      opacity: 0.4;
-    }
   }
 
-  input[type="search"] {
+  .editor {
-    transition: all 250ms ease;
+    height: 100%;
-    margin-block-start: 16px;
-    border: 0 solid var(--md-sys-color-surface-variant);
-    border-bottom-width: 1px;
-
-    background: none;
-    padding-inline: 16px;
-    padding-block: 8px;
-    width: 512px;
-    color: inherit;
-
     font-size: 16px;
 
-    @media (prefers-contrast: more) {
+    :global(.cm-tooltip) {
-      border-style: dashed;
+      border: none;
-      border-color: var(--md-sys-color-outline);
+      border-radius: 4px;
-    }
+      background-color: var(--md-sys-color-surface-variant);
-
-    &::placeholder {
-      opacity: 0.8;
       color: var(--md-sys-color-on-surface-variant);
+
+      :global(ul) {
+        font-family: inherit !important;
       }
 
-    &:focus {
+      :global(li[role="option"][aria-selected="true"]) {
+        border-radius: 4px;
+        background-color: var(--md-sys-color-primary);
+        color: var(--md-sys-color-on-primary);
+      }
+
+      :global(completion-section) {
+        margin-block: 8px;
+        border-bottom: none !important;
+      }
+    }
+
+    &:not(.raw) :global(.cm-line) {
+      columns: 2;
+      text-align: center;
+    }
+
+    &.dense-spacing :global(.cm-line) {
+      padding-block: 0;
+    }
+
+    :global(.cm-line) {
+      padding-block: 8px;
+      width: 100%;
+      text-wrap: wrap;
+      white-space: pre-wrap;
+      word-break: break-word;
+
+      > :global(*) {
+        break-before: avoid;
+        break-after: avoid;
+        break-inside: avoid;
+      }
+    }
+
+    :global(.cm-panels) {
+      border-top: none;
+      background-color: var(--md-sys-color-surface);
+      color: var(--md-sys-color-on-surface);
+    }
+
+    :global(.chord-ignored) {
+      opacity: 0.5;
+      background-image: none;
+      text-decoration: line-through;
+    }
+
+    :global(.chord-child) {
+      background-image: none;
+      text-decoration: underline;
+    }
+
+    :global(.chord-invalid) {
+      color: var(--md-sys-color-error);
+      text-decoration-color: var(--md-sys-color-error);
+    }
+
+    :global(.change-button) {
+      height: 24px;
+      font-size: 16px;
+    }
+
+    :global(.cm-deletedLineGutter) {
+      background-color: var(--md-sys-color-error);
+    }
+
+    :global(.cm-changedLineGutter) {
+      background-color: var(--md-sys-color-success);
+    }
+
+    :global(.cm-changedText) {
+      background: linear-gradient(
+          var(--md-sys-color-primary),
+          var(--md-sys-color-primary)
+        )
+        bottom / 100% 1px no-repeat;
+    }
+
+    :global(.cm-gutters) {
+      border-color: transparent;
+      background-color: transparent;
+    }
+
+    &.raw :global(.cm-gutters) {
+      border-color: var(--md-sys-color-surface-variant);
+      background-color: var(--md-sys-color-surface);
+    }
+
+    :global(.cm-editor) {
       outline: none;
-      border-style: solid;
-      border-color: var(--md-sys-color-primary);
-    }
-
-    &.loading {
-      opacity: 0.4;
-    }
-  }
-
-  section {
-    display: flex;
-    position: relative;
-
-    border-radius: 16px;
-    padding-inline: 8px;
-
-    height: 100%;
-
-    overflow: hidden;
-  }
-
-  .results {
-    min-width: min(90vw, 20cm);
       height: 100%;
     }
 
-  table {
+    :global(.cm-changedLine) {
-    transition: all 1s ease;
+      background-color: color-mix(
-    height: fit-content;
+        in srgb,
-    overflow-y: hidden;
+        var(--md-sys-color-primary) 5%,
+        transparent
+      ) !important;
+    }
+
+    :global(.cm-activeLine),
+    :global(.cm-line:hover) {
+      --auto-space-show: 1;
+    }
+
+    :global(.cm-activeLine) {
+      border-bottom: 1px solid var(--md-sys-color-surface-variant);
+
+      &:not(.cm-changedLine) {
+        background-color: transparent !important;
+      }
+    }
+
+    :global(::selection),
+    :global(.cm-selectionBackground) {
+      background-color: var(--md-sys-color-surface-variant) !important;
+    }
   }
 </style>

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

@@ -1,240 +0,0 @@
-<script lang="ts">
-  import type { ChordInfo } from "$lib/undo-redo";
-  import { SvelteSet } from "svelte/reactivity";
-  import { changes, chordHashes, ChangeType } from "$lib/undo-redo";
-  import LL from "$i18n/i18n-svelte";
-  import ActionString from "$lib/components/ActionString.svelte";
-  import { selectAction } from "./action-selector";
-  import { serialPort } from "$lib/serial/connection";
-  import { get } from "svelte/store";
-  import { inputToAction } from "./input-converter";
-  import { hashChord, type Chord } from "$lib/serial/chord";
-
-  let {
-    chord = undefined,
-    onsubmit,
-    interactive = true,
-  }: {
-    chord?: ChordInfo;
-    interactive?: boolean;
-    onsubmit: (actions: number[]) => void;
-  } = $props();
-
-  let pressedKeys = new SvelteSet<number>();
-  let editing = $state(false);
-
-  function compare(a: number, b: number) {
-    return a - b;
-  }
-
-  function makeChordInput(...actions: number[]) {
-    const compound = compoundInputs[0]
-      ? hashChord(compoundInputs[0].actions)
-      : 0;
-    return [
-      ...Array.from(
-        {
-          length: 12 - actions.length,
-        },
-        (_, i) => (compound >> (i * 10)) & 0x3ff,
-      ),
-      ...actions.toSorted(compare),
-    ];
-  }
-
-  function edit() {
-    pressedKeys.clear();
-    editing = true;
-  }
-
-  function keydown(event: KeyboardEvent) {
-    // This is obviously a tradeoff
-    if (event.key === "Tab" || event.key === "Escape") return;
-    if (!editing) return;
-    event.preventDefault();
-    const input = inputToAction(event, get(serialPort)?.device === "X");
-    if (input == undefined) {
-      alert("Invalid key");
-      return;
-    }
-    pressedKeys.add(input);
-  }
-
-  function keyup() {
-    if (!editing) return;
-    editing = false;
-    if (pressedKeys.size < 1) return;
-    if (!chord) return onsubmit(makeChordInput(...pressedKeys));
-    changes.update((changes) => {
-      changes.push([
-        {
-          type: ChangeType.Chord,
-          id: chord!.id,
-          actions: makeChordInput(...pressedKeys),
-          phrase: chord!.phrase,
-        },
-      ]);
-      return changes;
-    });
-    return undefined;
-  }
-
-  function addSpecial(event: MouseEvent) {
-    event.stopPropagation();
-    selectAction(event, (action) => {
-      if (!chord) return onsubmit([action]);
-      changes.update((changes) => {
-        changes.push([
-          {
-            type: ChangeType.Chord,
-            id: chord!.id,
-            actions: makeChordInput(...chordActions!, action),
-            phrase: chord!.phrase,
-          },
-        ]);
-        return changes;
-      });
-    });
-  }
-
-  function* resolveCompound(chord?: ChordInfo) {
-    if (!chord) return;
-    let current: Chord = chord;
-    for (let i = 0; i < 10; i++) {
-      if (current.actions[3] !== 0) return;
-      const compound = current.actions
-        .slice(0, 3)
-        .reduce((a, b, i) => a | (b << (i * 10)));
-      if (compound === 0) return;
-      const next = $chordHashes.get(compound);
-      if (!next) {
-        return null;
-      }
-
-      current = next;
-      yield next;
-    }
-    return;
-  }
-
-  let chordActions = $derived(
-    chord?.actions.slice(chord.actions.lastIndexOf(0) + 1).toSorted(compare),
-  );
-  let compoundInputs = $derived([...resolveCompound(chord)].reverse());
-</script>
-
-<button
-  class:deleted={chord && chord.deleted}
-  class:edited={chord && chord.actionsChanged}
-  class:invalid={chord &&
-    chordActions &&
-    (chordActions.length < 2 ||
-      chordActions.some((it, i) => chordActions[i] !== it))}
-  class="chord"
-  onclick={edit}
-  onkeydown={keydown}
-  onkeyup={keyup}
-  onblur={keyup}
-  disabled={!interactive}
->
-  {#if editing && pressedKeys.size === 0}
-    <span>{$LL.configure.chords.HOLD_KEYS()}</span>
-  {:else if !editing && !chord}
-    <span>{$LL.configure.chords.NEW_CHORD()}</span>
-  {/if}
-  {#if !editing}
-    {#each compoundInputs as compound}
-      <sub
-        ><ActionString
-          display="keys"
-          actions={compound.actions.slice(compound.actions.lastIndexOf(0) + 1)}
-        ></ActionString>
-      </sub>
-      <span>&rarr;</span>
-    {/each}
-  {/if}
-  <ActionString
-    display="keys"
-    actions={editing ? [...pressedKeys].sort(compare) : (chordActions ?? [])}
-  />
-  <sup>•</sup>
-  <div role="button" class="icon add" onclick={addSpecial}>add_circle</div>
-</button>
-
-<style lang="scss">
-  span {
-    opacity: 0.5;
-
-    @media (prefers-contrast: more) {
-      opacity: 0.8;
-    }
-  }
-
-  sup {
-    translate: 0 -60%;
-    opacity: 0;
-    transition: opacity 250ms ease;
-  }
-
-  .add {
-    opacity: 0;
-    height: 20px;
-    font-size: 18px;
-    --icon-fill: 1;
-  }
-
-  .chord:hover .add {
-    opacity: 1;
-  }
-
-  .chord {
-    display: inline-flex;
-    position: relative;
-    gap: 4px;
-    margin-inline: 4px;
-
-    height: 32px;
-
-    &:focus-within {
-      outline: none;
-    }
-  }
-
-  .chord::after {
-    position: absolute;
-    top: 50%;
-    transform-origin: center left;
-    translate: -20px 0;
-    scale: 0 1;
-
-    transition:
-      scale 250ms ease,
-      color 250ms ease;
-
-    background: currentcolor;
-
-    width: calc(100% - 60px);
-    height: 1px;
-    content: "";
-  }
-
-  .edited {
-    color: var(--md-sys-color-primary);
-
-    & > sup {
-      opacity: 1;
-    }
-  }
-
-  .invalid {
-    color: var(--md-sys-color-error);
-  }
-
-  .deleted {
-    color: var(--md-sys-color-error);
-
-    &::after {
-      scale: 1;
-    }
-  }
-</style>

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

@@ -1,172 +0,0 @@
-<script lang="ts">
-  import { changes, ChangeType, chords } from "$lib/undo-redo.js";
-  import type { ChordInfo } from "$lib/undo-redo.js";
-  import ChordPhraseEdit from "./ChordPhraseEdit.svelte";
-  import ChordActionEdit from "./ChordActionEdit.svelte";
-  import type { Chord } from "$lib/serial/chord";
-  import { slide } from "svelte/transition";
-  import { charaFileToUriComponent } from "$lib/share/share-url";
-  import SharePopup from "../SharePopup.svelte";
-  import tippy from "tippy.js";
-  import { mount, unmount } from "svelte";
-
-  let { chord, onduplicate }: { chord: ChordInfo; onduplicate: () => void } =
-    $props();
-
-  function remove() {
-    changes.update((changes) => {
-      changes.push([
-        {
-          type: ChangeType.Chord,
-          id: chord.id,
-          actions: chord.actions,
-          phrase: chord.phrase,
-          deleted: true,
-        },
-      ]);
-      return changes;
-    });
-  }
-
-  function isSameChord(a: Chord, b: Chord) {
-    return (
-      a.actions.length === b.actions.length &&
-      a.actions.every((it, i) => it === b.actions[i])
-    );
-  }
-
-  function restore() {
-    changes.update((changes) =>
-      changes
-        .map((it) =>
-          it.filter(
-            (it) => !(it.type === ChangeType.Chord && isSameChord(it, chord)),
-          ),
-        )
-        .filter((it) => it.length > 0),
-    );
-  }
-
-  function duplicate() {
-    const id = [...chord.id];
-    id.splice(id.indexOf(0), 1);
-    id.push(0);
-    while ($chords.some((it) => JSON.stringify(it.id) === JSON.stringify(id))) {
-      id[id.length - 1] = id[id.length - 1]! + 1;
-    }
-
-    changes.update((changes) => {
-      changes.push([
-        {
-          type: ChangeType.Chord,
-          id,
-          actions: [...chord.actions],
-          phrase: [...chord.phrase],
-        },
-      ]);
-      return changes;
-    });
-
-    onduplicate();
-  }
-
-  async function share(event: Event) {
-    const url = new URL(window.location.href);
-    url.searchParams.set(
-      "import",
-      await charaFileToUriComponent({
-        charaVersion: 1,
-        type: "chords",
-        chords: [[chord.actions, chord.phrase]],
-      }),
-    );
-    await navigator.clipboard.writeText(url.toString());
-    let shareComponent = {};
-    tippy(event.target as HTMLElement, {
-      onCreate(instance) {
-        const target = instance.popper.querySelector(".tippy-content")!;
-        shareComponent = mount(SharePopup, { target });
-      },
-      onHidden(instance) {
-        instance.destroy();
-      },
-      onDestroy(_instance) {
-        unmount(shareComponent);
-      },
-    }).show();
-  }
-</script>
-
-<tr>
-  <th>
-    <ChordActionEdit {chord} onsubmit={() => {}} />
-  </th>
-  <td class="phrase-edit">
-    <ChordPhraseEdit {chord} />
-  </td>
-  <td>
-    <div class="table-buttons">
-      {#if !chord.deleted}
-        <button transition:slide class="icon compact" onclick={remove}
-          >delete</button
-        >
-      {:else}
-        <button transition:slide class="icon compact" onclick={restore}
-          >restore_from_trash</button
-        >
-      {/if}
-      <button disabled={chord.deleted} class="icon compact" onclick={duplicate}
-        >content_copy</button
-      >
-      <button
-        class="icon compact"
-        class:disabled={chord.isApplied}
-        onclick={restore}>undo</button
-      >
-      <div class="separator"></div>
-      <button class="icon compact" onclick={share}>share</button>
-    </div>
-  </td>
-</tr>
-
-<style lang="scss">
-  .separator {
-    display: inline-flex;
-
-    opacity: 0.2;
-    background: currentcolor;
-
-    width: 1px;
-    height: 24px;
-  }
-
-  button {
-    transition: opacity 75ms ease;
-  }
-
-  .phrase-edit {
-    position: relative;
-  }
-
-  tr {
-    position: relative;
-  }
-
-  .table-buttons {
-    position: absolute;
-    top: 0;
-    right: 0;
-    transform: translate(100%, -50%);
-    opacity: 0;
-    transition: opacity 75ms ease;
-    background: var(--md-sys-color-surface-variant);
-  }
-
-  .icon {
-    font-size: 18px;
-  }
-
-  tr:hover .table-buttons {
-    opacity: 1;
-  }
-</style>

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

@@ -1,376 +0,0 @@
-<script lang="ts">
-  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 { selectAction } from "./action-selector";
-  import { inputToAction } from "./input-converter";
-  import { deviceMeta, serialPort } from "$lib/serial/connection";
-  import { get } from "svelte/store";
-  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();
-
-  const JOIN_ACTION = 574;
-  const NO_CONCATENATOR_ACTION = 256;
-
-  onMount(() => {
-    if (chord.phrase.length === 0) {
-      box?.focus();
-    }
-  });
-
-  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, true);
-    } else if (!event.shiftKey && event.key === "ArrowRight") {
-      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, 1, true);
-      moveCursor(cursorPosition - 1, true);
-    } else if (event.key === "Delete") {
-      deleteAction(cursorPosition, 1, true);
-    } else {
-      if (event.key === "Shift" || event.key === "Meta") return;
-      const action = inputToAction(event, get(serialPort)?.device === "X");
-      if (action !== undefined) {
-        insertAction(cursorPosition, action);
-        tick().then(() => moveCursor(cursorPosition + 1));
-      }
-    }
-  }
-
-  function moveCursor(to: number, user = false) {
-    if (!box) return;
-    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, user = false) {
-    if (user && isHidden(chord.phrase[at]!, at, chord.phrase)) return;
-    if (!(at in chord.phrase)) return;
-    changes.update((changes) => {
-      changes.push([
-        {
-          type: ChangeType.Chord,
-          id: chord.id,
-          actions: chord.actions,
-          phrase: chord.phrase.toSpliced(at, count),
-        },
-      ]);
-      return changes;
-    });
-  }
-
-  function insertAction(at: number, action: number) {
-    changes.update((changes) => {
-      changes.push([
-        {
-          type: ChangeType.Chord,
-          id: chord.id,
-          actions: chord.actions,
-          phrase: chord.phrase.toSpliced(at, 0, action),
-        },
-      ]);
-      return changes;
-    });
-  }
-
-  function clickCursor(event: MouseEvent) {
-    if (box === undefined || event.target === button) return;
-    const distance = (event as unknown as { layerX: number }).layerX;
-
-    let i = 0;
-    for (const child of box.children) {
-      const { offsetLeft, offsetWidth } = child as HTMLElement;
-      if (distance < offsetLeft + offsetWidth / 2) {
-        moveCursor(i - 1, true);
-        return;
-      }
-      i++;
-    }
-    moveCursor(i - 1, true);
-  }
-
-  function addSpecial(event: MouseEvent | KeyboardEvent) {
-    selectAction(
-      event,
-      (action) => {
-        insertAction(cursorPosition, action);
-        tick().then(() => moveCursor(cursorPosition + 1));
-      },
-      () => box?.focus(),
-    );
-  }
-
-  function resolveAutospace(autospace: boolean) {
-    if (autospace) {
-      if (chord.phrase.at(-1) === JOIN_ACTION) {
-        if (
-          chord.phrase.every(
-            (action, i, arr) =>
-              $KEYMAP_CODES.get(action)?.printable || i === arr.length - 1,
-          )
-        ) {
-          deleteAction(chord.phrase.length - 1);
-          moveCursor(cursorPosition, true);
-        } else {
-          return;
-        }
-      } else {
-        if (isPrintable) {
-          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 (
-            chord.phrase.every(
-              (action, i, arr) =>
-                $KEYMAP_CODES.get(action)?.printable || i === arr.length - 1,
-            )
-          ) {
-            return;
-          } else {
-            deleteAction(chord.phrase.length - 1);
-            moveCursor(cursorPosition, true);
-          }
-        } else {
-          insertAction(chord.phrase.length, NO_CONCATENATOR_ACTION);
-          moveCursor(cursorPosition, true);
-        }
-      }
-    }
-  }
-
-  let button: HTMLButtonElement | undefined = $state();
-  let box: HTMLDivElement | undefined = $state();
-  let cursorPosition = 0;
-  let cursorOffset = $state(0);
-
-  let hasFocus = $state(false);
-
-  let isPrintable = $derived(
-    chord.phrase.every(
-      (action) => $KEYMAP_CODES.get(action)?.printable === true,
-    ),
-  );
-  let supportsAutospace = $derived(
-    semverGte($deviceMeta?.version ?? "0.0.0", "2.1.0"),
-  );
-  let hasAutospace = $derived(
-    isPrintable || chord.phrase.at(-1) === JOIN_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();
-  }}
->
-  {#if supportsAutospace}
-    <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);
-          }
-        } else {
-          if (chord.phrase[0] !== JOIN_ACTION) {
-            insertAction(0, JOIN_ACTION);
-            moveCursor(cursorPosition + 1, true);
-          }
-        }
-        await tick();
-        resolveAutospace(autospace);
-      }}
-    />
-  {/if}
-  <div
-    onkeydown={keypress}
-    onmousedown={clickCursor}
-    role="textbox"
-    tabindex="0"
-    bind:this={box}
-    onfocusin={() => (hasFocus = true)}
-    onfocusout={(event) => {
-      if (event.relatedTarget !== button) hasFocus = false;
-    }}
-  >
-    {#if hasFocus}
-      <div transition:scale class="cursor" style:translate="{cursorOffset}px 0">
-        <button class="icon" bind:this={button} onclick={addSpecial}>add</button
-        >
-      </div>
-    {:else}
-      <div></div>
-      <!-- placeholder for cursor placement -->
-    {/if}
-    {#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}
-    <AutospaceSelector
-      variant="end"
-      value={!hasAutospace}
-      onchange={(event) =>
-        resolveAutospace((event.target as HTMLInputElement).checked)}
-    />
-  {/if}
-  <sup>•</sup>
-</div>
-
-<style lang="scss">
-  sup {
-    translate: 0 -40%;
-    opacity: 0;
-    transition: opacity 250ms ease;
-  }
-
-  .cursor {
-    position: absolute;
-    transform: translateX(-50%);
-    translate: 0 0;
-
-    transition: translate 50ms ease;
-
-    background: var(--md-sys-color-on-secondary-container);
-
-    width: 2px;
-    height: 100%;
-
-    button {
-      position: absolute;
-      top: -24px;
-      left: 0;
-      border: 2px solid currentcolor;
-      border-radius: 12px 12px 12px 0;
-
-      background: var(--md-sys-color-secondary-container);
-      padding: 0;
-
-      height: 24px;
-
-      color: var(--md-sys-color-on-secondary-container);
-    }
-  }
-
-  .edited {
-    color: var(--md-sys-color-primary);
-
-    sup {
-      opacity: 1;
-    }
-  }
-
-  .wrapper {
-    display: flex;
-
-    position: relative;
-    align-items: center;
-
-    padding-block: 4px;
-
-    height: 1em;
-
-    &::after,
-    &::before {
-      position: absolute;
-      bottom: -4px;
-
-      opacity: 0;
-
-      transition:
-        opacity 150ms ease,
-        scale 250ms ease;
-      background: currentcolor;
-
-      width: calc(100% - 8px);
-      height: 1px;
-      content: "";
-    }
-
-    &::after {
-      scale: 0 1;
-      transition-duration: 250ms;
-    }
-
-    &:hover {
-      --auto-space-show: 1;
-
-      &::before {
-        opacity: 0.3;
-      }
-    }
-
-    &:has(> :focus-within)::after {
-      scale: 1;
-      opacity: 1;
-    }
-  }
-
-  [role="textbox"] {
-    display: flex;
-
-    position: relative;
-    align-items: center;
-    cursor: text;
-    white-space: pre;
-
-    &:focus-within {
-      outline: none;
-    }
-  }
-</style>

src/routes/(app)/config/chords/action-selector.ts

@@ -1,56 +0,0 @@
-import ActionSelector from "$lib/components/layout/ActionSelector.svelte";
-import { mount, unmount, tick } from "svelte";
-
-export function selectAction(
-  event: MouseEvent | KeyboardEvent,
-  select: (action: number) => void,
-  dismissed?: () => void,
-) {
-  const component = mount(ActionSelector, {
-    target: document.body,
-    props: {
-      onclose: () => closed(),
-      onselect: (action: number) => {
-        select(action);
-        closed();
-      },
-    },
-  });
-  const dialog = document.querySelector("dialog > div") as HTMLDivElement;
-  const backdrop = document.querySelector("dialog") as HTMLDialogElement;
-  const dialogRect = dialog.getBoundingClientRect();
-  const groupRect = (event.target as HTMLElement).getBoundingClientRect();
-
-  const scale = 0.5;
-  const dialogScale = `${
-    1 - scale * (1 - groupRect.width / dialogRect.width)
-  } ${1 - scale * (1 - groupRect.height / dialogRect.height)}`;
-  const dialogTranslate = `${scale * (groupRect.x - dialogRect.x)}px ${
-    scale * (groupRect.y - dialogRect.y)
-  }px`;
-
-  const duration = 150;
-  const options = { duration, easing: "ease" };
-  const dialogAnimation = dialog.animate(
-    [
-      { scale: dialogScale, translate: dialogTranslate },
-      { translate: "0 0", scale: "1" },
-    ],
-    options,
-  );
-  const backdropAnimation = backdrop.animate(
-    [{ opacity: 0 }, { opacity: 1 }],
-    options,
-  );
-
-  async function closed() {
-    dialogAnimation.reverse();
-    backdropAnimation.reverse();
-
-    await dialogAnimation.finished;
-
-    unmount(component);
-    await tick();
-    dismissed?.();
-  }
-}

src/routes/(app)/config/chords/input-converter.ts

@@ -1,16 +0,0 @@
-import { KEYMAP_IDS, KEYMAP_KEYCODES } from "$lib/serial/keymap-codes";
-import { get } from "svelte/store";
-
-export function inputToAction(
-  event: KeyboardEvent,
-  useKeycodes?: boolean,
-): number | undefined {
-  if (useKeycodes) {
-    return get(KEYMAP_KEYCODES).get(event.code);
-  } else {
-    return (
-      get(KEYMAP_IDS).get(event.key)?.code ??
-      get(KEYMAP_KEYCODES).get(event.code)
-    );
-  }
-}

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

@@ -1,7 +1,5 @@
 <script lang="ts">
   import { serializeActions } from "$lib/serial/chord";
-  import { chords } from "$lib/undo-redo";
-  import ChordEdit from "../ChordEdit.svelte";
 
   export function hashChord(actions: number[]) {
     const chord = new Uint8Array(16);
@@ -17,7 +15,8 @@
   }
 
   const broken = $derived(
-    $chords.filter((it) => (hashChord(it.actions) & 0xff) === 0xff),
+    [],
+    // $chords.filter((it) => (hashChord(it.actions) & 0xff) === 0xff),
   );
 </script>
 
@@ -35,7 +34,7 @@
     >, your library might have been corrupted.
   </p>
   {#each broken as chord}
-    <ChordEdit {chord} onduplicate={() => {}} />
+    <!--<ChordEdit {chord} onduplicate={() => {}} />-->
   {/each}
 {:else}
   <p>No problematic chords found</p>

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

@@ -1,356 +0,0 @@
-<script lang="ts">
-  import { chords } from "$lib/undo-redo";
-  import { EditorView } from "codemirror";
-  import { actionToValue } from "$lib/chord-editor/action-serializer";
-  import "$lib/chord-editor/chords.grammar";
-  import { persistentWritable } from "$lib/storage";
-  import ActionList from "$lib/components/layout/ActionList.svelte";
-  import {
-    composeChordInput,
-    hashChord,
-    splitCompound,
-  } from "$lib/serial/chord";
-  import { loadPersistentState } from "$lib/chord-editor/persistent-state-plugin";
-  import { parsedChordsField } from "$lib/chord-editor/parsed-chords-plugin";
-  import type { CharaChordFile } from "$lib/share/chara-file";
-  import { chordSyncEffect } from "$lib/chord-editor/chord-sync-plugin";
-  import { KEYMAP_IDS, type KeyInfo } from "$lib/serial/keymap-codes";
-
-  let queryFilter: string | undefined = $state(undefined);
-
-  const rawCode = persistentWritable("chord-editor-raw-code", false);
-  const showEdits = persistentWritable("chord-editor-show-edits", true);
-  const denseSpacing = persistentWritable("chord-editor-spacing", false);
-
-  let editor: HTMLDivElement | undefined = $state(undefined);
-  let view: EditorView;
-
-  $effect(() => {
-    if (!editor) return;
-    const viewPromise = loadPersistentState({
-      rawCode: $rawCode,
-      storeName: "chord-editor-state-storage",
-      autocomplete(query) {
-        queryFilter = query;
-      },
-    }).then(
-      (state) =>
-        new EditorView({
-          parent: editor,
-          state,
-        }),
-    );
-    viewPromise.then((it) => (view = it));
-    return () => viewPromise.then((it) => it.destroy());
-  });
-
-  function regenerate() {
-    const doc = $chords
-      .map((chord) => {
-        const [actions, compound] = splitCompound(chord.actions);
-        return (
-          (compound ? "|0x" + compound.toString(16) + "|" : "") +
-          actions.map((it) => actionToValue(it)).join("") +
-          "=>" +
-          chord.phrase.map((it) => actionToValue(it)).join("")
-        );
-      })
-      .join("\n");
-    view.dispatch({
-      changes: { from: 0, to: view.state.doc.length, insert: doc },
-      effects: chordSyncEffect.of(
-        $chords.map((chord) => [chord.actions, chord.phrase] as const),
-      ),
-    });
-  }
-
-  function largeFile() {
-    const chordCount = 100000;
-    const maxPhraseLength = 100;
-    const maxInputLength = 8;
-    const compoundChance = 0.05;
-
-    const actions = [...$KEYMAP_IDS.values()];
-    function randomAction(): KeyInfo {
-      return actions[Math.floor(actions.length * Math.random())]!;
-    }
-
-    const backup: [KeyInfo[][], KeyInfo[]][] = Array.from(
-      { length: chordCount },
-      () =>
-        [
-          [
-            Array.from(
-              { length: Math.floor(Math.random() * maxInputLength) + 1 },
-              randomAction,
-            ),
-          ],
-          Array.from(
-            {
-              length: Math.floor(Math.log(Math.random() * maxPhraseLength)) + 1,
-            },
-            randomAction,
-          ),
-        ] as const,
-    );
-    for (const chord of backup) {
-      if (Math.random() < compoundChance) {
-        chord[0] = [
-          ...backup[Math.floor(backup.length * Math.random())]![0],
-          ...chord[0],
-        ];
-      }
-    }
-
-    const doc = backup
-      .map(([inputs, phrase]) => {
-        return (
-          inputs
-            .map((input) => input.map((it) => actionToValue(it)).join(""))
-            .join("|") +
-          "=>" +
-          phrase.map((it) => actionToValue(it)).join("")
-        );
-      })
-      .join("\n");
-    view.dispatch({
-      changes: { from: 0, to: view.state.doc.length, insert: doc },
-      effects: chordSyncEffect.of(
-        $chords.map((chord) => [chord.actions, chord.phrase] as const),
-      ),
-    });
-  }
-
-  function loadBackup(event: Event) {
-    const input = event.target as HTMLInputElement;
-    if (!input.files || input.files.length === 0) return;
-    const file = input.files[0];
-    const reader = new FileReader();
-    reader.onload = (e) => {
-      try {
-        const content = e.target?.result as string;
-        const backup: CharaChordFile = JSON.parse(content);
-        const doc = backup.chords
-          .map((chord) => {
-            const [actions, compound] = splitCompound(chord[0]);
-            return (
-              (compound
-                ? "<0x" + compound.toString(16).padStart(8, "0") + ">"
-                : "") +
-              actions.map((it) => actionToValue(it)).join("") +
-              "=>" +
-              chord[1].map((it) => actionToValue(it)).join("")
-            );
-          })
-          .join("\n");
-        view.dispatch({
-          changes: { from: 0, to: view.state.doc.length, insert: doc },
-        });
-      } catch (err) {
-        alert("Failed to load backup: " + err);
-      }
-    };
-    reader.readAsText(file);
-  }
-
-  function downloadBackup() {
-    const backup: CharaChordFile = {
-      charaVersion: 1,
-      type: "chords",
-      chords: view.state.field(parsedChordsField).result,
-    };
-    console.log(JSON.stringify(backup));
-    const blob = new Blob([JSON.stringify(backup)], {
-      type: "application/json",
-    });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = "chord-backup.json";
-    a.click();
-    URL.revokeObjectURL(url);
-  }
-</script>
-
-<div class="vertical">
-  <div style:display="flex">
-    <label><input type="checkbox" bind:checked={$rawCode} />Edit as code</label>
-    <!--<label><input type="checkbox" bind:checked={$showEdits} />Show edits</label>-->
-    <label
-      ><input type="checkbox" bind:checked={$denseSpacing} />Dense Spacing</label
-    >
-    <button onclick={regenerate}>Regenerate from current chords</button>
-    <!--<button onclick={largeFile}>Create Huge File</button>-->
-    <button onclick={downloadBackup}>Download Backup</button>
-    <input
-      type="file"
-      accept="application/json"
-      onchange={loadBackup}
-      style="margin-left: 1rem"
-    />
-  </div>
-
-  <div class="split">
-    <div
-      class="editor"
-      class:hide-edits={!$showEdits}
-      class:raw={$rawCode}
-      class:dense-spacing={$denseSpacing}
-      bind:this={editor}
-    ></div>
-    <ActionList {queryFilter} ignoreIcon={$rawCode} />
-  </div>
-</div>
-
-<style lang="scss">
-  .vertical {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    height: 100%;
-  }
-
-  .split {
-    display: flex;
-    flex-grow: 1;
-    flex-shrink: 1;
-    width: calc(min(100%, 1400px));
-    min-height: 0;
-
-    > :global(*) {
-      flex: 1;
-    }
-  }
-
-  .editor :global(.cm-deletedChunk) {
-    opacity: 0.2;
-  }
-
-  .editor {
-    height: 100%;
-    font-size: 16px;
-
-    :global(.cm-tooltip) {
-      border: none;
-      border-radius: 4px;
-      background-color: var(--md-sys-color-surface-variant);
-      color: var(--md-sys-color-on-surface-variant);
-
-      :global(ul) {
-        font-family: inherit !important;
-      }
-
-      :global(li[role="option"][aria-selected="true"]) {
-        border-radius: 4px;
-        background-color: var(--md-sys-color-primary);
-        color: var(--md-sys-color-on-primary);
-      }
-
-      :global(completion-section) {
-        margin-block: 8px;
-        border-bottom: none !important;
-      }
-    }
-
-    &:not(.raw) :global(.cm-line) {
-      columns: 2;
-      text-align: center;
-    }
-
-    &.dense-spacing :global(.cm-line) {
-      padding-block: 0;
-    }
-
-    :global(.cm-line) {
-      padding-block: 8px;
-      width: 100%;
-      text-wrap: wrap;
-      white-space: pre-wrap;
-      word-break: break-word;
-
-      > :global(*) {
-        break-before: avoid;
-        break-after: avoid;
-        break-inside: avoid;
-      }
-    }
-
-    :global(.chord-ignored) {
-      opacity: 0.5;
-      background-image: none;
-      text-decoration: line-through;
-    }
-
-    :global(.chord-child) {
-      background-image: none;
-      text-decoration: underline;
-    }
-
-    :global(.chord-invalid) {
-      color: var(--md-sys-color-error);
-      text-decoration-color: var(--md-sys-color-error);
-    }
-
-    :global(.change-button) {
-      height: 24px;
-      font-size: 16px;
-    }
-
-    :global(.cm-deletedLineGutter) {
-      background-color: var(--md-sys-color-error);
-    }
-
-    :global(.cm-changedLineGutter) {
-      background-color: var(--md-sys-color-success);
-    }
-
-    :global(.cm-changedText) {
-      background: linear-gradient(
-          var(--md-sys-color-primary),
-          var(--md-sys-color-primary)
-        )
-        bottom / 100% 1px no-repeat;
-    }
-
-    :global(.cm-gutters) {
-      border-color: transparent;
-      background-color: transparent;
-    }
-
-    &.raw :global(.cm-gutters) {
-      border-color: var(--md-sys-color-surface-variant);
-      background-color: var(--md-sys-color-surface);
-    }
-
-    :global(.cm-editor) {
-      outline: none;
-      height: 100%;
-    }
-
-    :global(.cm-changedLine) {
-      background-color: color-mix(
-        in srgb,
-        var(--md-sys-color-primary) 5%,
-        transparent
-      ) !important;
-    }
-
-    :global(.cm-activeLine),
-    :global(.cm-line:hover) {
-      --auto-space-show: 1;
-    }
-
-    :global(.cm-activeLine) {
-      border-bottom: 1px solid var(--md-sys-color-surface-variant);
-
-      &:not(.cm-changedLine) {
-        background-color: transparent !important;
-      }
-    }
-
-    :global(::selection),
-    :global(.cm-selectionBackground) {
-      background-color: var(--md-sys-color-surface-variant) !important;
-    }
-  }
-</style>

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,232 +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 { 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 as keyof typeof $learnConfig] ?? value}
-              step="0.1"
-              oninput={(event) =>
-                ($learnConfigStored[key as keyof typeof $learnConfig] = (
-                  event.target as HTMLInputElement
-                ).value as any)}
-            />
-          </td>
-          <td>
-            <button
-              disabled={!$learnConfigStored[key as keyof typeof $learnConfig]}
-              onclick={() =>
-                ($learnConfigStored[key as keyof typeof $learnConfigStored] =
-                  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,124 +0,0 @@
-<script lang="ts">
-  import { setContext } from "svelte";
-  import Layout from "$lib/components/layout/Layout.svelte";
-  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[0].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++) {
-        const layerArr = layout[layer];
-        if (layerArr === undefined) {
-          continue;
-        }
-        for (let key = 0; key <= layerArr.length; key++) {
-          if (layerArr[key]?.[0].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";

src/routes/(app)/learn/sentence/word-selector.spec.ts

@@ -1,69 +0,0 @@
-import { describe, it, beforeEach, expect, vi } from "vitest";
-import { pickNextWord } from "./word-selector";
-import { untrack } from "svelte";
-import { SvelteMap } from "svelte/reactivity";
-import { TOO_SHORT_SENTENCE_FOR_NGRAMS_MESSAGE } from "./constants";
-
-// Mock untrack so it simply executes the callback, allowing us to spy on its usage.
-vi.mock("svelte", () => ({
-  untrack: vi.fn((fn: any) => fn()),
-}));
-
-describe("pickNextWord", () => {
-  let words: string[];
-  let wordMastery: SvelteMap<string, number>;
-  let currentWord: string;
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-
-    // Set up sample words and mastery values.
-    words = ["alpha", "beta", "gamma"];
-    wordMastery = new SvelteMap<string, number>();
-    // For this test, assume none of the words are mastered.
-    words.forEach((word) => wordMastery.set(word, 0));
-    currentWord = "alpha";
-  });
-
-  it("should return a word different from current", () => {
-    // Force Math.random() to return a predictable value.
-    vi.spyOn(Math, "random").mockReturnValueOnce(0.3);
-
-    const nextWord = pickNextWord(words, wordMastery, currentWord);
-
-    // Since currentWord ("alpha") should be skipped, we expect next word.
-    expect(nextWord).toBe("beta");
-  });
-
-  it("should randomly skip words", () => {
-    // Force Math.random() to return a predictable value.
-    vi.spyOn(Math, "random").mockReturnValueOnce(0.6).mockReturnValueOnce(0.3);
-
-    const nextWord = pickNextWord(words, wordMastery, currentWord);
-
-    // Since currentWord ("alpha") should be skipped as current
-    // and "beta" should be randomly skipped we expect "gamma".
-    expect(nextWord).toBe("gamma");
-  });
-
-  it("should return current word if all other words were randomly skipped", () => {
-    // Force Math.random() to return a predictable value.
-    vi.spyOn(Math, "random").mockReturnValueOnce(0.6).mockReturnValueOnce(0.6);
-
-    const nextWord = pickNextWord(words, wordMastery, currentWord);
-
-    // Since all other words have been randomly skipped, we expect
-    // current word to be returned.
-    expect(nextWord).toBe("alpha");
-  });
-
-  it("current word should be passed untracked", () => {
-    pickNextWord(words, wordMastery, currentWord);
-    expect(untrack).toHaveBeenCalledTimes(0);
-  });
-
-  it("should return TOO_SHORT_SENTENCE_FOR_NGRAMS_MESSAGE if the words array is empty", () => {
-    const result = pickNextWord([], wordMastery, currentWord);
-    expect(result).toBe(TOO_SHORT_SENTENCE_FOR_NGRAMS_MESSAGE);
-  });
-});

src/routes/(app)/learn/sentence/word-selector.ts

@@ -1,25 +0,0 @@
-import { TOO_SHORT_SENTENCE_FOR_NGRAMS_MESSAGE } from "./constants";
-import { SvelteMap } from "svelte/reactivity";
-
-export function pickNextWord(
-  words: string[],
-  wordMastery: SvelteMap<string, number>,
-  untrackedCurrentWord: string,
-) {
-  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] ??
-    TOO_SHORT_SENTENCE_FOR_NGRAMS_MESSAGE;
-  // This is important to break infinite loop created by
-  // reading and writing `currentWord` inside $effect rune
-  for (const [word] of unmasteredWords) {
-    if (word === untrackedCurrentWord || Math.random() > 0.5) continue;
-    nextWord = word;
-    break;
-  }
-  return nextWord;
-}

vitest.config.ts

@@ -1,8 +1,10 @@
 import { defineConfig } from "vitest/config";
-import { svelte } from "@sveltejs/vite-plugin-svelte";
+import { sveltekit } from "@sveltejs/kit/vite";
+import { lezerGrammarPlugin } from "./vite-plugin-lezer";
+import { layoutPlugin } from "./vite-plugin-layout";
 
 export default defineConfig({
-  plugins: [svelte({ hot: !process.env.VITEST })],
+  plugins: [layoutPlugin(), sveltekit(), lezerGrammarPlugin()],
   test: {
     globals: true,
     environment: "jsdom",