feat: cv2

package.json

@@ -35,25 +35,27 @@
   },
   "devDependencies": {
     "@codemirror/autocomplete": "^6.20.0",
+    "@codemirror/collab": "^6.1.1",
     "@codemirror/commands": "^6.10.1",
     "@codemirror/lang-javascript": "^6.2.4",
-    "@codemirror/language": "^6.11.3",
+    "@codemirror/language": "^6.12.1",
+    "@codemirror/lint": "^6.9.2",
     "@codemirror/merge": "^6.11.2",
-    "@codemirror/state": "^6.5.2",
+    "@codemirror/state": "^6.5.3",
-    "@codemirror/view": "^6.39.4",
+    "@codemirror/view": "^6.39.9",
     "@fontsource-variable/material-symbols-rounded": "^5.2.30",
     "@fontsource-variable/noto-sans-mono": "^5.2.10",
-    "@lezer/common": "^1.4.0",
+    "@lezer/common": "^1.5.0",
     "@lezer/generator": "^1.8.0",
     "@lezer/highlight": "^1.2.3",
-    "@lezer/lr": "^1.4.5",
+    "@lezer/lr": "^1.4.7",
     "@material/material-color-utilities": "^0.3.0",
     "@melt-ui/pp": "^0.3.2",
     "@melt-ui/svelte": "^0.86.6",
     "@modyfi/vite-plugin-yaml": "^1.1.1",
     "@sveltejs/adapter-static": "^3.0.10",
-    "@sveltejs/kit": "^2.49.2",
+    "@sveltejs/kit": "^2.49.3",
-    "@sveltejs/vite-plugin-svelte": "^6.2.1",
+    "@sveltejs/vite-plugin-svelte": "^6.2.3",
     "@tauri-apps/api": "^1.6.0",
     "@tauri-apps/cli": "^1.6.0",
     "@types/dom-view-transitions": "^1.0.6",
@@ -76,29 +78,29 @@
     "matrix-js-sdk": "^37.12.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.7.4",
-    "prettier-plugin-css-order": "^2.1.2",
+    "prettier-plugin-css-order": "^2.2.0",
     "prettier-plugin-svelte": "^3.4.1",
     "rxjs": "^7.8.2",
-    "sass": "^1.97.0",
+    "sass": "^1.97.2",
     "semver": "^7.7.3",
-    "socket.io-client": "^4.8.1",
+    "socket.io-client": "^4.8.3",
     "stylelint": "^16.26.1",
     "stylelint-config-html": "^1.1.0",
     "stylelint-config-prettier-scss": "^1.0.0",
     "stylelint-config-recommended-scss": "^16.0.2",
     "stylelint-config-standard-scss": "^16.0.0",
-    "svelte": "5.37.1",
+    "svelte": "5.46.1",
-    "svelte-check": "^4.3.4",
+    "svelte-check": "^4.3.5",
     "svelte-preprocess": "^6.0.3",
     "tippy.js": "^6.3.7",
     "typesafe-i18n": "^5.26.2",
-    "typescript": "^5.8.3",
+    "typescript": "^5.9.3",
-    "vite": "^7.0.6",
+    "vite": "^7.3.1",
     "vite-plugin-mkcert": "^1.17.9",
-    "vite-plugin-pwa": "^1.0.2",
+    "vite-plugin-pwa": "^1.2.0",
     "vitest": "^4.0.16",
     "web-serial-polyfill": "^1.0.15",
-    "workbox-window": "^7.3.0"
+    "workbox-window": "^7.4.0"
   },
   "type": "module"
 }

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

@@ -0,0 +1,196 @@
+import {
+  KEYMAP_CODES,
+  KEYMAP_IDS,
+  type KeyInfo,
+} from "$lib/serial/keymap-codes";
+import { syntaxTree } from "@codemirror/language";
+import { linter, type Diagnostic } from "@codemirror/lint";
+import { derived, get } from "svelte/store";
+import { parseCharaChords } from "./action-serializer";
+import { deviceChords } from "$lib/serial/connection";
+
+export const actionLinterDependencies = derived(
+  [KEYMAP_IDS, KEYMAP_CODES, deviceChords],
+  (it) => it,
+);
+
+export const actionLinter = linter(
+  (view) => {
+    const diagnostics: Diagnostic[] = [];
+    const [ids, codes, deviceChords] = get(actionLinterDependencies);
+
+    const { meta, compoundInputs } = parseCharaChords(view.state, ids);
+
+    syntaxTree(view.state)
+      .cursor()
+      .iterate((node) => {
+        let action: KeyInfo | undefined = undefined;
+        switch (node.name) {
+          case "SingleLetter": {
+            action = ids.get(view.state.doc.sliceString(node.from, node.to));
+            break;
+          }
+          case "ActionId": {
+            action = ids.get(view.state.doc.sliceString(node.from, node.to));
+            break;
+          }
+          case "HexNumber": {
+            const hexString = view.state.doc.sliceString(node.from, node.to);
+            const code = Number.parseInt(hexString, 16);
+            if (hexString.length === 10) {
+              if (compoundInputs.has(code)) {
+                diagnostics.push({
+                  from: node.from,
+                  to: node.to,
+                  severity: "info",
+                  message: "Compound hash literal can be expanded",
+                  actions: [
+                    {
+                      name: "Expand",
+                      apply(view, from, to) {
+                        view.dispatch({
+                          changes: {
+                            from: from - 1,
+                            to: to + 1,
+                            insert: compoundInputs.get(code)! + "|",
+                          },
+                        });
+                      },
+                    },
+                  ],
+                });
+              }
+              return;
+            }
+
+            if (!(code >= 0 && code <= 1023)) {
+              diagnostics.push({
+                from: node.from,
+                to: node.to,
+                severity: "error",
+                message: "Hex code invalid (out of range)",
+                actions: [
+                  {
+                    name: "Remove",
+                    apply(view, from, to) {
+                      view.dispatch({ changes: { from, to } });
+                    },
+                  },
+                ],
+              });
+              return;
+            }
+
+            action = codes.get(code);
+            break;
+          }
+          default:
+            return;
+        }
+        if (!action) {
+          const action = view.state.doc.sliceString(node.from, node.to);
+          diagnostics.push({
+            from: node.from,
+            to: node.to,
+            severity: node.name === "HexNumber" ? "warning" : "error",
+            message: `Unknown action: ${action}`,
+            actions: [
+              ...(node.name === "SingleLetter"
+                ? ([
+                    {
+                      name: "Generate Windows Hex Numpad Code",
+                      apply(view, from, to) {
+                        view.dispatch({
+                          changes: {
+                            from,
+                            to,
+                            insert:
+                              "<PRESS_NEXT><LEFT_ALT><KP_PLUS>" +
+                              action
+                                .codePointAt(0)!
+                                .toString(16)
+                                .split("")
+                                .map((c) =>
+                                  /^\d$/.test(c)
+                                    ? `<KP_${c}>`
+                                    : c.toLowerCase(),
+                                )
+                                .join("") +
+                              "<RELEASE_NEXT><LEFT_ALT>",
+                          },
+                        });
+                      },
+                    },
+                  ] satisfies Diagnostic["actions"])
+                : []),
+            ],
+          });
+        }
+      });
+
+    for (const m of meta) {
+      if (m.invalidActions) {
+        diagnostics.push({
+          from: m.from,
+          to: m.to,
+          severity: "error",
+          markClass: "chord-invalid",
+          message: `Chord contains invalid actions`,
+        });
+      }
+      if (m.invalidInput) {
+        diagnostics.push({
+          from: m.from,
+          to: m.to,
+          severity: "error",
+          markClass: "chord-invalid",
+          message: `Chord input is invalid`,
+        });
+      }
+      if (m.emptyPhrase) {
+        diagnostics.push({
+          from: m.from,
+          to: m.to,
+          severity: "warning",
+          message: `Chord phrase is empty`,
+        });
+      }
+      if (m.overriddenBy) {
+        diagnostics.push({
+          from: m.from,
+          to: m.to,
+          severity: "warning",
+          message: `Chord overridden by previous chord`,
+        });
+      }
+      if (m.orphan) {
+        diagnostics.push({
+          from: m.from,
+          to: m.to,
+          severity: "warning",
+          message: `Orphan compound chord`,
+        });
+      }
+      if (m.disabled) {
+        diagnostics.push({
+          from: m.from,
+          to: m.to,
+          severity: "info",
+          markClass: "chord-ignored",
+          message: `Chord disabled`,
+        });
+      }
+      if ((m.overrides?.length ?? 0) > 0) {
+        diagnostics.push({
+          from: m.from,
+          to: m.to,
+          severity: "info",
+          message: `Chord overrides other chords`,
+        });
+      }
+    }
+
+    return diagnostics;
+  },
+  { delay: 100 },
+);

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

@@ -56,18 +56,16 @@ function actionWidgets(view: EditorView) {
       enter: (node) => {
         if (node.name !== "ExplicitAction") return;
         const value =
-          node.node.getChild("ActionId") ??
+          node.node.getChild("ActionId") ?? node.node.getChild("HexNumber");
-          node.node.getChild("HexNumber") ??
-          node.node.getChild("DecimalNumber");
         if (!value) return;
         if (!node.node.getChild("ExplicitDelimEnd")) {
           return;
         }
-
         const id = view.state.doc.sliceString(value.from, value.to);
+        if (value.name === "HexNumber" && id.length === 10) return;
         let deco = Decoration.replace({
           widget: new ActionWidget(
-            value.name === "ActionId" ? id : parseInt(id),
+            value.name === "ActionId" ? id : Number.parseInt(id, 16),
           ),
         });
         widgets.push(deco.range(node.from, node.to));

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

@@ -1,5 +1,20 @@
-import { KEYMAP_CODES, type KeyInfo } from "$lib/serial/keymap-codes";
+import {
+  KEYMAP_CODES,
+  KEYMAP_IDS,
+  type KeyInfo,
+} from "$lib/serial/keymap-codes";
+import type { CharaChordFile } from "$lib/share/chara-file";
+import { syntaxTree } from "@codemirror/language";
+import { StateEffect, ChangeDesc, type EditorState } from "@codemirror/state";
+import type { Update } from "@codemirror/collab";
 import { get } from "svelte/store";
+import {
+  composeChordInput,
+  hashChord,
+  splitCompound,
+  willBeValidChordInput,
+} from "$lib/serial/chord";
+import type { SyntaxNodeRef } from "@lezer/common";
 
 export function canUseIdAsString(info: KeyInfo): boolean {
   return !!info.id && /^[a-zA-Z_][a-zA-Z0-9_]*$/.test(info.id);
@@ -9,8 +24,270 @@ 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;
+    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 interface ParseMeta {
+  from: number;
+  to: number;
+  invalidActions?: true;
+  invalidInput?: true;
+  emptyPhrase?: true;
+  orphan?: true;
+  disabled?: true;
+  overrides?: number[];
+  overriddenBy?: number;
+}
+
+export interface ParseResult {
+  result: CharaChordFile["chords"];
+  meta: ParseMeta[];
+  compoundInputs: Map<number, string>;
+}
+
+export function parseCharaChords(
+  data: EditorState,
+  ids: Map<string, KeyInfo>,
+): ParseResult {
+  const chords: CharaChordFile["chords"] = [];
+  const metas: ParseMeta[] = [];
+  const keys = new Map<string, number>();
+  const compoundInputs = new Map<number, string>();
+
+  let currentChord: CharaChordFile["chords"][number] | undefined = undefined;
+  let compound: number | undefined = undefined;
+  let currentActions: number[] = [];
+  let invalidActions = false;
+  let invalidInput = false;
+  let chordFrom = 0;
+
+  function makeChordInput(node: SyntaxNodeRef): number[] {
+    invalidInput ||= !willBeValidChordInput(currentActions.length, !!compound);
+    const input = composeChordInput(currentActions, compound);
+    compound = hashChord(input);
+    if (!compoundInputs.has(compound)) {
+      compoundInputs.set(compound, data.doc.sliceString(chordFrom, node.from));
+    }
+    return input;
+  }
+
+  syntaxTree(data)
+    .cursor()
+    .iterate(
+      (node) => {
+        if (node.name === "Chord") {
+          currentChord = undefined;
+          compound = undefined;
+          invalidActions = false;
+          invalidInput = false;
+          chordFrom = node.from;
+        } else if (node.name === "ActionString") {
+          currentActions = [];
+        } else if (node.name === "HexNumber") {
+          const hexString = data.doc.sliceString(node.from, node.to);
+          const code = Number.parseInt(hexString, 16);
+          if (hexString.length === 10) {
+            if (compound !== undefined) {
+              invalidInput = true;
+            }
+            compound = code;
+          } else {
+            if (Number.isNaN(code) || code < 0 || code > 1023) {
+              invalidActions = true;
+            }
+            currentActions.push(code);
+          }
+        } else if (
+          node.name === "ActionId" ||
+          node.name === "SingleLetter" ||
+          node.name === "EscapedChar"
+        ) {
+          const id = data.doc.sliceString(node.from, node.to);
+          const code = ids.get(id)?.code;
+          if (code === undefined) {
+            invalidActions = true;
+            const encoder = new TextEncoder();
+            const bytes = encoder.encode(id);
+            for (let byte of bytes) {
+              currentActions.push(-byte);
+            }
+          } else {
+            currentActions.push(code);
+          }
+        }
+      },
+      (node) => {
+        if (node.name === "Chord" && currentChord !== undefined) {
+          if (currentChord !== undefined) {
+            currentChord[1] = currentActions;
+            const index = chords.length;
+            chords.push(currentChord);
+            const meta: ParseMeta = { from: node.from, to: node.to };
+            if (invalidActions) {
+              meta.invalidActions = true;
+            }
+            if (invalidInput) {
+              meta.invalidInput = true;
+            }
+            metas.push(meta);
+            if (currentChord[1].length === 0) {
+              meta.emptyPhrase = true;
+            }
+            const key = JSON.stringify(currentChord[0]);
+            if (!meta.invalidInput) {
+              if (keys.has(key)) {
+                const targetIndex = keys.get(key)!;
+                const targetMeta = metas[targetIndex]!;
+                if (!targetMeta.overrides) targetMeta.overrides = [];
+                targetMeta.overrides.push(index);
+                meta.overriddenBy = targetIndex;
+              } else {
+                keys.set(key, index);
+              }
+            }
+            if (
+              meta.emptyPhrase ||
+              meta.invalidInput ||
+              meta.invalidActions ||
+              meta.overriddenBy !== undefined
+            ) {
+              meta.disabled = true;
+            }
+          }
+        } else if (node.name === "CompoundDelim") {
+          makeChordInput(node);
+        } else if (node.name === "PhraseDelim") {
+          const input = makeChordInput(node);
+          currentChord = [composeChordInput(input, compound), []];
+        }
+      },
+    );
+
+  for (let i = 0; i < metas.length; i++) {
+    const [, compound] = splitCompound(chords[i]![0]);
+    if (compound !== undefined && !compoundInputs.has(compound)) {
+      metas[i]!.orphan = true;
+    }
+  }
+
+  return { result: chords, meta: metas, compoundInputs };
+}
+
+class ChordRecord {
+  private chords = new Map<string, Set<string>>();
+
+  constructor(chords: CharaChordFile["chords"]) {
+    for (let chord of chords) {
+      const key = JSON.stringify(chord[0]);
+      if (!this.chords.has(key)) {
+        this.chords.set(key, new Set());
+      }
+      this.chords.get(key)!.add(JSON.stringify(chord));
+    }
+  }
+
+  static createDiff(
+    previous: CharaChordFile["chords"],
+    updated: CharaChordFile["chords"],
+  ) {
+    const deleted = new ChordRecord(previous);
+    const added = new ChordRecord(updated);
+    const dupA = deleted.duplicates(added);
+    const dupB = added.duplicates(deleted);
+    for (let chord of dupA) {
+      deleted.remove(chord);
+      added.remove(chord);
+    }
+    for (let chord of dupB) {
+      deleted.remove(chord);
+      added.remove(chord);
+    }
+    return { deleted, added };
+  }
+
+  duplicates(
+    other: ChordRecord,
+  ): IteratorObject<CharaChordFile["chords"][number]> {
+    const duplicates = new Set<string>();
+    for (let [key, chordSet] of this.chords) {
+      for (let chord of chordSet) {
+        if (other.hasInternal(key, chord)) {
+          duplicates.add(chord);
+        }
+      }
+    }
+    return duplicates
+      .values()
+      .map((it) => JSON.parse(it) as CharaChordFile["chords"][number]);
+  }
+
+  private hasInternal(key: string, chord: string): boolean {
+    return this.chords.get(key)?.has(chord) ?? false;
+  }
+
+  has(chord: CharaChordFile["chords"][number]): boolean {
+    return this.hasInternal(JSON.stringify(chord[0]), JSON.stringify(chord));
+  }
+
+  remove(chord: CharaChordFile["chords"][number]) {
+    const key = JSON.stringify(chord[0]);
+    const set = this.chords.get(key);
+    if (set) {
+      set.delete(JSON.stringify(chord));
+      if (set.size === 0) {
+        this.chords.delete(key);
+      }
+    }
+  }
+}
+
+export function syncChords(
+  previous: CharaChordFile["chords"],
+  updated: CharaChordFile["chords"],
+  state: EditorState,
+) {
+  const deviceDiff = ChordRecord.createDiff(previous, updated);
+  const current = parseCharaChords(state, get(KEYMAP_IDS));
+  // 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
+}
+
+export function rebaseUpdates(
+  updates: readonly Update[],
+  over: readonly { changes: ChangeDesc; clientID: string }[],
+) {
+  if (!over.length || !updates.length) return updates;
+  let changes: ChangeDesc | null = null,
+    skip = 0;
+  for (let update of over) {
+    let other = skip < updates.length ? updates[skip] : null;
+    if (other && other.clientID == update.clientID) {
+      if (changes) changes = changes.mapDesc(other.changes, true);
+      skip++;
+    } else {
+      changes = changes ? changes.composeDesc(update.changes) : update.changes;
+    }
+  }
+
+  if (skip) updates = updates.slice(skip);
+  return !changes
+    ? updates
+    : updates.map((update) => {
+        let updateChanges = update.changes.map(changes!);
+        changes = changes!.mapDesc(update.changes, true);
+        return {
+          changes: updateChanges,
+          effects:
+            update.effects && StateEffect.mapEffects(update.effects, changes!),
+          clientID: update.clientID,
+        };
+      });
+}

src/lib/chord-editor/autocomplete.ts

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

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/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, [
+  return new LanguageSupport(chordLanguage, [chordLanguage.data.of({})]);
-    chordLanguage.data.of({ autocomplete: actionAutocomplete }),
-  ]);
 }

src/lib/chord-editor/chords.grammar

@@ -1,6 +1,6 @@
 @top Program { Chord* }
 
-ExplicitAction { ExplicitDelimStart (HexNumber | DecimalNumber | ActionId) ExplicitDelimEnd }
+ExplicitAction { ExplicitDelimStart (HexNumber | ActionId) ExplicitDelimEnd }
 EscapedSingleAction { Escape EscapedLetter }
 Action { SingleLetter | ExplicitAction | EscapedSingleAction }
 ActionString { Action* }
@@ -9,16 +9,15 @@ ChordPhrase { ActionString }
 Chord { ChordInput PhraseDelim ChordPhrase ChordDelim }
 
 @tokens {
-  @precedence {HexNumber, DecimalNumber}
+  @precedence {HexNumber}
   @precedence {CompoundDelim, PhraseDelim, ExplicitDelimStart, ChordDelim, SingleLetter}
   @precedence {EscapedLetter}
   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 { ![] }

src/lib/chord-editor/test.txt

@@ -1,16 +1,16 @@
-.=<LEFT_SHIFT> => =>
+a|.=<LEFT_SHIFT>=>t=t
-;ims => <0x219><IMPULSE>
+;ims=<0x219><IMPULSE>
--;<KSC_2C><LEFT_SHIFT> => <0x23e>_<0x23e>
+-;<KSC_2C><LEFT_SHIFT>=><0x23e>_<0x23e>
-.;g => <0x23e>...<0x23e><LH_THUMB_3_3D>
+.;g=><0x23e>...<0x23e><LH_THUMB_3_3D>
-'dg => <0x23e>'<0x23e>
+'dg=><0x23e>'<0x23e>
-'gl => <0x23e>'ll<0x23e>
+'gl=><0x23e>'ll<0x23e>
-'ar => <0x23e>'re<0x23e>
+'ar=><0x23e>'re<0x23e>
-'gs => <0x23e>'s<0x23e>
+'gs=><0x23e>'s<0x23e>
-'ev => <0x23e>'ve<0x23e>
+'ev=><0x23e>'ve<0x23e>
-<SPACE>-; => <0x23e><0x223>-<0x223><KSC_00>
+<SPACE>-;=><0x23e><0x223>-<0x223><KSC_00>
-<SPACE>;<LEFT_SHIFT> => <0x23e><0x223><0x23d><0x223><KSC_00>
+<SPACE>;<LEFT_SHIFT>=><0x23e><0x223><0x23d><0x223><KSC_00>
-<SPACE>;g => <0x23e><0x223><SPACE><0x223><KSC_00>
+<SPACE>;g=><0x23e><0x223><SPACE><0x223><KSC_00>
-deg => <0x23e>ed<0x23e>
+deg=><0x23e>ed<0x23e>
-;gr => <0x23e>er<0x23e>
+;gr=><0x23e>er<0x23e>
-;es => <0x23e>es<0x23e>
+;es=><0x23e>es<0x23e>
-;est => <0x23e>est<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,
@@ -63,7 +66,7 @@
 
 {#snippet kbdText()}
   {dynamicMapping ??
-    info.icon ??
+    icon ??
     info.display ??
     info.id ??
     `0x${info.code.toString(16)}`}
@@ -71,7 +74,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}
@@ -91,7 +94,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}
@@ -106,7 +109,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}
@@ -155,21 +158,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;
+    background-image: linear-gradient(
-    text-shadow: $variant-offset 0 2px $variant-color;
+      to right,
+      var(--bg-color) $cutoff,
+      transparent $cutoff
+    );
+
+    &::before {
+      clip-path: inset(0 0 0 $cutoff);
+    }
   }
   .right {
-    padding-inline-start: $variant-padding;
+    background-image: linear-gradient(
-    text-shadow: -$variant-offset 0 2px $variant-color;
+      to left,
+      var(--bg-color) $cutoff,
+      transparent $cutoff
+    );
+
+    &::before {
+      clip-path: inset(0 $cutoff 0 0);
+    }
   }
 
   .inline-kbd {

src/lib/components/layout/ActionList.svelte

@@ -19,13 +19,17 @@
   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

@@ -56,6 +56,84 @@ 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)
+  );
+}
+
+/**
+ * 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 +150,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

@@ -55,7 +55,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;
+  --bg-color: color-mix(
-  justify-content: center;
-  align-items: center;
-  margin-block: 6px;
-  border-radius: 4px;
-
-  //border: 1px solid currentcolor;
-  background: 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/routes/(app)/config/cv2/+page.svelte

@@ -4,13 +4,7 @@
   import { actionToValue } from "$lib/chord-editor/action-serializer";
   import { actionPlugin } from "$lib/chord-editor/action-plugin";
   import { delimPlugin } from "$lib/chord-editor/chord-delim-plugin";
-  import {
+  import { highlightActiveLine, keymap } from "@codemirror/view";
-    drawSelection,
-    dropCursor,
-    highlightActiveLine,
-    highlightSpecialChars,
-    keymap,
-  } from "@codemirror/view";
   import { history, standardKeymap } from "@codemirror/commands";
   import "$lib/chord-editor/chords.grammar";
   import {
@@ -18,20 +12,32 @@
     chordLanguageSupport,
   } from "$lib/chord-editor/chords-grammar-plugin";
   import { syntaxHighlighting } from "@codemirror/language";
-  import { autocompletion } from "@codemirror/autocomplete";
   import { persistentWritable } from "$lib/storage";
   import ActionList from "$lib/components/layout/ActionList.svelte";
+  import { actionAutocompletePlugin } from "$lib/chord-editor/autocomplete";
+  import {
+    actionLinter,
+    actionLinterDependencies,
+  } from "$lib/chord-editor/action-linter";
+  import { forceLinting } from "@codemirror/lint";
+  import { untrack } from "svelte";
+  import { splitCompound } from "$lib/serial/chord";
+
+  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 originalDoc = $derived(
     $chords
       .map((chord) => {
+        const [actions, compound] = splitCompound(chord.actions);
         return (
-          chord.actions
+          (compound
-            .filter((it) => it !== 0)
+            ? "<0x" + compound.toString(16).padStart(8, "0") + ">"
-            .map((it) => actionToValue(it))
+            : "") +
-            .join("") +
+          actions.map((it) => actionToValue(it)).join("") +
           "=>" +
           chord.phrase.map((it) => actionToValue(it)).join("")
         );
@@ -49,31 +55,60 @@
       extensions: [
         ...($rawCode ? [] : [delimPlugin, actionPlugin]),
         chordLanguageSupport(),
-        autocompletion({ icons: false, selectOnOpen: true }),
+        actionLinter,
+        // lineNumbers(),
+        actionAutocompletePlugin((query) => {
+          queryFilter = query;
+        }),
         history(),
-        dropCursor(),
         syntaxHighlighting(chordHighlightStyle),
         highlightActiveLine(),
-        drawSelection(),
+        // drawSelection(),
-        highlightSpecialChars(),
+        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": {
+            width: "100%",
+          },
+          ".cm-cursor": {
+            borderColor: "var(--md-sys-color-on-surface)",
+          },
+        }),
         keymap.of(standardKeymap),
       ],
     });
     return () => view.destroy();
   });
+
+  $effect(() => {
+    $actionLinterDependencies;
+    untrack(() => view && forceLinting(view));
+  });
 </script>
 
-<label><input type="checkbox" bind:checked={$rawCode} />View as code</label>
+<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={$showEdits} />Show edits</label>-->
+<label
+  ><input type="checkbox" bind:checked={$denseSpacing} />Dense Spacing</label
+>
 
 <div class="split">
-  <ActionList />
   <div
     class="editor"
     class:hide-edits={!$showEdits}
     class:raw={$rawCode}
+    class:dense-spacing={$denseSpacing}
     bind:this={editor}
   ></div>
+  <ActionList {queryFilter} ignoreIcon={$rawCode} />
 </div>
 
 <style lang="scss">
@@ -82,21 +117,17 @@
     gap: 1rem;
     height: 100%;
 
-    > :global(:first-child) {
+    > :global(:last-child) {
-      max-width: 600px;
+      width: min(600px, 30vw);
     }
   }
 
-  .editor:not(.raw) :global(.cm-line) {
-    width: fit-content;
-  }
-
   .editor :global(.cm-deletedChunk) {
     opacity: 0.2;
   }
 
   .editor {
-    min-width: 600px;
+    width: min(600px, 30vw);
     height: 100%;
     font-size: 16px;
 
@@ -122,6 +153,40 @@
       }
     }
 
+    &: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-invalid) {
+      color: var(--md-sys-color-error);
+      text-decoration-color: var(--md-sys-color-error);
+    }
+
     :global(.change-button) {
       height: 24px;
       font-size: 16px;
@@ -144,29 +209,20 @@
     }
 
     :global(.cm-gutters) {
-      border: none;
+      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-line) {
-      border-bottom: 1px solid transparent;
-      line-height: 3em;
-    }
-
-    :global(.cm-scroller) {
-      overflow: auto;
-      font-family: inherit !important;
-    }
-
-    :global(.cm-cursor) {
-      border-color: var(--md-sys-color-on-surface);
-    }
-
     :global(.cm-changedLine) {
       background-color: color-mix(
         in srgb,
@@ -182,17 +238,13 @@
 
     :global(.cm-activeLine) {
       border-bottom: 1px solid var(--md-sys-color-surface-variant);
-      /*background-color: color-mix(
-        in srgb,
-        var(--md-sys-color-surface-variant) 40%,
-        transparent
-      ) !important;*/
 
       &:not(.cm-changedLine) {
         background-color: transparent !important;
       }
     }
 
+    :global(::selection),
     :global(.cm-selectionBackground) {
       background-color: var(--md-sys-color-surface-variant) !important;
     }

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

@@ -0,0 +1,10 @@
+<script>
+  import { parseCharaChords } from "$lib/chord-editor/action-serializer";
+  import text from "$lib/chord-editor/test.txt?raw";
+  import { KEYMAP_IDS } from "$lib/serial/keymap-codes";
+</script>
+
+<pre>{text}</pre>
+{#each parseCharaChords(text, $KEYMAP_IDS) as chord}
+  <pre>{JSON.stringify(chord)} ({text.slice(chord.from, chord.to)})</pre>
+{/each}