feat: cv2

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 {
-  changes,
-  ChangeType,
-  chords,
-  layout,
-  settings,
-} from "$lib/undo-redo.js";
+import { changes, ChangeType, 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

@@ -0,0 +1,156 @@
+import { linter, type Diagnostic } from "@codemirror/lint";
+import { parsedChordsField } from "./parsed-chords-plugin";
+
+export function actionLinter(config?: Parameters<typeof linter>[1]) {
+  const finalConfig: Parameters<typeof linter>[1] = {
+    ...config,
+    needsRefresh(update) {
+      return (
+        update.startState.field(parsedChordsField) !==
+        update.state.field(parsedChordsField)
+      );
+    },
+  };
+  return linter((view) => {
+    console.log("lint");
+    const diagnostics: Diagnostic[] = [];
+    const parsed = view.state.field(parsedChordsField);
+
+    for (const chord of parsed.chords) {
+      if (chord.disabled) {
+        diagnostics.push({
+          from: chord.range[0],
+          to: chord.range[1],
+          severity: "info",
+          markClass: "chord-ignored",
+          message: `Chord disabled`,
+        });
+      }
+      if (chord.compounds) {
+        for (const compound of chord.compounds) {
+          if (compound.actions.length === 0 && compound.parent) {
+            const replacement = view.state.doc.sliceString(
+              compound.parent.range[0],
+              compound.parent.input!.range[1],
+            );
+            diagnostics.push({
+              from: compound.range[0],
+              to: compound.range[1],
+              severity: "warning",
+              message: `Compound literal can be replaced with "${replacement}"`,
+              actions: [
+                {
+                  name: "Replace",
+                  apply(view, from, to) {
+                    view.dispatch({
+                      changes: {
+                        from,
+                        to,
+                        insert: replacement + "|",
+                      },
+                    });
+                  },
+                },
+              ],
+            });
+          }
+        }
+        const lastCompound = chord.compounds.at(-1);
+        if (lastCompound) {
+          const from = chord.range[0];
+          const to = lastCompound.range[1];
+          if (lastCompound.parent) {
+            diagnostics.push({
+              from,
+              to,
+              severity: "info",
+              markClass: "chord-child",
+              message: `Child of ${view.state.doc.sliceString(lastCompound.parent.range[0], lastCompound.parent.range[1])}`,
+              actions: [
+                {
+                  name: "Select Parent",
+                  apply(view) {
+                    view.dispatch({
+                      selection: {
+                        anchor: lastCompound.parent!.range[0],
+                      },
+                      scrollIntoView: true,
+                    });
+                  },
+                },
+              ],
+            });
+          } else {
+            diagnostics.push({
+              from,
+              to,
+              severity: "warning",
+              message: `Orphan compound`,
+            });
+          }
+        }
+      }
+      if (chord.children) {
+        diagnostics.push({
+          from: chord.range[0],
+          to: chord.range[1],
+          severity: "info",
+          markClass: "chord-parent",
+          message: `Parent of ${chord.children.length} compound(s)`,
+          actions: chord.children.map((child) => ({
+            name: `Go to ${view.state.doc.sliceString(child.range[0], child.range[1])}`,
+            apply(view) {
+              view.dispatch({
+                selection: {
+                  anchor: child.range[0],
+                },
+                scrollIntoView: true,
+              });
+            },
+          })),
+        });
+      }
+      if (chord.phrase) {
+        if (!chord.phrase.originalValue) {
+          diagnostics.push({
+            from: chord.range[0],
+            to: chord.range[1],
+            severity: "info",
+            markClass: "chord-new",
+            message: `New Chord`,
+          });
+        } else if (chord.phrase.originalValue !== chord.phrase.value) {
+          diagnostics.push({
+            from: chord.range[0],
+            to: chord.range[1],
+            severity: "info",
+            markClass: "chord-unchanged",
+            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;
+  }, finalConfig);
+}

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

@@ -0,0 +1,10 @@
+import { KEYMAP_CODES, KEYMAP_IDS } from "$lib/serial/keymap-codes";
+import { derived } from "svelte/store";
+import { reactiveStateField } from "./store-state-field";
+
+const actionMeta = derived([KEYMAP_IDS, KEYMAP_CODES], ([ids, codes]) => ({
+  ids,
+  codes,
+}));
+
+export const actionMetaPlugin = reactiveStateField(actionMeta);

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

@@ -7,33 +7,34 @@ import {
 } from "@codemirror/view";
 import { mount, unmount } from "svelte";
 import Action from "$lib/components/Action.svelte";
-import { syntaxTree } from "@codemirror/language";
 import type { Range } from "@codemirror/state";
+import { parsedChordsField } from "./parsed-chords-plugin";
+import { iterActions } from "./parse-meta";
 
 export class ActionWidget extends WidgetType {
   component?: {};
-  element?: HTMLElement;
 
   constructor(readonly id: string | number) {
     super();
     this.id = id;
   }
 
-  override eq(other: ActionWidget) {
+  /*override eq(other: ActionWidget) {
     return this.id == other.id;
-  }
+  }*/
 
   toDOM() {
-    if (!this.element) {
-      this.element = document.createElement("span");
-      this.element.style.paddingInline = "2px";
-
-      this.component = mount(Action, {
-        target: this.element,
-        props: { action: this.id, display: "keys", inText: true },
-      });
+    if (this.component) {
+      unmount(this.component);
     }
-    return this.element;
+    const element = document.createElement("span");
+    element.style.paddingInline = "2px";
+
+    this.component = mount(Action, {
+      target: element,
+      props: { action: this.id, display: "keys", inText: true },
+    });
+    return element;
   }
 
   override ignoreEvent() {
@@ -50,29 +51,24 @@ export class ActionWidget extends WidgetType {
 function actionWidgets(view: EditorView) {
   const widgets: Range<Decoration>[] = [];
   for (const { from, to } of view.visibleRanges) {
-    syntaxTree(view.state).iterate({
-      from,
-      to,
-      enter: (node) => {
-        if (node.name !== "ExplicitAction") return;
-        const value =
-          node.node.getChild("ActionId") ??
-          node.node.getChild("HexNumber") ??
-          node.node.getChild("DecimalNumber");
-        if (!value) return;
-        if (!node.node.getChild("ExplicitDelimEnd")) {
+    for (const chord of view.state.field(parsedChordsField).chords) {
+      if (chord.range[1] < from || chord.range[0] > to) continue;
+      iterActions(chord, (action) => {
+        if (
+          view.state.selection.ranges.some(
+            (r) => r.from <= action.range[1] && r.to > action.range[0],
+          )
+        ) {
           return;
         }
-
-        const id = view.state.doc.sliceString(value.from, value.to);
-        let deco = Decoration.replace({
-          widget: new ActionWidget(
-            value.name === "ActionId" ? id : parseInt(id),
-          ),
-        });
-        widgets.push(deco.range(node.from, node.to));
-      },
-    });
+        if (action.info && action.explicit) {
+          const deco = Decoration.replace({
+            widget: new ActionWidget(action.code),
+          });
+          widgets.push(deco.range(action.range[0], action.range[1]));
+        }
+      });
+    }
   }
   return Decoration.set(widgets);
 }
@@ -89,7 +85,9 @@ export const actionPlugin = ViewPlugin.fromClass(
       if (
         update.docChanged ||
         update.viewportChanged ||
-        syntaxTree(update.startState) != syntaxTree(update.state)
+        update.selectionSet ||
+        update.startState.field(parsedChordsField) !=
+          update.state.field(parsedChordsField)
       )
         this.decorations = actionWidgets(update.view);
     }

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

@@ -1,16 +1,263 @@
-import { KEYMAP_CODES, type KeyInfo } from "$lib/serial/keymap-codes";
-import { get } from "svelte/store";
+import type { KeyInfo } from "$lib/serial/keymap-codes";
+import type { CharaChordFile } from "$lib/share/chara-file";
+import {
+  composeChordInput,
+  hasConcatenator,
+  hashChord,
+  willBeValidChordInput,
+} from "$lib/serial/chord";
+import type {
+  ActionMeta,
+  ChordMeta,
+  MetaRange,
+  ParseResult,
+} from "./parse-meta";
+import type { Tree } from "@lezer/common";
 
-export function canUseIdAsString(info: KeyInfo): boolean {
-  return !!info.id && /^[a-zA-Z_][a-zA-Z0-9_]*$/.test(info.id);
+function parseChordMeta(
+  tree: Tree,
+  ids: Map<string, KeyInfo>,
+  codes: Map<number, KeyInfo>,
+  sliceString: (from: number, to: number) => string,
+): ChordMeta[] {
+  console.time("parseChordTree");
+  const result: ChordMeta[] = [];
+
+  let current: ChordMeta = { range: [0, 0], valid: false };
+  let actions: ActionMeta[] = [];
+  let actionRange: MetaRange | undefined = undefined;
+
+  tree.cursor().iterate(
+    (node) => {
+      if (node.name === "Action") {
+        actionRange = [node.from, node.to];
+      } else if (node.name === "ChordPhrase") {
+        current.phrase = {
+          range: [node.from, node.to],
+          value: [],
+          valid: true,
+          actions: [],
+          hasConcatenator: false,
+        };
+      } else if (node.name === "Chord") {
+        current = { range: [node.from, node.to], valid: false };
+      } else if (node.name === "ActionString") {
+        actions = [];
+      } else if (node.name === "HexNumber") {
+        const hexString = sliceString(node.from, node.to);
+        const code = Number.parseInt(hexString, 16);
+        const parentNode = node.node.parent;
+        if (parentNode?.type.name === "CompoundLiteral") {
+          current.compounds ??= [];
+          current.compounds.push({
+            range: [parentNode.from, parentNode.to],
+            value: code,
+            actions: [],
+            valid: true, // TODO: validate compound literal
+          });
+        } else {
+          const valid = !(Number.isNaN(code) || code < 0 || code > 1023);
+          actions.push({
+            code,
+            info: codes.get(code),
+            explicit: true,
+            valid,
+            range: actionRange!,
+          });
+        }
+      } else if (
+        node.name === "ActionId" ||
+        node.name === "SingleLetter" ||
+        node.name === "EscapedLetter"
+      ) {
+        const id = sliceString(node.from, node.to);
+        const info = ids.get(id);
+        const value: ActionMeta = {
+          code: info?.code ?? Number.NaN,
+          info,
+          valid: info !== undefined,
+          range: actionRange!,
+        };
+        if (node.name === "ActionId") {
+          value.explicit = true;
+        }
+        actions.push(value);
+      }
+    },
+    (node) => {
+      if (node.name === "Chord") {
+        result.push(current);
+        if (current.phrase) {
+          current.phrase.actions = actions;
+          current.phrase.value = actions.map(({ code }) => code);
+          current.phrase.valid = actions.every(({ valid }) => valid);
+          current.phrase.hasConcatenator = hasConcatenator(
+            current.phrase.value,
+            codes,
+          );
+        }
+        current.valid =
+          (current.phrase?.valid ?? false) && (current.input?.valid ?? false);
+        if (!current.valid) {
+          current.disabled = true;
+        }
+      } else if (node.name === "CompoundInput") {
+        const lastCompound = current.compounds?.at(-1);
+        current.compounds ??= [];
+        current.compounds.push({
+          range: [node.from, node.to],
+          value: hashChord(
+            composeChordInput(
+              actions.map(({ code }) => code),
+              lastCompound?.value,
+            ),
+          ),
+          actions,
+          valid:
+            willBeValidChordInput(actions.length, lastCompound !== undefined) &&
+            actions.every(({ valid }) => valid),
+        });
+      } else if (node.name === "ChordInput") {
+        const lastCompound = current.compounds?.at(-1);
+        current.input = {
+          range: [node.from, node.to],
+          value: composeChordInput(
+            actions.map(({ code }) => code),
+            lastCompound?.value,
+          ),
+          valid:
+            willBeValidChordInput(actions.length, lastCompound !== undefined) &&
+            actions.every(({ valid }) => valid),
+          actions,
+        };
+      }
+    },
+  );
+
+  console.timeEnd("parseChordTree");
+  return result;
 }
 
-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}>`;
+function resolveChordOverrides(chords: ChordMeta[]): Map<string, ChordMeta> {
+  console.time("resolveOverrides");
+  const seen = new Map<string, ChordMeta>();
+  for (const info of chords) {
+    if (!info.input || info.disabled) continue;
+    const key = JSON.stringify(info.input.value);
+    const override = seen.get(key);
+    if (override) {
+      override.overrides ??= [];
+      override.overrides.push(info);
+      info.overriddenBy = override;
+      info.disabled = true;
+    } else {
+      seen.set(key, info);
+    }
+  }
+  console.timeEnd("resolveOverrides");
+  return seen;
+}
+
+function resolveChordAliases(chords: ChordMeta[]): Map<string, ChordMeta[]> {
+  console.time("resolveAliases");
+  const aliases = new Map<string, ChordMeta[]>();
+  for (const info of chords) {
+    if (!info.phrase) continue;
+    const key = JSON.stringify(info.phrase.value);
+    const list = aliases.get(key) ?? [];
+    list.push(info);
+    aliases.set(key, list);
+  }
+  for (const [key, value] of aliases) {
+    if (value.length <= 1) {
+      aliases.delete(key);
+    } else {
+      for (const info of value) {
+        info.aliases = value.filter((i) => i !== info);
+      }
+    }
+  }
+  console.timeEnd("resolveAliases");
+  return aliases;
+}
+
+function resolveCompoundParents(chords: ChordMeta[]): Map<number, ChordMeta> {
+  console.time("resolveCompoundParents");
+  const compounds = new Map<number, ChordMeta>();
+  for (const chord of chords) {
+    if (chord.input && !chord.disabled) {
+      compounds.set(hashChord(chord.input.value), chord);
+    }
+  }
+  for (const chord of chords) {
+    if (chord.compounds) {
+      for (const compound of chord.compounds) {
+        const parent = compounds.get(compound.value);
+        if (parent) {
+          compound.parent = parent;
+        }
+      }
+      const lastCompound = chord.compounds?.at(-1);
+      if (lastCompound && lastCompound.parent) {
+        lastCompound.parent.children ??= [];
+        lastCompound.parent.children.push(chord);
+      }
+    }
+  }
+  console.timeEnd("resolveCompoundParents");
+  return compounds;
+}
+
+export function resolveChanges(
+  chords: ChordMeta[],
+  inputs: Map<string, ChordMeta>,
+  deviceChords: CharaChordFile["chords"],
+): [CharaChordFile["chords"], Map<string, ChordMeta>] {
+  console.time("resolveChanges");
+  const removed: CharaChordFile["chords"] = [];
+  const exact = new Map<string, ChordMeta>();
+  for (const chord of chords) {
+    if (chord.input && chord.phrase && !chord.disabled) {
+      exact.set(
+        JSON.stringify([chord.input.value, chord.phrase?.value ?? []]),
+        chord,
+      );
+    }
+  }
+  for (const deviceChord of deviceChords) {
+    const exactMatch = exact.get(JSON.stringify(deviceChord));
+    if (exactMatch) {
+      exactMatch.phrase!.originalValue = exactMatch.phrase!.value;
+      continue;
+    }
+    const byInput = inputs.get(JSON.stringify(deviceChord[0]));
+    if (byInput) {
+      byInput.phrase!.originalValue = deviceChord[1];
+      continue;
+    }
+    removed.push(deviceChord);
+  }
+
+  console.timeEnd("resolveChanges");
+  return [removed, exact];
+}
+
+export function parseCharaChords(
+  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(tree, ids, codes, sliceString);
+  const inputs = resolveChordOverrides(chords);
+  const aliases = resolveChordAliases(chords);
+  const compounds = resolveCompoundParents(chords);
+  const [removed, exact] = resolveChanges(chords, inputs, deviceChords);
+
+  console.timeEnd("parseTotal");
+
+  return { chords, removed, aliases, compounds, inputs, exact };
 }

src/lib/chord-editor/autocomplete.ts

@@ -1,72 +1,39 @@
-import { KEYMAP_CATEGORIES, KEYMAP_CODES } from "$lib/serial/keymap-codes";
-import type {
-  Completion,
-  CompletionSection,
-  CompletionSource,
-} from "@codemirror/autocomplete";
-import { derived, get } from "svelte/store";
-import { actionToValue, canUseIdAsString } from "./action-serializer";
+import {
+  EditorView,
+  ViewPlugin,
+  ViewUpdate,
+  type PluginValue,
+} from "@codemirror/view";
+import { syntaxTree } from "@codemirror/language";
+import type { EditorState } from "@codemirror/state";
 
-const completionSections = derived(
-  KEYMAP_CATEGORIES,
-  (categories) =>
-    new Map(
-      categories.map(
-        (category) =>
-          [
-            category,
-            {
-              name: category.name,
-            } satisfies CompletionSection,
-          ] as const,
-      ),
-    ),
-);
+export function actionAutocompletePlugin(
+  query: (query: string | undefined) => void,
+) {
+  return ViewPlugin.fromClass(
+    class implements PluginValue {
+      constructor(readonly view: EditorView) {}
 
-export const actionAutocompleteItems = derived(
-  [KEYMAP_CODES, completionSections],
-  ([codes, sections]) =>
-    codes
-      .values()
-      .map((info) => {
-        const canUseId = canUseIdAsString(info);
-        const completionValue =
-          (canUseId && info.id) ||
-          `0x${info.code.toString(16).padStart(2, "0")}`;
-        return {
-          label:
-            [
-              canUseId || !info.id ? undefined : `"${info.id}"`,
-              info.title,
-              info.variant?.replace(/^[a-z]/g, (c) => c.toUpperCase()),
-            ]
-              .filter(Boolean)
-              .join(" ") || completionValue,
-          detail: actionToValue(info),
-          section: info.category ? sections.get(info.category) : undefined,
-          info: info.description,
-          type: "keyword",
-          apply: completionValue + ">",
-        } satisfies Completion;
-      })
-      .filter(
-        (item) => typeof item.label === "string" && item.apply !== undefined,
-      )
-      .toArray(),
-);
+      update(update: ViewUpdate) {
+        query(this.resolveAutocomplete(update.state));
+      }
 
-export const actionAutocomplete = ((context) => {
-  let word = context.tokenBefore([
-    "ExplicitDelimStart",
-    "ActionId",
-    "HexNumber",
-    "DecimalNumber",
-  ]);
-  if (!word) return null;
-  console.log(get(actionAutocompleteItems));
-  return {
-    from: word.type.name === "ExplicitDelimStart" ? word.to : word.from,
-    validFor: /^<?[a-zA-Z0-9_]*$/,
-    options: get(actionAutocompleteItems),
-  };
-}) satisfies CompletionSource;
+      resolveAutocomplete(state: EditorState): string | undefined {
+        if (state.selection.ranges.length !== 1) return;
+        const from = state.selection.ranges[0]!.from;
+        const to = state.selection.ranges[0]!.to;
+        if (from !== to) return;
+        const tree = syntaxTree(state);
+        const node = tree.resolveInner(from, -1).parent;
+        if (node?.name !== "ExplicitAction") return;
+        if (node.getChild("ExplicitDelimEnd")) return;
+        const queryNode = node.getChild("ExplicitDelimStart")?.nextSibling;
+        return (
+          (queryNode
+            ? state.doc.sliceString(queryNode.from, queryNode.to)
+            : undefined) || undefined
+        );
+      }
+    },
+  );
+}

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-plugin.ts

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

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

@@ -26,7 +26,7 @@ export class DelimWidget extends WidgetType {
 
   toDOM() {
     if (!this.element) {
-      this.element = document.createElement("span");
+      /*this.element = document.createElement("span");
       this.element.innerHTML =
         " ⇛" + (this.hasConcatenator ? "" : " ");
       this.element.style.scale = "1.8";
@@ -41,7 +41,9 @@ export class DelimWidget extends WidgetType {
           props: { action: 574, display: "keys", inText: true, ghost: true },
         });
         this.element.appendChild(button);
-      }
+      }*/
+      this.element = document.createElement("div");
+      this.element.style.breakAfter = "column";
     }
     return this.element;
   }

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

@@ -0,0 +1,44 @@
+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";
+
+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) {
+    return (
+      transaction.effects.findLast((it) => it.is(chordSyncEffect))?.value ??
+      value
+    );
+  },
+  toJSON(value) {
+    return value;
+  },
+  fromJSON(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/chords-grammar-plugin.ts

@@ -5,7 +5,6 @@ import {
   HighlightStyle,
 } from "@codemirror/language";
 import { styleTags, tags } from "@lezer/highlight";
-import { actionAutocomplete } from "./autocomplete";
 
 export const chordHighlightStyle = HighlightStyle.define([
   {
@@ -51,7 +50,5 @@ export const chordLanguage = LRLanguage.define({
 });
 
 export function chordLanguageSupport() {
-  return new LanguageSupport(chordLanguage, [
-    chordLanguage.data.of({ autocomplete: actionAutocomplete }),
-  ]);
+  return new LanguageSupport(chordLanguage, [chordLanguage.data.of({})]);
 }

src/lib/chord-editor/chords.grammar

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

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

@@ -0,0 +1,176 @@
+import type { KeyInfo } from "$lib/serial/keymap-codes";
+import type { CharaChordFile } from "$lib/share/chara-file";
+import type { ChangeDesc } from "@codemirror/state";
+
+export type MetaRange = [from: number, to: number];
+
+function mapMetaRange(range: MetaRange, change: ChangeDesc): MetaRange {
+  const newFrom = change.mapPos(range[0]);
+  const newTo = change.mapPos(range[1]);
+  if (newFrom === range[0] && newTo === range[1]) {
+    return range;
+  }
+  return [newFrom, newTo];
+}
+
+export interface ActionMeta {
+  code: number;
+  info?: KeyInfo;
+  explicit?: boolean;
+  range: MetaRange;
+  valid: boolean;
+}
+
+function mapActionMeta(action: ActionMeta, change: ChangeDesc): ActionMeta {
+  const newRange = mapMetaRange(action.range, change);
+  if (newRange === action.range) {
+    return action;
+  }
+  return {
+    ...action,
+    range: newRange,
+  };
+}
+
+function mapArray<T>(
+  array: T[],
+  change: ChangeDesc,
+  mapFn: (action: T, change: ChangeDesc) => T,
+): T[] {
+  let changed = false;
+  const newArray = array.map((value) => {
+    const newValue = mapFn(value, change);
+    if (newValue !== value) {
+      changed = true;
+      return newValue;
+    }
+    return value;
+  });
+  if (changed) {
+    return newArray;
+  }
+  return array;
+}
+
+export interface ActionStringMeta<T> {
+  range: MetaRange;
+  value: T;
+  valid: boolean;
+  actions: ActionMeta[];
+}
+
+function mapActionStringMeta<T extends ActionStringMeta<unknown>>(
+  actionString: T,
+  change: ChangeDesc,
+) {
+  const newRange = mapMetaRange(actionString.range, change);
+  const newActions = mapArray(actionString.actions, change, mapActionMeta);
+  if (newRange === actionString.range && newActions === actionString.actions) {
+    return actionString;
+  }
+  return {
+    ...actionString,
+    range: newRange,
+    actions: newActions,
+  };
+}
+
+export interface PhraseMeta extends ActionStringMeta<number[]> {
+  hasConcatenator: boolean;
+  originalValue?: number[];
+}
+
+export interface CompoundMeta extends ActionStringMeta<number> {
+  parent?: ChordMeta;
+}
+
+export interface InputMeta extends ActionStringMeta<number[]> {}
+
+export interface ChordMeta {
+  range: MetaRange;
+  valid: boolean;
+  disabled?: boolean;
+  compounds?: CompoundMeta[];
+  input?: InputMeta;
+  phrase?: PhraseMeta;
+  children?: ChordMeta[];
+  overrides?: ChordMeta[];
+  aliases?: ChordMeta[];
+  overriddenBy?: ChordMeta;
+}
+
+export function mapChordMeta(chord: ChordMeta, change: ChangeDesc): ChordMeta {
+  const newRange = mapMetaRange(chord.range, change);
+  const newCompounds = chord.compounds
+    ? mapArray(chord.compounds, change, mapActionStringMeta)
+    : undefined;
+  const newInput = chord.input
+    ? mapActionStringMeta(chord.input, change)
+    : undefined;
+  const newPhrase = chord.phrase
+    ? mapActionStringMeta(chord.phrase, change)
+    : undefined;
+  if (
+    newRange === chord.range &&
+    newCompounds === chord.compounds &&
+    newInput === chord.input &&
+    newPhrase === chord.phrase
+  ) {
+    return chord;
+  }
+
+  const newChord: ChordMeta = {
+    ...chord,
+    range: newRange,
+  };
+  if (newCompounds) newChord.compounds = newCompounds;
+  if (newInput) newChord.input = newInput;
+  if (newPhrase) newChord.phrase = newPhrase;
+  return newChord;
+}
+
+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(
+  result: ParseResult,
+  change: ChangeDesc,
+): ParseResult {
+  const newChords = mapArray(result.chords, change, mapChordMeta);
+  if (newChords === result.chords) {
+    return result;
+  }
+  return {
+    ...result,
+    chords: newChords,
+  };
+}
+
+export function iterActions(
+  chord: ChordMeta,
+  callback: (action: ActionMeta) => void,
+) {
+  if (chord.input) {
+    for (const action of chord.input.actions) {
+      callback(action);
+    }
+  }
+  if (chord.compounds) {
+    for (const compound of chord.compounds) {
+      for (const action of compound.actions) {
+        callback(action);
+      }
+    }
+  }
+  if (chord.phrase) {
+    for (const action of chord.phrase.actions) {
+      callback(action);
+    }
+  }
+}

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

@@ -0,0 +1,40 @@
+import { StateField } from "@codemirror/state";
+import { parseCharaChords } from "./action-serializer";
+import { actionMetaPlugin } from "./action-meta-plugin";
+import { syntaxTree } from "@codemirror/language";
+import { deviceChordField } from "./chord-sync-plugin";
+import { mapParseResult, type ParseResult } from "./parse-meta";
+
+export const parsedChordsField = StateField.define<ParseResult>({
+  create() {
+    return {
+      chords: [],
+      removed: [],
+      aliases: new Map(),
+      compounds: new Map(),
+      inputs: new Map(),
+      exact: new Map(),
+    };
+  },
+  update(value, transaction) {
+    const tree = syntaxTree(transaction.state);
+    const ids = transaction.state.field(actionMetaPlugin.field).ids;
+    const codes = transaction.state.field(actionMetaPlugin.field).codes;
+    const deviceChords = transaction.state.field(deviceChordField);
+    if (
+      tree !== syntaxTree(transaction.startState) ||
+      ids !== transaction.startState.field(actionMetaPlugin.field).ids ||
+      codes !== transaction.startState.field(actionMetaPlugin.field).codes ||
+      deviceChords !== transaction.startState.field(deviceChordField)
+    ) {
+      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

@@ -0,0 +1,185 @@
+import {
+  EditorView,
+  highlightActiveLine,
+  keymap,
+  lineNumbers,
+  ViewPlugin,
+  ViewUpdate,
+} from "@codemirror/view";
+import {
+  history,
+  historyField,
+  historyKeymap,
+  standardKeymap,
+} from "@codemirror/commands";
+import { debounceTime, mergeMap, Subject } from "rxjs";
+import { EditorState, type EditorStateConfig } from "@codemirror/state";
+import { lintGutter } from "@codemirror/lint";
+import {
+  chordHighlightStyle,
+  chordLanguageSupport,
+} from "./chords-grammar-plugin";
+import { actionLinter } from "./action-linter";
+import { actionAutocompletePlugin } from "./autocomplete";
+import { delimPlugin } from "./chord-delim-plugin";
+import { actionPlugin } from "./action-plugin";
+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.svelte";
+import { searchKeymap } from "@codemirror/search";
+
+const serializedFields = {
+  history: historyField,
+  deviceChords: deviceChordField,
+};
+
+export interface EditorConfig {
+  rawCode?: boolean;
+  storeName: string;
+  autocomplete(query: string | undefined): void;
+}
+
+export function createConfig(params: EditorConfig) {
+  return {
+    extensions: [
+      actionMetaPlugin.plugin,
+      deviceChordField,
+      parsedChordsField,
+      changesPanel(),
+      lintGutter(),
+      params.rawCode ? [lineNumbers()] : [delimPlugin, actionPlugin],
+      chordLanguageSupport(),
+      actionLinter({
+        delay: 100,
+        markerFilter(diagnostics) {
+          return diagnostics.filter((it) => it.from !== it.to);
+        },
+      }),
+      actionAutocompletePlugin(params.autocomplete),
+      persistentStatePlugin(params.storeName),
+      history(),
+      syntaxHighlighting(chordHighlightStyle),
+      highlightActiveLine(),
+      EditorView.theme({
+        ".cm-line": {
+          borderBottom: "1px solid transparent",
+          caretColor: "var(--md-sys-color-on-surface)",
+        },
+        ".cm-scroller": {
+          overflow: "auto",
+          width: "100%",
+          fontFamily: "inherit !important",
+          gap: "8px",
+        },
+        ".cm-content": {
+          flex: 1,
+        },
+        ".cm-cursor": {
+          borderColor: "var(--md-sys-color-on-surface)",
+        },
+      }),
+      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 {
+      return EditorState.fromJSON(stored, config, serializedFields);
+    } catch (e) {
+      console.error("Failed to parse persistent state:", e);
+    }
+  }
+  return EditorState.create(config);
+}
+
+export function persistentStatePlugin(storeName: string) {
+  return ViewPlugin.fromClass(
+    class {
+      updateSubject = new Subject<void>();
+      subscription = this.updateSubject
+        .pipe(
+          debounceTime(500),
+          mergeMap(() =>
+            storeState(storeName, this.view.state.toJSON(serializedFields)),
+          ),
+        )
+        .subscribe(() => {});
+
+      constructor(readonly view: EditorView) {}
+
+      update(update: ViewUpdate) {
+        if (update.state !== update.startState) {
+          this.updateSubject.next();
+        }
+      }
+
+      destroy() {
+        this.subscription.unsubscribe();
+      }
+    },
+  );
+}
+
+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/chord-editor/store-state-field.ts

@@ -0,0 +1,35 @@
+import { StateEffect, StateField } from "@codemirror/state";
+import { EditorView, ViewPlugin } from "@codemirror/view";
+import { get, type Readable } from "svelte/store";
+
+export function reactiveStateField<T>(store: Readable<T>) {
+  const effect = StateEffect.define<T>();
+  const field = StateField.define<T>({
+    create() {
+      return get(store);
+    },
+    update(value, transaction) {
+      return (
+        transaction.effects.findLast((it) => it.is(effect))?.value ?? value
+      );
+    },
+  });
+  const plugin = ViewPlugin.fromClass(
+    class {
+      unsubscribe: () => void;
+
+      constructor(readonly view: EditorView) {
+        this.unsubscribe = store.subscribe((value) => {
+          setTimeout(() => {
+            view.dispatch({ effects: effect.of(value) });
+          });
+        });
+      }
+
+      destroy() {
+        this.unsubscribe();
+      }
+    },
+  );
+  return { field, plugin: [field, plugin] };
+}

src/lib/chord-editor/test.txt

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

src/lib/components/Action.svelte

@@ -8,10 +8,12 @@
   let {
     action,
     display,
+    ignoreIcon = false,
     inText = false,
   }: {
     action: string | number | KeyInfo;
     display: "inline-keys" | "keys" | "verbose";
+    ignoreIcon?: boolean;
     inText?: boolean;
   } = $props();
 
@@ -30,6 +32,7 @@
           ? ({ code: 1024, id: action } satisfies KeyInfo)
           : action),
   );
+  let icon = $derived(ignoreIcon ? undefined : info.icon);
   let dynamicMapping = $derived(info.keyCode && $osLayout.get(info.keyCode));
   let hasPopover = $derived(
     !retrievedInfo || !info.id || info.title || info.description,
@@ -69,7 +72,7 @@
 
 {#snippet kbdText()}
   {dynamicMapping ??
-    info.icon ??
+    icon ??
     info.display ??
     info.id ??
     `0x${info.code.toString(16)}`}
@@ -77,7 +80,7 @@
 {#snippet kbdSnippet(withPopover = true)}
   <kbd
     class:in-text={inText}
-    class:icon={!!info.icon}
+    class:icon={!!icon}
     class:left={info.variant === "left"}
     class:right={info.variant === "right"}
     class:error={info.code > 1023}
@@ -97,7 +100,7 @@
       class:left={info.variant === "left"}
       class:right={info.variant === "right"}>{dynamicMapping}</span
     >
-  {:else if !info.icon && info.id?.length === 1}
+  {:else if !icon && info.id?.length === 1}
     <span
       {@attach hasPopover ? actionTooltip(popover) : null}
       class:in-text={inText}
@@ -112,7 +115,7 @@
       class:in-text={inText}
       class:left={info.variant === "left"}
       class:right={info.variant === "right"}
-      class:icon={!!info.icon}
+      class:icon={!!icon}
       class:warn={!retrievedInfo}
       class:error={info.code > 1023}
       {@attach hasPopover ? actionTooltip(popover) : null}
@@ -161,21 +164,50 @@
     text-decoration: line-through;
   }
 
-  $variant-offset: 12px;
-  $variant-padding: calc(2px + $variant-offset);
   $variant-color: color-mix(
     in srgb,
     var(--md-sys-color-on-surface) 50%,
     transparent
   );
 
+  .left,
+  .right {
+    background-color: transparent;
+
+    &::before {
+      position: absolute;
+      inset: 0;
+      outline: 2px dashed
+        color-mix(in srgb, var(--bg-color), var(--md-sys-color-outline) 40%);
+      outline-offset: -2px;
+      border-radius: var(--border-radius);
+      content: "";
+    }
+  }
+
+  $cutoff: 60%;
+
   .left {
-    padding-inline-end: $variant-padding;
-    text-shadow: $variant-offset 0 2px $variant-color;
+    background-image: linear-gradient(
+      to right,
+      var(--bg-color) $cutoff,
+      transparent $cutoff
+    );
+
+    &::before {
+      clip-path: inset(0 0 0 $cutoff);
+    }
   }
   .right {
-    padding-inline-start: $variant-padding;
-    text-shadow: -$variant-offset 0 2px $variant-color;
+    background-image: linear-gradient(
+      to left,
+      var(--bg-color) $cutoff,
+      transparent $cutoff
+    );
+
+    &::before {
+      clip-path: inset(0 $cutoff 0 0);
+    }
   }
 
   .inline-kbd {

src/lib/components/layout/ActionList.svelte

@@ -14,18 +14,22 @@
   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,
     nextAction = undefined,
+    queryFilter = undefined,
+    ignoreIcon,
     autofocus = false,
     onselect,
     onclose,
   }: {
     currentAction?: number;
+    queryFilter?: string;
     nextAction?: number;
     autofocus?: boolean;
+    ignoreIcon?: boolean;
     onselect?: (id: number) => void;
     onclose?: () => void;
   } = $props();
@@ -43,6 +47,14 @@
     createIndex($KEYMAP_CODES);
   });
 
+  let didClear = true;
+  $effect(() => {
+    if (queryFilter !== undefined || !didClear) {
+      searchBox.value = queryFilter ?? "";
+      search();
+    }
+  });
+
   async function createIndex(codes: Map<number, KeyInfo>) {
     for (const [, action] of codes) {
       await index?.addAsync(
@@ -60,6 +72,7 @@
         (category) => [category, []] as [KeymapCategory, KeyInfo[]],
       ),
     );
+    didClear = searchBox.value === "";
     const result =
       searchBox.value === ""
         ? Array.from($KEYMAP_CODES.keys())
@@ -167,7 +180,7 @@
         <li>Action code is out of range</li>
       {/if}
     {/if}
-    {#each results as [category, actions] (category)}
+    {#each results as [category, actions] (actions)}
       {#if actions.length > 0}
         <div class="category">
           <h3>{category.name}</h3>
@@ -191,7 +204,7 @@
                     }
                   : undefined}
               >
-                <Action {action} display="verbose"></Action>
+                <Action {action} display="verbose" {ignoreIcon}></Action>
               </button>
             {/each}
           </ul>

src/lib/serial/chord.ts

@@ -1,4 +1,5 @@
 import { compressActions, decompressActions } from "../serialization/actions";
+import type { KeyInfo } from "./keymap-codes";
 
 export interface Chord {
   actions: number[];
@@ -56,6 +57,103 @@ export function deserializeActions(native: bigint): number[] {
   return actions;
 }
 
+const compoundHashItems = 3;
+const maxChordInputItems = 12;
+const actionBits = 10;
+const actionMask = (1 << actionBits) - 1;
+
+/**
+ * Applies the compound value to a **valid** chord input
+ */
+export function applyCompound(actions: number[], compound: number): number[] {
+  const result = [...actions];
+  for (let i = 0; i < compoundHashItems; i++) {
+    result[i] = (compound >>> (i * actionBits)) & actionMask;
+  }
+  result[compoundHashItems] = 0;
+  return result;
+}
+
+/**
+ * Extracts the compound value from a chord input, if present
+ */
+export function splitCompound(
+  actions: number[],
+): [inputs: number[], compound: number | undefined] {
+  if (actions[compoundHashItems] != 0) {
+    return [
+      actions.slice(
+        Math.max(
+          0,
+          actions.findIndex((it) => it !== 0),
+        ),
+      ),
+      undefined,
+    ];
+  }
+
+  let compound = 0;
+  for (let i = 0; i < compoundHashItems; i++) {
+    compound |= (actions[i] ?? 0) << (i * actionBits);
+  }
+
+  return [
+    actions.slice(
+      actions.findIndex((it, i) => i > compoundHashItems && it !== 0),
+    ),
+    compound === 0 ? undefined : compound,
+  ];
+}
+
+export function willBeValidChordInput(
+  inputCount: number,
+  hasCompound: boolean,
+): boolean {
+  return (
+    inputCount > 0 &&
+    inputCount <= maxChordInputItems - (hasCompound ? compoundHashItems + 1 : 0)
+  );
+}
+
+const ACTION_JOIN = 574;
+const ACTION_KSC_00 = 256;
+
+export function hasConcatenator(
+  actions: number[],
+  ids: Map<number, KeyInfo>,
+): boolean {
+  const lastAction = actions.at(-1);
+  for (const action of actions) {
+    if (!ids.get(action)?.printable) {
+      if (actions.length == 0) {
+        return false;
+      }
+      return lastAction == ACTION_JOIN;
+    }
+  }
+  return lastAction != ACTION_KSC_00;
+}
+
+/**
+ * Composes a chord input from a list of actions and an optional compound value
+ * to a valid chord input
+ */
+export function composeChordInput(
+  actions: number[],
+  compound?: number,
+): number[] {
+  const result = [
+    ...Array.from(
+      {
+        length: Math.max(0, maxChordInputItems - actions.length),
+      },
+      () => 0,
+    ),
+    ...actions.slice(0, maxChordInputItems).sort((a, b) => a - b),
+  ];
+  return compound !== undefined ? applyCompound(result, compound) : result;
+}
+
 /**
  * Hashes a chord input the same way as CCOS
  */
@@ -72,5 +170,6 @@ export function hashChord(actions: number[]) {
   if ((hash & 0xff) === 0xff) {
     hash ^= 0xff;
   }
-  return hash & 0x3fff_ffff;
+  hash &= 0x3fff_ffff;
+  return hash === 0 ? 1 : hash;
 }

src/lib/serial/connection.ts

@@ -70,7 +70,10 @@ export const syncStatus: Writable<
   "done" | "error" | "downloading" | "uploading"
 > = writable("done");
 
-export const deviceMeta = writable<VersionMeta | undefined>(undefined);
+export const deviceMeta = persistentWritable<VersionMeta | undefined>(
+  "current-meta",
+  undefined,
+);
 
 export interface ProgressInfo {
   max: number;

src/lib/style/_kbd.scss

@@ -1,22 +1,22 @@
 kbd {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  margin-block: 6px;
-  border-radius: 4px;
-
-  //border: 1px solid currentcolor;
-  background: color-mix(
+  --bg-color: color-mix(
     in srgb,
     var(--md-sys-color-surface-variant) 50%,
     transparent
   );
-  padding: 4px;
+  --border-radius: 4px;
 
+  display: inline-flex;
+  position: relative;
+  justify-content: center;
+  align-items: center;
+  margin-block: 6px;
+  border-radius: var(--border-radius);
+  background: var(--bg-color);
+  padding: 4px;
   height: 20px;
   color: currentcolor;
   font-weight: normal;
-
   font-size: 14px;
 
   &.icon {

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 {
-  deviceChords,
-  deviceLayout,
-  deviceSettings,
-} from "$lib/serial/connection";
-import { KEYMAP_CODES } from "$lib/serial/keymap-codes";
+import { deviceLayout, deviceSettings } from "$lib/serial/connection";
 
 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)),
-);