feat: adjust chunking

refactor: remove old editor/chat/learn links

.github/workflows/build.yml

@@ -52,6 +52,8 @@ jobs:
 
       - name: Publish Branch
         if: ${{ !github.event.pull_request.head.repo.fork }}
-        run: rsync -rav --mkpath --delete build/ deploy@charachorder.io:/home/deploy/ref/${GITHUB_REF##*/}
+        env:
+          BRANCH_NAME: ${{ github.head_ref || github.ref_name }}
+        run: rsync -rav --mkpath --delete build/ deploy@charachorder.io:/home/deploy/ref/$BRANCH_NAME
       - name: Publish Commit
         run: rsync -rav --mkpath --delete build/ deploy@charachorder.io:/home/deploy/ref/${{ github.sha }}

icons.config.js

@@ -6,6 +6,7 @@ const config = {
   icons: [
     "rocket_launch",
     "deployed_code_update",
+    "difference",
     "adjust",
     "add",
     "piano",
@@ -57,6 +58,7 @@ const config = {
     "graphic_eq",
     "mail",
     "calculate",
+    "playground_2",
     "open_in_browser",
     "chevron_backward",
     "chevron_forward",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "charachorder-device-manager",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "license": "AGPL-3.0-or-later",
   "private": true,
   "engines": {
@@ -25,6 +25,7 @@
     "build:tauri": "tauri build",
     "tauri": "tauri",
     "test": "vitest run --coverage",
+    "test:chord-sync": "vitest chord-sync",
     "preview": "vite preview",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "minify-icons": "node src/tools/minify-icon-font.js",
@@ -41,6 +42,7 @@
     "@codemirror/language": "^6.12.1",
     "@codemirror/lint": "^6.9.2",
     "@codemirror/merge": "^6.11.2",
+    "@codemirror/search": "^6.6.0",
     "@codemirror/state": "^6.5.3",
     "@codemirror/view": "^6.39.9",
     "@fontsource-variable/material-symbols-rounded": "^5.2.30",
@@ -75,7 +77,6 @@
     "glob": "^11.0.3",
     "js-yaml": "^4.1.1",
     "jsdom": "^26.1.0",
-    "matrix-js-sdk": "^37.12.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.7.4",
     "prettier-plugin-css-order": "^2.2.0",

pnpm-lock.yaml

@@ -25,16 +25,19 @@ importers:
         version: 6.12.1
       '@codemirror/lint':
         specifier: ^6.9.2
-        version: 6.9.2
+        version: 6.9.3
       '@codemirror/merge':
         specifier: ^6.11.2
         version: 6.11.2
+      '@codemirror/search':
+        specifier: ^6.6.0
+        version: 6.6.0
       '@codemirror/state':
         specifier: ^6.5.3
-        version: 6.5.3
+        version: 6.5.4
       '@codemirror/view':
         specifier: ^6.39.9
-        version: 6.39.9
+        version: 6.39.11
       '@fontsource-variable/material-symbols-rounded':
         specifier: ^5.2.30
         version: 5.2.30
@@ -52,7 +55,7 @@ importers:
         version: 1.2.3
       '@lezer/lr':
         specifier: ^1.4.7
-        version: 1.4.7
+        version: 1.4.8
       '@material/material-color-utilities':
         specifier: ^0.3.0
         version: 0.3.0
@@ -64,16 +67,16 @@ importers:
         version: 0.86.6(svelte@5.46.1)
       '@modyfi/vite-plugin-yaml':
         specifier: ^1.1.1
-        version: 1.1.1(rollup@2.79.2)(vite@7.3.1(sass@1.97.2)(terser@5.44.1))
+        version: 1.1.1(rollup@2.79.2)(vite@7.3.1(sass@1.97.3)(terser@5.44.1))
       '@sveltejs/adapter-static':
         specifier: ^3.0.10
-        version: 3.0.10(@sveltejs/kit@2.49.3(@sveltejs/vite-plugin-svelte@6.2.3(svelte@5.46.1)(vite@7.3.1(sass@1.97.2)(terser@5.44.1)))(svelte@5.46.1)(typescript@5.9.3)(vite@7.3.1(sass@1.97.2)(terser@5.44.1)))
+        version: 3.0.10(@sveltejs/kit@2.50.1(@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.46.1)(vite@7.3.1(sass@1.97.3)(terser@5.44.1)))(svelte@5.46.1)(typescript@5.9.3)(vite@7.3.1(sass@1.97.3)(terser@5.44.1)))
       '@sveltejs/kit':
         specifier: ^2.49.3
-        version: 2.49.3(@sveltejs/vite-plugin-svelte@6.2.3(svelte@5.46.1)(vite@7.3.1(sass@1.97.2)(terser@5.44.1)))(svelte@5.46.1)(typescript@5.9.3)(vite@7.3.1(sass@1.97.2)(terser@5.44.1))
+        version: 2.50.1(@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.46.1)(vite@7.3.1(sass@1.97.3)(terser@5.44.1)))(svelte@5.46.1)(typescript@5.9.3)(vite@7.3.1(sass@1.97.3)(terser@5.44.1))
       '@sveltejs/vite-plugin-svelte':
         specifier: ^6.2.3
-        version: 6.2.3(svelte@5.46.1)(vite@7.3.1(sass@1.97.2)(terser@5.44.1))
+        version: 6.2.4(svelte@5.46.1)(vite@7.3.1(sass@1.97.3)(terser@5.44.1))
       '@tauri-apps/api':
         specifier: ^1.6.0
         version: 1.6.0
@@ -100,7 +103,7 @@ importers:
         version: 2023.10.7
       '@vite-pwa/sveltekit':
         specifier: ^1.1.0
-        version: 1.1.0(@sveltejs/kit@2.49.3(@sveltejs/vite-plugin-svelte@6.2.3(svelte@5.46.1)(vite@7.3.1(sass@1.97.2)(terser@5.44.1)))(svelte@5.46.1)(typescript@5.9.3)(vite@7.3.1(sass@1.97.2)(terser@5.44.1)))(vite@7.3.1(sass@1.97.2)(terser@5.44.1))(workbox-build@7.1.1)(workbox-window@7.4.0)
+        version: 1.1.0(@sveltejs/kit@2.50.1(@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.46.1)(vite@7.3.1(sass@1.97.3)(terser@5.44.1)))(svelte@5.46.1)(typescript@5.9.3)(vite@7.3.1(sass@1.97.3)(terser@5.44.1)))(vite@7.3.1(sass@1.97.3)(terser@5.44.1))(workbox-build@7.1.1)(workbox-window@7.4.0)
       autoprefixer:
         specifier: ^10.4.23
         version: 10.4.23(postcss@8.5.6)
@@ -131,9 +134,6 @@ importers:
       jsdom:
         specifier: ^26.1.0
         version: 26.1.0
-      matrix-js-sdk:
-        specifier: ^37.12.0
-        version: 37.12.0
       npm-run-all:
         specifier: ^4.1.5
         version: 4.1.5
@@ -151,7 +151,7 @@ importers:
         version: 7.8.2
       sass:
         specifier: ^1.97.2
-        version: 1.97.2
+        version: 1.97.3
       semver:
         specifier: ^7.7.3
         version: 7.7.3
@@ -181,7 +181,7 @@ importers:
         version: 4.3.5(picomatch@4.0.3)(svelte@5.46.1)(typescript@5.9.3)
       svelte-preprocess:
         specifier: ^6.0.3
-        version: 6.0.3(@babel/core@7.28.5)(postcss@8.5.6)(sass@1.97.2)(svelte@5.46.1)(typescript@5.9.3)
+        version: 6.0.3(@babel/core@7.28.5)(postcss@8.5.6)(sass@1.97.3)(svelte@5.46.1)(typescript@5.9.3)
       tippy.js:
         specifier: ^6.3.7
         version: 6.3.7
@@ -193,16 +193,16 @@ importers:
         version: 5.9.3
       vite:
         specifier: ^7.3.1
-        version: 7.3.1(sass@1.97.2)(terser@5.44.1)
+        version: 7.3.1(sass@1.97.3)(terser@5.44.1)
       vite-plugin-mkcert:
         specifier: ^1.17.9
-        version: 1.17.9(vite@7.3.1(sass@1.97.2)(terser@5.44.1))
+        version: 1.17.9(vite@7.3.1(sass@1.97.3)(terser@5.44.1))
       vite-plugin-pwa:
         specifier: ^1.2.0
-        version: 1.2.0(vite@7.3.1(sass@1.97.2)(terser@5.44.1))(workbox-build@7.1.1)(workbox-window@7.4.0)
+        version: 1.2.0(vite@7.3.1(sass@1.97.3)(terser@5.44.1))(workbox-build@7.1.1)(workbox-window@7.4.0)
       vitest:
         specifier: ^4.0.16
-        version: 4.0.16(jsdom@26.1.0)(sass@1.97.2)(terser@5.44.1)
+        version: 4.0.16(jsdom@26.1.0)(sass@1.97.3)(terser@5.44.1)
       web-serial-polyfill:
         specifier: ^1.0.15
         version: 1.0.15
@@ -712,10 +712,6 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0 || ^8.0.0-0 <8.0.0
 
-  '@babel/runtime@7.24.7':
-    resolution: {integrity: sha512-UwgBRMjJP+xv857DCngvqXI3Iq6J4v0wXmwc6sapg+zyhbwmQX67LUEFrkK5tbyJ30jGuG3ZvWpBiB9LCy1kWw==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/runtime@7.28.4':
     resolution: {integrity: sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==}
     engines: {node: '>=6.9.0'}
@@ -753,20 +749,20 @@ packages:
   '@codemirror/language@6.12.1':
     resolution: {integrity: sha512-Fa6xkSiuGKc8XC8Cn96T+TQHYj4ZZ7RdFmXA3i9xe/3hLHfwPZdM+dqfX0Cp0zQklBKhVD8Yzc8LS45rkqcwpQ==}
 
-  '@codemirror/lint@6.9.2':
-    resolution: {integrity: sha512-sv3DylBiIyi+xKwRCJAAsBZZZWo82shJ/RTMymLabAdtbkV5cSKwWDeCgtUq3v8flTaXS2y1kKkICuRYtUswyQ==}
+  '@codemirror/lint@6.9.3':
+    resolution: {integrity: sha512-y3YkYhdnhjDBAe0VIA0c4wVoFOvnp8CnAvfLqi0TqotIv92wIlAAP7HELOpLBsKwjAX6W92rSflA6an/2zBvXw==}
 
   '@codemirror/merge@6.11.2':
     resolution: {integrity: sha512-NO5EJd2rLRbwVWLgMdhIntDIhfDtMOKYEZgqV5WnkNUS2oXOCVWLPjG/kgl/Jth2fGiOuG947bteqxP9nBXmMg==}
 
-  '@codemirror/search@6.5.6':
-    resolution: {integrity: sha512-rpMgcsh7o0GuCDUXKPvww+muLA1pDJaFrpq/CCHtpQJYz8xopu4D1hPcKRoDD0YlF8gZaqTNIRa4VRBWyhyy7Q==}
+  '@codemirror/search@6.6.0':
+    resolution: {integrity: sha512-koFuNXcDvyyotWcgOnZGmY7LZqEOXZaaxD/j6n18TCLx2/9HieZJ5H6hs1g8FiRxBD0DNfs0nXn17g872RmYdw==}
 
-  '@codemirror/state@6.5.3':
-    resolution: {integrity: sha512-MerMzJzlXogk2fxWFU1nKp36bY5orBG59HnPiz0G9nLRebWa0zXuv2siH6PLIHBvv5TH8CkQRqjBs0MlxCZu+A==}
+  '@codemirror/state@6.5.4':
+    resolution: {integrity: sha512-8y7xqG/hpB53l25CIoit9/ngxdfoG+fx+V3SHBrinnhOtLvKHRyAJJuHzkWrR4YXXLX8eXBsejgAAxHUOdW1yw==}
 
-  '@codemirror/view@6.39.9':
-    resolution: {integrity: sha512-miGSIfBOKC1s2oHoa80dp+BjtsL8sXsrgGlQnQuOcfvaedcQUtqddTmKbJSDkLl4mkgPvZyXuKic2HDNYcJLYA==}
+  '@codemirror/view@6.39.11':
+    resolution: {integrity: sha512-bWdeR8gWM87l4DB/kYSF9A+dVackzDb/V56Tq7QVrQ7rn86W0rgZFtlL3g3pem6AeGcb9NQNoy3ao4WpW4h5tQ==}
 
   '@csstools/color-helpers@5.0.2':
     resolution: {integrity: sha512-JqWH1vsgdGcw2RR6VliXXdA0/59LttzlU8UlRT/iUUsEeWfYq8I+K0yhihEUTTHLRm1EXvpsCx3083EU15ecsA==}
@@ -1063,8 +1059,8 @@ packages:
   '@lezer/javascript@1.4.17':
     resolution: {integrity: sha512-bYW4ctpyGK+JMumDApeUzuIezX01H76R1foD6LcRX224FWfyYit/HYxiPGDjXXe/wQWASjCvVGoukTH68+0HIA==}
 
-  '@lezer/lr@1.4.7':
-    resolution: {integrity: sha512-wNIFWdSUfX9Jc6ePMzxSPVgTVB4EOfDIwLQLWASyiUdHKaMsiilj9bYiGkGQCKVodd0x6bgQCV207PILGFCF9Q==}
+  '@lezer/lr@1.4.8':
+    resolution: {integrity: sha512-bPWa0Pgx69ylNlMlPvBPryqeLYQjyJjqPx+Aupm5zydLIF3NE+6MMLT8Yi23Bd9cif9VS00aUebn+6fDIGBcDA==}
 
   '@marijn/find-cluster-break@1.0.2':
     resolution: {integrity: sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==}
@@ -1072,10 +1068,6 @@ packages:
   '@material/material-color-utilities@0.3.0':
     resolution: {integrity: sha512-ztmtTd6xwnuh2/xu+Vb01btgV8SQWYCaK56CkRK8gEkWe5TuDyBcYJ0wgkMRn+2VcE9KUmhvkz+N9GHrqw/C0g==}
 
-  '@matrix-org/matrix-sdk-crypto-wasm@15.1.0':
-    resolution: {integrity: sha512-ZsDdjn46J3+VxsDLmaSODuS+qtGZB/i3Cg9tWL1QPNjvAWzNaTHQ7glleByI2PKVBm83aklfuhGKT2MqE1ZsEA==}
-    engines: {node: '>= 18'}
-
   '@melt-ui/pp@0.3.2':
     resolution: {integrity: sha512-xKkPvaIAFinklLXcQOpwZ8YSpqAFxykjWf8Y/fSJQwsixV/0rcFs07hJ49hJjPy5vItvw5Qa0uOjzFUbXzBypQ==}
     peerDependencies:
@@ -1369,8 +1361,8 @@ packages:
     peerDependencies:
       '@sveltejs/kit': ^2.0.0
 
-  '@sveltejs/kit@2.49.3':
-    resolution: {integrity: sha512-luTmE2Isk9GRJnitqanLoByKBiyLdfLpV2qV9a25JMxjbQt919TVqG8pibJDkxTvX9+w2k/9IL7o+/RtG++3QA==}
+  '@sveltejs/kit@2.50.1':
+    resolution: {integrity: sha512-XRHD2i3zC4ukhz2iCQzO4mbsts081PAZnnMAQ7LNpWeYgeBmwMsalf0FGSwhFXBbtr2XViPKnFJBDCckWqrsLw==}
     engines: {node: '>=18.13'}
     hasBin: true
     peerDependencies:
@@ -1393,8 +1385,8 @@ packages:
       svelte: ^5.0.0
       vite: ^6.3.0 || ^7.0.0
 
-  '@sveltejs/vite-plugin-svelte@6.2.3':
-    resolution: {integrity: sha512-a+uxqQ9j6Lxmq4plbGaNdM9hgDCZyxAv/yvuyF5iWoA2H5icZkqD3rdK155ZQgFLX2lc3NvahHG4OgKpYqYPiQ==}
+  '@sveltejs/vite-plugin-svelte@6.2.4':
+    resolution: {integrity: sha512-ou/d51QSdTyN26D7h6dSpusAKaZkAiGM55/AKYi+9AGZw7q85hElbjK3kEyzXHhLSnRISHOYzVge6x0jRZ7DXA==}
     engines: {node: ^20.19 || ^22.12 || >=24}
     peerDependencies:
       svelte: ^5.0.0
@@ -1496,9 +1488,6 @@ packages:
   '@types/estree@1.0.8':
     resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
 
-  '@types/events@3.0.3':
-    resolution: {integrity: sha512-trOc4AAUThEz9hapPtSd7wf5tiQKvTtu5b371UxXdTuqzIh0ArcRspRP0i0Viu+LXstIQ1z96t1nsPxT9ol01g==}
-
   '@types/js-yaml@4.0.9':
     resolution: {integrity: sha512-k4MGaQl5TGo/iipqb2UDG2UwjXziSWkh0uysQelTlJpX1qGlpUZYm8PnO4DxG1qBomtJUdYJ6qR6xdIah10JLg==}
 
@@ -1508,9 +1497,6 @@ packages:
   '@types/resolve@1.20.2':
     resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
 
-  '@types/retry@0.12.0':
-    resolution: {integrity: sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==}
-
   '@types/semver@7.7.1':
     resolution: {integrity: sha512-FmgJfu+MOcQ370SD0ev7EI8TlCAfKYU+B4m5T3yXc1CiRN94g/SZPtsCkk506aUDtlMnFZvasDwHHUcZUEaYuA==}
 
@@ -1593,9 +1579,6 @@ packages:
   ajv@8.17.1:
     resolution: {integrity: sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==}
 
-  another-json@0.2.0:
-    resolution: {integrity: sha512-/Ndrl68UQLhnCdsAzEXLMFuOR546o2qbYRqCglaNHbjXrwG1ayTcdwr3zkSGOGtGXDyR5X9nCFfnyG2AFJIsqg==}
-
   ansi-colors@4.1.3:
     resolution: {integrity: sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==}
     engines: {node: '>=6'}
@@ -1730,9 +1713,6 @@ packages:
   balanced-match@2.0.0:
     resolution: {integrity: sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==}
 
-  base-x@5.0.0:
-    resolution: {integrity: sha512-sMW3VGSX1QWVFA6l8U62MLKz29rRfpTlYdCqLdpLo1/Yd4zZwSbnUaDfciIAowAqvq7YFnWq9hrhdg1KYgc1lQ==}
-
   base64-js@1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
 
@@ -1767,9 +1747,6 @@ packages:
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
 
-  bs58@6.0.0:
-    resolution: {integrity: sha512-PD0wEnEYg6ijszw/u8s+iI3H17cTymlrwkKhDhPZq+Sokl3AU4htyBFTjAeNAlCCmg0f53g6ih3jATyCKftTfw==}
-
   buffer-crc32@0.2.13:
     resolution: {integrity: sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==}
 
@@ -1908,10 +1885,6 @@ packages:
   concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
-  content-type@1.0.5:
-    resolution: {integrity: sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==}
-    engines: {node: '>= 0.6'}
-
   convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
@@ -2221,6 +2194,9 @@ packages:
   devalue@5.6.1:
     resolution: {integrity: sha512-jDwizj+IlEZBunHcOuuFVBnIMPAEHvTsJj0BcIp94xYguLRVBcXO853px/MyIJvbVzWdsGvrRweIUWJw8hBP7A==}
 
+  devalue@5.6.2:
+    resolution: {integrity: sha512-nPRkjWzzDQlsejL1WVifk5rvcFi/y1onBRxjaFMjZeR9mFpqu2gmAZ9xUB9/IEanEP/vBtGeGganC/GO1fmufg==}
+
   dfa@1.2.0:
     resolution: {integrity: sha512-ED3jP8saaweFTjeGX8HQPjeC1YYyZs98jGNZx6IiBvxW7JG5v492kamAQB3m2wop07CvU/RQmzcKr6bgcC5D/Q==}
 
@@ -2356,8 +2332,8 @@ packages:
   esptool-js@0.5.7:
     resolution: {integrity: sha512-k3pkXU9OTySCd58OUDjuJWNnFjM+QpPWAghxyWPm3zNfaLiP4ex2jNd7Rj0jWPu3/fgvwau236tetsTZrh4x5g==}
 
-  esrap@2.2.1:
-    resolution: {integrity: sha512-GiYWG34AN/4CUyaWAgunGt0Rxvr1PTMlGC0vvEov/uOQYWne2bpN03Um+k8jT+q3op33mKouP2zeJ6OlM+qeUg==}
+  esrap@2.2.2:
+    resolution: {integrity: sha512-zA6497ha+qKvoWIK+WM9NAh5ni17sKZKhbS5B3PoYbBvaYHZWoS33zmFybmyqpn07RLUxSmn+RCls2/XF+d0oQ==}
 
   estree-walker@1.0.1:
     resolution: {integrity: sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==}
@@ -2375,10 +2351,6 @@ packages:
   eventemitter2@6.4.7:
     resolution: {integrity: sha512-tYUSVOGeQPKt/eC1ABfhHy5Xd96N3oIijJvN3O9+TsC28T5V9yX9oEfEK5faP0EFSNVOG97qtAS68GBrQB2hDg==}
 
-  events@3.3.0:
-    resolution: {integrity: sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==}
-    engines: {node: '>=0.8.x'}
-
   execa@4.1.0:
     resolution: {integrity: sha512-j5W0//W7f8UxAn8hXVnwG8tLwdiUy4FJLcSupCg6maBYZDpyBvTApK7KyuI4bKj8KOh1r2YH+6ucuYtJv1bTZA==}
     engines: {node: '>=10'}
@@ -3034,10 +3006,6 @@ packages:
     resolution: {integrity: sha512-gqXddjPqQ6G40VdnI6T6yObEC+pDNvyP95wdQhkWkg7crHH3km5qP1FsOXEkzEQwnz6gz5qGTn1c2Y52wP3OyQ==}
     engines: {'0': node >=0.6.0}
 
-  jwt-decode@4.0.0:
-    resolution: {integrity: sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==}
-    engines: {node: '>=18'}
-
   keyv@5.5.5:
     resolution: {integrity: sha512-FA5LmZVF1VziNc0bIdCSA1IoSVnDCqE8HJIZZv2/W8YmoAM50+tnUgJR/gQZwEeIMleuIOnRnHA/UaZRNeV4iQ==}
 
@@ -3108,10 +3076,6 @@ packages:
     resolution: {integrity: sha512-9fkkDevMefjg0mmzWFBW8YkFP91OrizzkW3diF7CpG+S2EYdy4+TVfGwz1zeF8x7hCx1ovSPTOE9Ngib74qqUg==}
     engines: {node: '>=10'}
 
-  loglevel@1.9.2:
-    resolution: {integrity: sha512-HgMmCqIJSAKqo68l0rS2AanEWfkxaZ5wNiEFb5ggm08lDs9Xl2KxBlX3PTcaD2chBM1gXAYf491/M2Rv8Jwayg==}
-    engines: {node: '>= 0.6.0'}
-
   lru-cache@10.4.3:
     resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
 
@@ -3138,16 +3102,6 @@ packages:
   mathml-tag-names@2.1.3:
     resolution: {integrity: sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==}
 
-  matrix-events-sdk@0.0.1:
-    resolution: {integrity: sha512-1QEOsXO+bhyCroIe2/A5OwaxHvBm7EsSQ46DEDn8RBIfQwN5HWBpFvyWWR4QY0KHPPnnJdI99wgRiAl7Ad5qaA==}
-
-  matrix-js-sdk@37.12.0:
-    resolution: {integrity: sha512-2JSTMtvACE4egrBPp0ZQ7fSxBXcX6xuHcQSjcoBiBxFL7W0SZCl4qsNl30pBshDTe5wARAByzIHEMv6bGVKKNA==}
-    engines: {node: '>=22.0.0'}
-
-  matrix-widget-api@1.13.1:
-    resolution: {integrity: sha512-mkOHUVzaN018TCbObfGOSaMW2GoUxOfcxNNlTVx5/HeMk3OSQPQM0C9oEME5Liiv/dBUoSrEB64V8wF7e/gb1w==}
-
   mdn-data@2.12.2:
     resolution: {integrity: sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==}
 
@@ -3278,10 +3232,6 @@ packages:
   obug@2.1.1:
     resolution: {integrity: sha512-uTqF9MuPraAQ+IsnPf366RG4cP9RtUi7MLO1N3KEc+wb0a6yKpeL0lmk2IB1jY5KHPAlTc6T/JRdC/YqxHNwkQ==}
 
-  oidc-client-ts@3.0.1:
-    resolution: {integrity: sha512-xX8unZNtmtw3sOz4FPSqDhkLFnxCDsdo2qhFEH2opgWnF/iXMFoYdBQzkwCxAZVgt3FT3DnuBY3k80EZHT0RYg==}
-    engines: {node: '>=18'}
-
   once@1.4.0:
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
 
@@ -3300,10 +3250,6 @@ packages:
     resolution: {integrity: sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==}
     engines: {node: '>=10'}
 
-  p-retry@4.6.2:
-    resolution: {integrity: sha512-312Id396EbJdvRONlngUx0NydfrIQ5lsYu0znKVUzVvArzEIt08V1qhtyESbGVd1FGX7UKtiFp5uwKZdM8wIuQ==}
-    engines: {node: '>=8'}
-
   package-json-from-dist@1.0.0:
     resolution: {integrity: sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw==}
 
@@ -3516,9 +3462,6 @@ packages:
   regenerate@1.4.2:
     resolution: {integrity: sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==}
 
-  regenerator-runtime@0.14.1:
-    resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
-
   regexp.prototype.flags@1.5.2:
     resolution: {integrity: sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==}
     engines: {node: '>= 0.4'}
@@ -3569,10 +3512,6 @@ packages:
   restructure@3.0.2:
     resolution: {integrity: sha512-gSfoiOEA0VPE6Tukkrr7I0RBdE0s7H1eFCDBk05l1KIQT1UIKNc5JZy6jdyW6eYH3aR3g5b3PuL77rq0hvwtAw==}
 
-  retry@0.13.1:
-    resolution: {integrity: sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==}
-    engines: {node: '>= 4'}
-
   reusify@1.0.4:
     resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
@@ -3635,8 +3574,8 @@ packages:
   safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
-  sass@1.97.2:
-    resolution: {integrity: sha512-y5LWb0IlbO4e97Zr7c3mlpabcbBtS+ieiZ9iwDooShpFKWXf62zz5pEPdwrLYm+Bxn1fnbwFGzHuCLSA9tBmrw==}
+  sass@1.97.3:
+    resolution: {integrity: sha512-fDz1zJpd5GycprAbu4Q2PV/RprsRtKC/0z82z0JLgdytmcq0+ujJbJ/09bPGDxCLkKY3Np5cRAOcWiVkLXJURg==}
     engines: {node: '>=14.0.0'}
     hasBin: true
 
@@ -3644,10 +3583,6 @@ packages:
     resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
     engines: {node: '>=v12.22.7'}
 
-  sdp-transform@2.14.2:
-    resolution: {integrity: sha512-icY6jVao7MfKCieyo1AyxFYm1baiM+fA00qW/KrNNVlkxHAd34riEKuEkUe4bBb3gJwLJZM+xT60Yj1QL8rHiA==}
-    hasBin: true
-
   semver@5.7.2:
     resolution: {integrity: sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==}
     hasBin: true
@@ -4163,9 +4098,6 @@ packages:
   undici-types@5.26.5:
     resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==}
 
-  unhomoglyph@1.0.6:
-    resolution: {integrity: sha512-7uvcWI3hWshSADBu4JpnyYbTVc7YlhF5GDW/oPD5AxIxl34k4wXR3WDkPnzLxkN32LiTCTKMQLtKVZiwki3zGg==}
-
   unicode-canonical-property-names-ecmascript@2.0.1:
     resolution: {integrity: sha512-dA8WbNeb2a6oQzAQ55YlT5vQAWGV9WXOsi3SskE3bcCdM0P4SDd+24zS/OCacdRq5BkdsRj9q3Pg6YyQoxIGqg==}
     engines: {node: '>=4'}
@@ -4216,10 +4148,6 @@ packages:
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
-  uuid@11.1.0:
-    resolution: {integrity: sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==}
-    hasBin: true
-
   uuid@8.3.2:
     resolution: {integrity: sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==}
     hasBin: true
@@ -5178,10 +5106,6 @@ snapshots:
       '@babel/types': 7.28.5
       esutils: 2.0.3
 
-  '@babel/runtime@7.24.7':
-    dependencies:
-      regenerator-runtime: 0.14.1
-
   '@babel/runtime@7.28.4': {}
 
   '@babel/template@7.27.2':
@@ -5222,67 +5146,67 @@ snapshots:
   '@codemirror/autocomplete@6.20.0':
     dependencies:
       '@codemirror/language': 6.12.1
-      '@codemirror/state': 6.5.3
-      '@codemirror/view': 6.39.9
+      '@codemirror/state': 6.5.4
+      '@codemirror/view': 6.39.11
       '@lezer/common': 1.5.0
 
   '@codemirror/collab@6.1.1':
     dependencies:
-      '@codemirror/state': 6.5.3
+      '@codemirror/state': 6.5.4
 
   '@codemirror/commands@6.10.1':
     dependencies:
       '@codemirror/language': 6.12.1
-      '@codemirror/state': 6.5.3
-      '@codemirror/view': 6.39.9
+      '@codemirror/state': 6.5.4
+      '@codemirror/view': 6.39.11
       '@lezer/common': 1.5.0
 
   '@codemirror/lang-javascript@6.2.4':
     dependencies:
       '@codemirror/autocomplete': 6.20.0
       '@codemirror/language': 6.12.1
-      '@codemirror/lint': 6.9.2
-      '@codemirror/state': 6.5.3
-      '@codemirror/view': 6.39.9
+      '@codemirror/lint': 6.9.3
+      '@codemirror/state': 6.5.4
+      '@codemirror/view': 6.39.11
       '@lezer/common': 1.5.0
       '@lezer/javascript': 1.4.17
 
   '@codemirror/language@6.12.1':
     dependencies:
-      '@codemirror/state': 6.5.3
-      '@codemirror/view': 6.39.9
+      '@codemirror/state': 6.5.4
+      '@codemirror/view': 6.39.11
       '@lezer/common': 1.5.0
       '@lezer/highlight': 1.2.3
-      '@lezer/lr': 1.4.7
+      '@lezer/lr': 1.4.8
       style-mod: 4.1.2
 
-  '@codemirror/lint@6.9.2':
+  '@codemirror/lint@6.9.3':
     dependencies:
-      '@codemirror/state': 6.5.3
-      '@codemirror/view': 6.39.9
+      '@codemirror/state': 6.5.4
+      '@codemirror/view': 6.39.11
       crelt: 1.0.6
 
   '@codemirror/merge@6.11.2':
     dependencies:
       '@codemirror/language': 6.12.1
-      '@codemirror/state': 6.5.3
-      '@codemirror/view': 6.39.9
+      '@codemirror/state': 6.5.4
+      '@codemirror/view': 6.39.11
       '@lezer/highlight': 1.2.3
       style-mod: 4.1.2
 
-  '@codemirror/search@6.5.6':
+  '@codemirror/search@6.6.0':
     dependencies:
-      '@codemirror/state': 6.5.3
-      '@codemirror/view': 6.39.9
+      '@codemirror/state': 6.5.4
+      '@codemirror/view': 6.39.11
       crelt: 1.0.6
 
-  '@codemirror/state@6.5.3':
+  '@codemirror/state@6.5.4':
     dependencies:
       '@marijn/find-cluster-break': 1.0.2
 
-  '@codemirror/view@6.39.9':
+  '@codemirror/view@6.39.11':
     dependencies:
-      '@codemirror/state': 6.5.3
+      '@codemirror/state': 6.5.4
       crelt: 1.0.6
       style-mod: 4.1.2
       w3c-keyname: 2.2.8
@@ -5505,7 +5429,7 @@ snapshots:
   '@lezer/generator@1.8.0':
     dependencies:
       '@lezer/common': 1.5.0
-      '@lezer/lr': 1.4.7
+      '@lezer/lr': 1.4.8
 
   '@lezer/highlight@1.2.3':
     dependencies:
@@ -5515,9 +5439,9 @@ snapshots:
     dependencies:
       '@lezer/common': 1.5.0
       '@lezer/highlight': 1.2.3
-      '@lezer/lr': 1.4.7
+      '@lezer/lr': 1.4.8
 
-  '@lezer/lr@1.4.7':
+  '@lezer/lr@1.4.8':
     dependencies:
       '@lezer/common': 1.5.0
 
@@ -5525,8 +5449,6 @@ snapshots:
 
   '@material/material-color-utilities@0.3.0': {}
 
-  '@matrix-org/matrix-sdk-crypto-wasm@15.1.0': {}
-
   '@melt-ui/pp@0.3.2(@melt-ui/svelte@0.86.6(svelte@5.46.1))(svelte@5.46.1)':
     dependencies:
       '@melt-ui/svelte': 0.86.6(svelte@5.46.1)
@@ -5544,12 +5466,12 @@ snapshots:
       nanoid: 5.0.7
       svelte: 5.46.1
 
-  '@modyfi/vite-plugin-yaml@1.1.1(rollup@2.79.2)(vite@7.3.1(sass@1.97.2)(terser@5.44.1))':
+  '@modyfi/vite-plugin-yaml@1.1.1(rollup@2.79.2)(vite@7.3.1(sass@1.97.3)(terser@5.44.1))':
     dependencies:
       '@rollup/pluginutils': 5.1.0(rollup@2.79.2)
       js-yaml: 4.1.0
       tosource: 2.0.0-alpha.3
-      vite: 7.3.1(sass@1.97.2)(terser@5.44.1)
+      vite: 7.3.1(sass@1.97.3)(terser@5.44.1)
     transitivePeerDependencies:
       - rollup
 
@@ -5761,19 +5683,19 @@ snapshots:
     dependencies:
       acorn: 8.15.0
 
-  '@sveltejs/adapter-static@3.0.10(@sveltejs/kit@2.49.3(@sveltejs/vite-plugin-svelte@6.2.3(svelte@5.46.1)(vite@7.3.1(sass@1.97.2)(terser@5.44.1)))(svelte@5.46.1)(typescript@5.9.3)(vite@7.3.1(sass@1.97.2)(terser@5.44.1)))':
+  '@sveltejs/adapter-static@3.0.10(@sveltejs/kit@2.50.1(@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.46.1)(vite@7.3.1(sass@1.97.3)(terser@5.44.1)))(svelte@5.46.1)(typescript@5.9.3)(vite@7.3.1(sass@1.97.3)(terser@5.44.1)))':
     dependencies:
-      '@sveltejs/kit': 2.49.3(@sveltejs/vite-plugin-svelte@6.2.3(svelte@5.46.1)(vite@7.3.1(sass@1.97.2)(terser@5.44.1)))(svelte@5.46.1)(typescript@5.9.3)(vite@7.3.1(sass@1.97.2)(terser@5.44.1))
+      '@sveltejs/kit': 2.50.1(@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.46.1)(vite@7.3.1(sass@1.97.3)(terser@5.44.1)))(svelte@5.46.1)(typescript@5.9.3)(vite@7.3.1(sass@1.97.3)(terser@5.44.1))
 
-  '@sveltejs/kit@2.49.3(@sveltejs/vite-plugin-svelte@6.2.3(svelte@5.46.1)(vite@7.3.1(sass@1.97.2)(terser@5.44.1)))(svelte@5.46.1)(typescript@5.9.3)(vite@7.3.1(sass@1.97.2)(terser@5.44.1))':
+  '@sveltejs/kit@2.50.1(@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.46.1)(vite@7.3.1(sass@1.97.3)(terser@5.44.1)))(svelte@5.46.1)(typescript@5.9.3)(vite@7.3.1(sass@1.97.3)(terser@5.44.1))':
     dependencies:
       '@standard-schema/spec': 1.1.0
       '@sveltejs/acorn-typescript': 1.0.5(acorn@8.15.0)
-      '@sveltejs/vite-plugin-svelte': 6.2.3(svelte@5.46.1)(vite@7.3.1(sass@1.97.2)(terser@5.44.1))
+      '@sveltejs/vite-plugin-svelte': 6.2.4(svelte@5.46.1)(vite@7.3.1(sass@1.97.3)(terser@5.44.1))
       '@types/cookie': 0.6.0
       acorn: 8.15.0
       cookie: 0.6.0
-      devalue: 5.6.1
+      devalue: 5.6.2
       esm-env: 1.2.2
       kleur: 4.1.5
       magic-string: 0.30.21
@@ -5782,28 +5704,28 @@ snapshots:
       set-cookie-parser: 2.6.0
       sirv: 3.0.0
       svelte: 5.46.1
-      vite: 7.3.1(sass@1.97.2)(terser@5.44.1)
+      vite: 7.3.1(sass@1.97.3)(terser@5.44.1)
     optionalDependencies:
       typescript: 5.9.3
 
-  '@sveltejs/vite-plugin-svelte-inspector@5.0.0(@sveltejs/vite-plugin-svelte@6.2.3(svelte@5.46.1)(vite@7.3.1(sass@1.97.2)(terser@5.44.1)))(svelte@5.46.1)(vite@7.3.1(sass@1.97.2)(terser@5.44.1))':
+  '@sveltejs/vite-plugin-svelte-inspector@5.0.0(@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.46.1)(vite@7.3.1(sass@1.97.3)(terser@5.44.1)))(svelte@5.46.1)(vite@7.3.1(sass@1.97.3)(terser@5.44.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 6.2.3(svelte@5.46.1)(vite@7.3.1(sass@1.97.2)(terser@5.44.1))
+      '@sveltejs/vite-plugin-svelte': 6.2.4(svelte@5.46.1)(vite@7.3.1(sass@1.97.3)(terser@5.44.1))
       debug: 4.4.3
       svelte: 5.46.1
-      vite: 7.3.1(sass@1.97.2)(terser@5.44.1)
+      vite: 7.3.1(sass@1.97.3)(terser@5.44.1)
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte@6.2.3(svelte@5.46.1)(vite@7.3.1(sass@1.97.2)(terser@5.44.1))':
+  '@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.46.1)(vite@7.3.1(sass@1.97.3)(terser@5.44.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 5.0.0(@sveltejs/vite-plugin-svelte@6.2.3(svelte@5.46.1)(vite@7.3.1(sass@1.97.2)(terser@5.44.1)))(svelte@5.46.1)(vite@7.3.1(sass@1.97.2)(terser@5.44.1))
+      '@sveltejs/vite-plugin-svelte-inspector': 5.0.0(@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.46.1)(vite@7.3.1(sass@1.97.3)(terser@5.44.1)))(svelte@5.46.1)(vite@7.3.1(sass@1.97.3)(terser@5.44.1))
       deepmerge: 4.3.1
       magic-string: 0.30.21
       obug: 2.1.1
       svelte: 5.46.1
-      vite: 7.3.1(sass@1.97.2)(terser@5.44.1)
-      vitefu: 1.1.1(vite@7.3.1(sass@1.97.2)(terser@5.44.1))
+      vite: 7.3.1(sass@1.97.3)(terser@5.44.1)
+      vitefu: 1.1.1(vite@7.3.1(sass@1.97.3)(terser@5.44.1))
     transitivePeerDependencies:
       - supports-color
 
@@ -5876,8 +5798,6 @@ snapshots:
 
   '@types/estree@1.0.8': {}
 
-  '@types/events@3.0.3': {}
-
   '@types/js-yaml@4.0.9': {}
 
   '@types/node@20.14.10':
@@ -5887,8 +5807,6 @@ snapshots:
 
   '@types/resolve@1.20.2': {}
 
-  '@types/retry@0.12.0': {}
-
   '@types/semver@7.7.1': {}
 
   '@types/sinonjs__fake-timers@8.1.1': {}
@@ -5908,12 +5826,12 @@ snapshots:
       '@types/node': 20.14.10
     optional: true
 
-  '@vite-pwa/sveltekit@1.1.0(@sveltejs/kit@2.49.3(@sveltejs/vite-plugin-svelte@6.2.3(svelte@5.46.1)(vite@7.3.1(sass@1.97.2)(terser@5.44.1)))(svelte@5.46.1)(typescript@5.9.3)(vite@7.3.1(sass@1.97.2)(terser@5.44.1)))(vite@7.3.1(sass@1.97.2)(terser@5.44.1))(workbox-build@7.1.1)(workbox-window@7.4.0)':
+  '@vite-pwa/sveltekit@1.1.0(@sveltejs/kit@2.50.1(@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.46.1)(vite@7.3.1(sass@1.97.3)(terser@5.44.1)))(svelte@5.46.1)(typescript@5.9.3)(vite@7.3.1(sass@1.97.3)(terser@5.44.1)))(vite@7.3.1(sass@1.97.3)(terser@5.44.1))(workbox-build@7.1.1)(workbox-window@7.4.0)':
     dependencies:
-      '@sveltejs/kit': 2.49.3(@sveltejs/vite-plugin-svelte@6.2.3(svelte@5.46.1)(vite@7.3.1(sass@1.97.2)(terser@5.44.1)))(svelte@5.46.1)(typescript@5.9.3)(vite@7.3.1(sass@1.97.2)(terser@5.44.1))
+      '@sveltejs/kit': 2.50.1(@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.46.1)(vite@7.3.1(sass@1.97.3)(terser@5.44.1)))(svelte@5.46.1)(typescript@5.9.3)(vite@7.3.1(sass@1.97.3)(terser@5.44.1))
       kolorist: 1.8.0
       tinyglobby: 0.2.14
-      vite-plugin-pwa: 1.2.0(vite@7.3.1(sass@1.97.2)(terser@5.44.1))(workbox-build@7.1.1)(workbox-window@7.4.0)
+      vite-plugin-pwa: 1.2.0(vite@7.3.1(sass@1.97.3)(terser@5.44.1))(workbox-build@7.1.1)(workbox-window@7.4.0)
     transitivePeerDependencies:
       - supports-color
       - vite
@@ -5929,13 +5847,13 @@ snapshots:
       chai: 6.2.1
       tinyrainbow: 3.0.3
 
-  '@vitest/mocker@4.0.16(vite@7.3.1(sass@1.97.2)(terser@5.44.1))':
+  '@vitest/mocker@4.0.16(vite@7.3.1(sass@1.97.3)(terser@5.44.1))':
     dependencies:
       '@vitest/spy': 4.0.16
       estree-walker: 3.0.3
       magic-string: 0.30.21
     optionalDependencies:
-      vite: 7.3.1(sass@1.97.2)(terser@5.44.1)
+      vite: 7.3.1(sass@1.97.3)(terser@5.44.1)
 
   '@vitest/pretty-format@4.0.16':
     dependencies:
@@ -5982,8 +5900,6 @@ snapshots:
       json-schema-traverse: 1.0.0
       require-from-string: 2.0.2
 
-  another-json@0.2.0: {}
-
   ansi-colors@4.1.3: {}
 
   ansi-escapes@4.3.2:
@@ -6118,8 +6034,6 @@ snapshots:
 
   balanced-match@2.0.0: {}
 
-  base-x@5.0.0: {}
-
   base64-js@1.5.1: {}
 
   baseline-browser-mapping@2.9.10: {}
@@ -6157,10 +6071,6 @@ snapshots:
       node-releases: 2.0.27
       update-browserslist-db: 1.2.3(browserslist@4.28.1)
 
-  bs58@6.0.0:
-    dependencies:
-      base-x: 5.0.0
-
   buffer-crc32@0.2.13: {}
 
   buffer-from@1.1.2: {}
@@ -6258,10 +6168,10 @@ snapshots:
       '@codemirror/autocomplete': 6.20.0
       '@codemirror/commands': 6.10.1
       '@codemirror/language': 6.12.1
-      '@codemirror/lint': 6.9.2
-      '@codemirror/search': 6.5.6
-      '@codemirror/state': 6.5.3
-      '@codemirror/view': 6.39.9
+      '@codemirror/lint': 6.9.3
+      '@codemirror/search': 6.6.0
+      '@codemirror/state': 6.5.4
+      '@codemirror/view': 6.39.11
 
   color-convert@1.9.3:
     dependencies:
@@ -6296,8 +6206,6 @@ snapshots:
 
   concat-map@0.0.1: {}
 
-  content-type@1.0.5: {}
-
   convert-source-map@2.0.0: {}
 
   cookie@0.6.0: {}
@@ -6660,6 +6568,8 @@ snapshots:
 
   devalue@5.6.1: {}
 
+  devalue@5.6.2: {}
+
   dfa@1.2.0: {}
 
   dir-glob@3.0.1:
@@ -6928,7 +6838,7 @@ snapshots:
       pako: 2.1.0
       tslib: 2.6.3
 
-  esrap@2.2.1:
+  esrap@2.2.2:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
 
@@ -6944,8 +6854,6 @@ snapshots:
 
   eventemitter2@6.4.7: {}
 
-  events@3.3.0: {}
-
   execa@4.1.0:
     dependencies:
       cross-spawn: 7.0.3
@@ -7635,8 +7543,6 @@ snapshots:
       json-schema: 0.4.0
       verror: 1.10.0
 
-  jwt-decode@4.0.0: {}
-
   keyv@5.5.5:
     dependencies:
       '@keyv/serialize': 1.1.1
@@ -7701,8 +7607,6 @@ snapshots:
       slice-ansi: 4.0.0
       wrap-ansi: 6.2.0
 
-  loglevel@1.9.2: {}
-
   lru-cache@10.4.3: {}
 
   lru-cache@11.0.0: {}
@@ -7727,30 +7631,6 @@ snapshots:
 
   mathml-tag-names@2.1.3: {}
 
-  matrix-events-sdk@0.0.1: {}
-
-  matrix-js-sdk@37.12.0:
-    dependencies:
-      '@babel/runtime': 7.24.7
-      '@matrix-org/matrix-sdk-crypto-wasm': 15.1.0
-      another-json: 0.2.0
-      bs58: 6.0.0
-      content-type: 1.0.5
-      jwt-decode: 4.0.0
-      loglevel: 1.9.2
-      matrix-events-sdk: 0.0.1
-      matrix-widget-api: 1.13.1
-      oidc-client-ts: 3.0.1
-      p-retry: 4.6.2
-      sdp-transform: 2.14.2
-      unhomoglyph: 1.0.6
-      uuid: 11.1.0
-
-  matrix-widget-api@1.13.1:
-    dependencies:
-      '@types/events': 3.0.3
-      events: 3.3.0
-
   mdn-data@2.12.2: {}
 
   mdn-data@2.23.0: {}
@@ -7862,10 +7742,6 @@ snapshots:
 
   obug@2.1.1: {}
 
-  oidc-client-ts@3.0.1:
-    dependencies:
-      jwt-decode: 4.0.0
-
   once@1.4.0:
     dependencies:
       wrappy: 1.0.2
@@ -7886,11 +7762,6 @@ snapshots:
     dependencies:
       aggregate-error: 3.1.0
 
-  p-retry@4.6.2:
-    dependencies:
-      '@types/retry': 0.12.0
-      retry: 0.13.1
-
   package-json-from-dist@1.0.0: {}
 
   pako@0.2.9: {}
@@ -8070,8 +7941,6 @@ snapshots:
 
   regenerate@1.4.2: {}
 
-  regenerator-runtime@0.14.1: {}
-
   regexp.prototype.flags@1.5.2:
     dependencies:
       call-bind: 1.0.7
@@ -8132,8 +8001,6 @@ snapshots:
 
   restructure@3.0.2: {}
 
-  retry@0.13.1: {}
-
   reusify@1.0.4: {}
 
   rfdc@1.4.1: {}
@@ -8222,7 +8089,7 @@ snapshots:
 
   safer-buffer@2.1.2: {}
 
-  sass@1.97.2:
+  sass@1.97.3:
     dependencies:
       chokidar: 4.0.1
       immutable: 5.1.1
@@ -8234,8 +8101,6 @@ snapshots:
     dependencies:
       xmlchars: 2.2.0
 
-  sdp-transform@2.14.2: {}
-
   semver@5.7.2: {}
 
   semver@6.3.1: {}
@@ -8631,13 +8496,13 @@ snapshots:
     transitivePeerDependencies:
       - picomatch
 
-  svelte-preprocess@6.0.3(@babel/core@7.28.5)(postcss@8.5.6)(sass@1.97.2)(svelte@5.46.1)(typescript@5.9.3):
+  svelte-preprocess@6.0.3(@babel/core@7.28.5)(postcss@8.5.6)(sass@1.97.3)(svelte@5.46.1)(typescript@5.9.3):
     dependencies:
       svelte: 5.46.1
     optionalDependencies:
       '@babel/core': 7.28.5
       postcss: 8.5.6
-      sass: 1.97.2
+      sass: 1.97.3
       typescript: 5.9.3
 
   svelte@5.46.1:
@@ -8652,7 +8517,7 @@ snapshots:
       clsx: 2.1.1
       devalue: 5.6.1
       esm-env: 1.2.2
-      esrap: 2.2.1
+      esrap: 2.2.2
       is-reference: 3.0.3
       locate-character: 3.0.0
       magic-string: 0.30.21
@@ -8850,8 +8715,6 @@ snapshots:
   undici-types@5.26.5:
     optional: true
 
-  unhomoglyph@1.0.6: {}
-
   unicode-canonical-property-names-ecmascript@2.0.1: {}
 
   unicode-match-property-ecmascript@2.0.0:
@@ -8895,8 +8758,6 @@ snapshots:
 
   util-deprecate@1.0.2: {}
 
-  uuid@11.1.0: {}
-
   uuid@8.3.2: {}
 
   validate-npm-package-license@3.0.4:
@@ -8910,27 +8771,27 @@ snapshots:
       core-util-is: 1.0.2
       extsprintf: 1.3.0
 
-  vite-plugin-mkcert@1.17.9(vite@7.3.1(sass@1.97.2)(terser@5.44.1)):
+  vite-plugin-mkcert@1.17.9(vite@7.3.1(sass@1.97.3)(terser@5.44.1)):
     dependencies:
       axios: 1.13.2(debug@4.4.3)
       debug: 4.4.3
       picocolors: 1.1.1
-      vite: 7.3.1(sass@1.97.2)(terser@5.44.1)
+      vite: 7.3.1(sass@1.97.3)(terser@5.44.1)
     transitivePeerDependencies:
       - supports-color
 
-  vite-plugin-pwa@1.2.0(vite@7.3.1(sass@1.97.2)(terser@5.44.1))(workbox-build@7.1.1)(workbox-window@7.4.0):
+  vite-plugin-pwa@1.2.0(vite@7.3.1(sass@1.97.3)(terser@5.44.1))(workbox-build@7.1.1)(workbox-window@7.4.0):
     dependencies:
       debug: 4.4.3
       pretty-bytes: 6.1.1
       tinyglobby: 0.2.15
-      vite: 7.3.1(sass@1.97.2)(terser@5.44.1)
+      vite: 7.3.1(sass@1.97.3)(terser@5.44.1)
       workbox-build: 7.1.1
       workbox-window: 7.4.0
     transitivePeerDependencies:
       - supports-color
 
-  vite@7.3.1(sass@1.97.2)(terser@5.44.1):
+  vite@7.3.1(sass@1.97.3)(terser@5.44.1):
     dependencies:
       esbuild: 0.27.2
       fdir: 6.5.0(picomatch@4.0.3)
@@ -8940,17 +8801,17 @@ snapshots:
       tinyglobby: 0.2.15
     optionalDependencies:
       fsevents: 2.3.3
-      sass: 1.97.2
+      sass: 1.97.3
       terser: 5.44.1
 
-  vitefu@1.1.1(vite@7.3.1(sass@1.97.2)(terser@5.44.1)):
+  vitefu@1.1.1(vite@7.3.1(sass@1.97.3)(terser@5.44.1)):
     optionalDependencies:
-      vite: 7.3.1(sass@1.97.2)(terser@5.44.1)
+      vite: 7.3.1(sass@1.97.3)(terser@5.44.1)
 
-  vitest@4.0.16(jsdom@26.1.0)(sass@1.97.2)(terser@5.44.1):
+  vitest@4.0.16(jsdom@26.1.0)(sass@1.97.3)(terser@5.44.1):
     dependencies:
       '@vitest/expect': 4.0.16
-      '@vitest/mocker': 4.0.16(vite@7.3.1(sass@1.97.2)(terser@5.44.1))
+      '@vitest/mocker': 4.0.16(vite@7.3.1(sass@1.97.3)(terser@5.44.1))
       '@vitest/pretty-format': 4.0.16
       '@vitest/runner': 4.0.16
       '@vitest/snapshot': 4.0.16
@@ -8967,7 +8828,7 @@ snapshots:
       tinyexec: 1.0.2
       tinyglobby: 0.2.15
       tinyrainbow: 3.0.3
-      vite: 7.3.1(sass@1.97.2)(terser@5.44.1)
+      vite: 7.3.1(sass@1.97.3)(terser@5.44.1)
       why-is-node-running: 2.3.0
     optionalDependencies:
       jsdom: 26.1.0

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "app"
-version = "2.6.0"
+version = "2.7.0"
 description = "A Tauri App"
 authors = ["Thea Schöbl <dev@theaninova.de>"]
 license = "AGPL-3"

src-tauri/tauri.conf.json

@@ -6,7 +6,7 @@
     "devPath": "http://localhost:5173",
     "distDir": "../build"
   },
-  "package": { "productName": "amacc1ng", "version": "2.6.0" },
+  "package": { "productName": "amacc1ng", "version": "2.7.0" },
   "tauri": {
     "allowlist": { "all": false },
     "bundle": {

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/ccos/attachment.ts

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

src/lib/ccos/ccos.ts

@@ -1,7 +1,6 @@
 import { getMeta } from "$lib/meta/meta-storage";
 import type { SerialPortLike } from "$lib/serial/device";
 import type {
-  CCOSInEvent,
   CCOSInitEvent,
   CCOSKeyPressEvent,
   CCOSKeyReleaseEvent,
@@ -11,7 +10,7 @@ import { KEYCODE_TO_SCANCODE, SCANCODE_TO_KEYCODE } from "./ccos-interop";
 
 const device = "zero_wasm";
 
-class CCOSKeyboardEvent extends KeyboardEvent {
+export class CCOSKeyboardEvent extends KeyboardEvent {
   constructor(...params: ConstructorParameters<typeof KeyboardEvent>) {
     super(...params);
   }
@@ -26,7 +25,46 @@ const MASK_GUI = 0b1000_1000;
 export class CCOS implements SerialPortLike {
   private readonly currKeys = new Set<number>();
 
-  private readonly layout = new Map<string, string>();
+  private readonly layout = new Map<string, string>([
+    ...Array.from(
+      { length: 26 },
+      (_, i) =>
+        [
+          JSON.stringify([`Key${String.fromCharCode(65 + i)}`, "Shift"]),
+          String.fromCharCode(65 + i),
+        ] as const,
+    ),
+    ...Array.from(
+      { length: 10 },
+      (_, i) => [JSON.stringify([`Key${i}`]), i.toString()] as const,
+    ),
+
+    [JSON.stringify(["Space"]), " "],
+    [JSON.stringify(["Backquote"]), "`"],
+    [JSON.stringify(["Minus"]), "-"],
+    [JSON.stringify(["Comma"]), ","],
+    [JSON.stringify(["Period"]), "."],
+    [JSON.stringify(["Semicolon"]), ";"],
+    [JSON.stringify(["Equal"]), "="],
+
+    [JSON.stringify(["Backquote", "Shift"]), "~"],
+    [JSON.stringify(["Minus", "Shift"]), "_"],
+    [JSON.stringify(["Comma", "Shift"]), "<"],
+    [JSON.stringify(["Period", "Shift"]), ">"],
+    [JSON.stringify(["Semicolon", "Shift"]), ":"],
+    [JSON.stringify(["Equal", "Shift"]), "+"],
+
+    [JSON.stringify(["Digit0", "Shift"]), ")"],
+    [JSON.stringify(["Digit1", "Shift"]), "!"],
+    [JSON.stringify(["Digit2", "Shift"]), "@"],
+    [JSON.stringify(["Digit3", "Shift"]), "#"],
+    [JSON.stringify(["Digit4", "Shift"]), "$"],
+    [JSON.stringify(["Digit5", "Shift"]), "%"],
+    [JSON.stringify(["Digit6", "Shift"]), "^"],
+    [JSON.stringify(["Digit7", "Shift"]), "&"],
+    [JSON.stringify(["Digit8", "Shift"]), "*"],
+    [JSON.stringify(["Digit9", "Shift"]), "("],
+  ]);
 
   private readonly worker = new Worker("/ccos-worker.js", { type: "module" });
 
@@ -126,7 +164,6 @@ export class CCOS implements SerialPortLike {
           this.controller?.enqueue(event.data);
           return;
         }
-        console.log("CCOS worker message", event.data);
         switch (event.data.type) {
           case "ready": {
             this.resolveReady();
@@ -220,7 +257,7 @@ export class CCOS implements SerialPortLike {
 }
 
 export async function fetchCCOS(
-  version = ".2.2.0-beta.12+266bdda",
+  version = "3.0.0-rc.0",
   fetch: typeof window.fetch = window.fetch,
 ): Promise<CCOS | undefined> {
   const meta = await getMeta(device, version, fetch);

src/lib/chat/MatrixRoomMembers.svelte

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

src/lib/chat/MatrixRooms.svelte

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

src/lib/chat/MatrixTimeline.svelte

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

src/lib/chat/chat-rx.ts

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

src/lib/chat/chat.ts

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

src/lib/chat/events/MatrixEvent.svelte

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

src/lib/chat/events/MatrixMessageEvent.svelte

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

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

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

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

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

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

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

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

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

src/lib/chord-editor/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

@@ -1,203 +1,156 @@
-import { type KeyInfo } from "$lib/serial/keymap-codes";
-import { syntaxTree } from "@codemirror/language";
 import { linter, type Diagnostic } from "@codemirror/lint";
 import { parsedChordsField } from "./parsed-chords-plugin";
-import { actionMetaPlugin } from "./action-meta-plugin";
 
 export function actionLinter(config?: Parameters<typeof linter>[1]) {
   const finalConfig: Parameters<typeof linter>[1] = {
     ...config,
     needsRefresh(update) {
-      console.log(
-        "test",
-        update.startState.field(actionMetaPlugin.field) !==
-          update.state.field(actionMetaPlugin.field),
-        update.startState.field(parsedChordsField) !==
-          update.state.field(parsedChordsField),
-      );
       return (
-        update.startState.field(actionMetaPlugin.field) !==
-          update.state.field(actionMetaPlugin.field) ||
         update.startState.field(parsedChordsField) !==
-          update.state.field(parsedChordsField)
+        update.state.field(parsedChordsField)
       );
     },
   };
   return linter((view) => {
     console.log("lint");
     const diagnostics: Diagnostic[] = [];
-    const { ids, codes } = view.state.field(actionMetaPlugin.field);
-    const { meta, compoundInputs } = view.state.field(parsedChordsField);
+    const parsed = view.state.field(parsedChordsField);
 
-    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) {
+    for (const chord of parsed.chords) {
+      if (chord.disabled) {
         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.from,
-          severity: "warning",
-          message: `Chord phrase is empty`,
-        });
-      }
-      if (m.overriddenBy) {
-        diagnostics.push({
-          from: m.from,
-          to: m.from,
-          severity: "warning",
-          message: `Chord overridden by previous chord`,
-        });
-      }
-      if (m.orphan) {
-        diagnostics.push({
-          from: m.from,
-          to: m.from,
-          severity: "warning",
-          message: `Orphan compound chord`,
-        });
-      }
-      if (m.disabled) {
-        diagnostics.push({
-          from: m.from,
-          to: m.to,
+          from: chord.range[0],
+          to: chord.range[1],
           severity: "info",
           markClass: "chord-ignored",
           message: `Chord disabled`,
         });
       }
-      if ((m.overrides?.length ?? 0) > 0) {
+      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: m.from,
-          to: m.from,
+          from: chord.range[0],
+          to: chord.range[1],
           severity: "info",
-          message: `Chord overrides other chords`,
+          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-plugin.ts

@@ -7,21 +7,18 @@ 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";
+import type { KeyInfo } from "$lib/serial/keymap-codes";
 
 export class ActionWidget extends WidgetType {
   component?: {};
 
-  constructor(readonly id: string | number) {
+  constructor(readonly info: KeyInfo) {
     super();
-    this.id = id;
   }
 
-  /*override eq(other: ActionWidget) {
-    return this.id == other.id;
-  }*/
-
   toDOM() {
     if (this.component) {
       unmount(this.component);
@@ -31,15 +28,16 @@ export class ActionWidget extends WidgetType {
 
     this.component = mount(Action, {
       target: element,
-      props: { action: this.id, display: "keys", inText: true },
+      props: {
+        action: this.info,
+        display: "keys",
+        inText: true,
+        withPopover: false,
+      },
     });
     return element;
   }
 
-  override ignoreEvent() {
-    return true;
-  }
-
   override destroy() {
     if (this.component) {
       unmount(this.component);
@@ -50,27 +48,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");
-        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);
-        if (value.name === "HexNumber" && id.length === 10) return;
-        let deco = Decoration.replace({
-          widget: new ActionWidget(
-            value.name === "ActionId" ? id : Number.parseInt(id, 16),
-          ),
-        });
-        widgets.push(deco.range(node.from, node.to));
-      },
-    });
+        if (action.info && action.explicit) {
+          const deco = Decoration.replace({
+            widget: new ActionWidget(action.info),
+          });
+          widgets.push(deco.range(action.range[0], action.range[1]));
+        }
+      });
+    }
   }
   return Decoration.set(widgets);
 }
@@ -87,7 +82,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,310 +1,263 @@
-import {
-  KEYMAP_CODES,
-  KEYMAP_IDS,
-  type KeyInfo,
-} from "$lib/serial/keymap-codes";
+import type { KeyInfo } from "$lib/serial/keymap-codes";
 import type { CharaChordFile } from "$lib/share/chara-file";
-import { syntaxTree } from "@codemirror/language";
-import { StateEffect, ChangeDesc, type EditorState } from "@codemirror/state";
-import type { Update } from "@codemirror/collab";
-import { get } from "svelte/store";
 import {
   composeChordInput,
   hasConcatenator,
   hashChord,
-  splitCompound,
   willBeValidChordInput,
 } from "$lib/serial/chord";
-import type { SyntaxNodeRef } from "@lezer/common";
+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;
 }
 
-export interface ParseMeta {
-  from: number;
-  to: number;
-  hasConcatenator: boolean;
-  invalidActions?: true;
-  invalidInput?: true;
-  emptyPhrase?: true;
-  orphan?: true;
-  disabled?: true;
-  overrides?: number[];
-  overriddenBy?: number;
+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;
 }
 
-export interface ParseResult {
-  result: CharaChordFile["chords"];
-  meta: ParseMeta[];
-  compoundInputs: Map<number, string>;
+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(
-  data: EditorState,
+  tree: Tree,
   ids: Map<string, KeyInfo>,
   codes: Map<number, KeyInfo>,
+  deviceChords: CharaChordFile["chords"],
+  sliceString: (from: number, to: number) => string,
 ): ParseResult {
-  console.time("parseCharaChords");
-  const chords: CharaChordFile["chords"] = [];
-  const metas: ParseMeta[] = [];
-  const keys = new Map<string, number>();
-  const compoundInputs = new Map<number, string>();
-  const orphanCompounds = new Set<number>();
+  console.time("parseTotal");
 
-  let currentChord: CharaChordFile["chords"][number] | undefined = undefined;
-  let compound: number | undefined = undefined;
-  let currentActions: number[] = [];
-  let invalidActions = false;
-  let invalidInput = false;
-  let chordFrom = 0;
+  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);
 
-  const 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));
-      orphanCompounds.add(compound);
-    }
-    return input;
-  };
+  console.timeEnd("parseTotal");
 
-  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,
-              hasConcatenator: hasConcatenator(currentChord[1], codes),
-            };
-            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);
-          orphanCompounds.delete(hashChord(input));
-          currentChord = [input, []];
-        }
-      },
-    );
-
-  for (let i = 0; i < metas.length; i++) {
-    const [, compound] = splitCompound(chords[i]![0]);
-    if (
-      compound !== undefined &&
-      (!compoundInputs.has(compound) || orphanCompounds.has(compound))
-    ) {
-      metas[i]!.orphan = true;
-    }
-  }
-
-  console.timeEnd("parseCharaChords");
-
-  console.log(chords.length);
-  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,
-        };
-      });
+  return { chords, removed, aliases, compounds, inputs, exact };
 }

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

@@ -0,0 +1,41 @@
+import { hoverTooltip } from "@codemirror/view";
+import { parsedChordsField } from "./parsed-chords-plugin";
+import { type ActionMeta, iterActions } from "./parse-meta";
+import { mount, unmount } from "svelte";
+import ActionTooltip from "$lib/components/action/ActionTooltip.svelte";
+
+function inRange(pos: number, side: 1 | -1, range: [number, number]) {
+  if (side < 0) {
+    return pos > range[0] && pos <= range[1];
+  } else {
+    return pos >= range[0] && pos < range[1];
+  }
+}
+
+export const actionHover = hoverTooltip((view, pos, side) => {
+  const chord = view.state
+    .field(parsedChordsField)
+    .chords.find((chord) => inRange(pos, side, chord.range));
+  if (!chord) return null;
+  let action = iterActions<ActionMeta>(chord, (action) =>
+    inRange(pos, side, action.range) ? action : undefined,
+  );
+  if (!action?.info) return null;
+  return {
+    pos: action.range[0],
+    end: action.range[1],
+    create() {
+      const dom = document.createElement("div");
+      const element = mount(ActionTooltip, {
+        target: dom,
+        props: { info: action.info, valid: true },
+      });
+      return {
+        dom,
+        destroy() {
+          unmount(element);
+        },
+      };
+    },
+  };
+});

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

@@ -1,7 +1,29 @@
 import type { CharaChordFile } from "$lib/share/chara-file";
 import { StateEffect, StateField } from "@codemirror/state";
+import { actionMetaPlugin } from "./action-meta-plugin";
+import { syncCharaChords } from "./chord-sync";
+import type { EditorView } from "@codemirror/view";
 
-export const chordSyncEffect = StateEffect.define<CharaChordFile["chords"]>();
+const chordSyncEffect = StateEffect.define<CharaChordFile["chords"]>();
+
+export function editorSyncChords(
+  view: EditorView,
+  newDeviceChords: CharaChordFile["chords"],
+) {
+  const { ids, codes } = view.state.field(actionMetaPlugin.field);
+  const oldDeviceChords = view.state.field(deviceChordField);
+  const changes = syncCharaChords(
+    oldDeviceChords,
+    newDeviceChords,
+    ids,
+    codes,
+    view.state.doc.toString(),
+  );
+  view.dispatch({
+    effects: chordSyncEffect.of(newDeviceChords),
+    changes,
+  });
+}
 
 export const deviceChordField = StateField.define<CharaChordFile["chords"]>({
   create() {
@@ -13,9 +35,6 @@ export const deviceChordField = StateField.define<CharaChordFile["chords"]>({
       value
     );
   },
-  compare(a, b) {
-    return JSON.stringify(a) === JSON.stringify(b);
-  },
   toJSON(value) {
     return value;
   },

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

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

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

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

src/lib/chord-editor/chords.grammar

@@ -3,24 +3,41 @@
 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}
-  @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 {"|"}
   PhraseDelim {"=>"}
   Escape { "\\" }
   HexNumber { "0x" $[a-fA-F0-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,186 @@
+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<T = void>(
+  chord: ChordMeta,
+  callback: (action: ActionMeta) => T | void,
+): T | undefined {
+  if (chord.input) {
+    for (const action of chord.input.actions) {
+      const result = callback(action);
+      if (result !== undefined) {
+        return result;
+      }
+    }
+  }
+  if (chord.compounds) {
+    for (const compound of chord.compounds) {
+      for (const action of compound.actions) {
+        const result = callback(action);
+        if (result !== undefined) {
+          return result;
+        }
+      }
+    }
+  }
+  if (chord.phrase) {
+    for (const action of chord.phrase.actions) {
+      const result = callback(action);
+      if (result !== undefined) {
+        return result;
+      }
+    }
+  }
+  return undefined;
+}

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

@@ -1,102 +1,40 @@
-import {
-  ChangeDesc,
-  StateEffect,
-  StateField,
-  type Extension,
-} from "@codemirror/state";
-import { parseCharaChords, type ParseResult } from "./action-serializer";
-import { type KeyInfo } from "$lib/serial/keymap-codes";
+import { StateField } from "@codemirror/state";
+import { parseCharaChords } from "./action-serializer";
 import { actionMetaPlugin } from "./action-meta-plugin";
-import { EditorView, ViewPlugin, ViewUpdate } from "@codemirror/view";
-import type { Tree } from "@lezer/common";
-import { syntaxParserRunning, syntaxTree } from "@codemirror/language";
-import { debounceTime, Subject } from "rxjs";
-import { forceLinting } from "@codemirror/lint";
-
-function mapParseResult(value: ParseResult, change: ChangeDesc): ParseResult {
-  if (change.empty) return value;
-  if (
-    value.meta.every(
-      (it) =>
-        change.mapPos(it.to) === it.to && change.mapPos(it.from) === it.from,
-    )
-  )
-    return value;
-  return {
-    result: value.result,
-    meta: value.meta.map((it) => ({
-      ...it,
-      from: change.mapPos(it.from),
-      to: change.mapPos(it.to),
-    })),
-    compoundInputs: value.compoundInputs,
-  };
-}
-
-export const parsedChordsEffect = StateEffect.define<ParseResult>({
-  map: mapParseResult,
-});
+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 { compoundInputs: new Map(), meta: [], result: [] };
+    return {
+      chords: [],
+      removed: [],
+      aliases: new Map(),
+      compounds: new Map(),
+      inputs: new Map(),
+      exact: new Map(),
+    };
   },
   update(value, transaction) {
-    return (
-      transaction.effects.findLast((it) => it.is(parsedChordsEffect))?.value ??
-      mapParseResult(value, transaction.changes)
-    );
+    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);
   },
 });
-
-export function parsedChordsPlugin(debounce = 200): Extension {
-  const plugin = ViewPlugin.fromClass(
-    class {
-      tree: Tree;
-      ids: Map<string, KeyInfo>;
-      codes: Map<number, KeyInfo>;
-
-      needsUpdate = new Subject<void>();
-      subscription = this.needsUpdate
-        .pipe(debounceTime(debounce))
-        .subscribe(() => {
-          if (syntaxParserRunning(this.view)) {
-            this.needsUpdate.next();
-            return;
-          }
-          requestIdleCallback(() => {
-            this.view.dispatch({
-              effects: parsedChordsEffect.of(
-                parseCharaChords(this.view.state, this.ids, this.codes),
-              ),
-            });
-            forceLinting(this.view);
-          });
-        });
-
-      constructor(readonly view: EditorView) {
-        this.tree = syntaxTree(view.state);
-        this.ids = view.state.field(actionMetaPlugin.field).ids;
-        this.codes = view.state.field(actionMetaPlugin.field).codes;
-        this.needsUpdate.next();
-      }
-
-      update(update: ViewUpdate) {
-        const tree = syntaxTree(update.state);
-        const ids = update.state.field(actionMetaPlugin.field).ids;
-        const codes = update.state.field(actionMetaPlugin.field).codes;
-        if (tree !== this.tree || ids !== this.ids || codes !== this.codes) {
-          this.tree = tree;
-          this.ids = ids;
-          this.codes = codes;
-          this.needsUpdate.next();
-        }
-      }
-
-      destroy() {
-        this.subscription.unsubscribe();
-      }
-    },
-  );
-  return [parsedChordsField, plugin];
-}

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

@@ -12,7 +12,7 @@ import {
   historyKeymap,
   standardKeymap,
 } from "@codemirror/commands";
-import { debounceTime, Subject } from "rxjs";
+import { debounceTime, mergeMap, Subject } from "rxjs";
 import { EditorState, type EditorStateConfig } from "@codemirror/state";
 import { lintGutter } from "@codemirror/lint";
 import {
@@ -26,7 +26,10 @@ import { actionPlugin } from "./action-plugin";
 import { syntaxHighlighting } from "@codemirror/language";
 import { deviceChordField } from "./chord-sync-plugin";
 import { actionMetaPlugin } from "./action-meta-plugin";
-import { parsedChordsPlugin } from "./parsed-chords-plugin";
+import { parsedChordsField } from "./parsed-chords-plugin";
+import { changesPanel } from "./changes-panel.svelte";
+import { searchKeymap } from "@codemirror/search";
+import { actionHover } from "./action-tooltip";
 
 const serializedFields = {
   history: historyField,
@@ -39,13 +42,14 @@ export interface EditorConfig {
   autocomplete(query: string | undefined): void;
 }
 
-export function loadPersistentState(params: EditorConfig): EditorState {
-  const stored = localStorage.getItem(params.storeName);
-  const config = {
+export function createConfig(params: EditorConfig) {
+  return {
     extensions: [
       actionMetaPlugin.plugin,
       deviceChordField,
-      parsedChordsPlugin(),
+      parsedChordsField,
+      actionHover,
+      changesPanel(),
       lintGutter(),
       params.rawCode ? [lineNumbers()] : [delimPlugin, actionPlugin],
       chordLanguageSupport(),
@@ -78,14 +82,20 @@ export function loadPersistentState(params: EditorConfig): EditorState {
           borderColor: "var(--md-sys-color-on-surface)",
         },
       }),
-      keymap.of([...standardKeymap, ...historyKeymap]),
+      keymap.of([...standardKeymap, ...historyKeymap, ...searchKeymap]),
     ],
   } satisfies EditorStateConfig;
+}
+
+export async function loadPersistentState(
+  params: EditorConfig,
+): Promise<EditorState> {
+  const stored = await getState(params.storeName);
+  const config = createConfig(params);
 
   if (stored) {
     try {
-      const parsed = JSON.parse(stored);
-      return EditorState.fromJSON(parsed, config, serializedFields);
+      return EditorState.fromJSON(stored, config, serializedFields);
     } catch (e) {
       console.error("Failed to parse persistent state:", e);
     }
@@ -98,13 +108,13 @@ export function persistentStatePlugin(storeName: string) {
     class {
       updateSubject = new Subject<void>();
       subscription = this.updateSubject
-        .pipe(debounceTime(500))
-        .subscribe(() => {
-          localStorage.setItem(
-            storeName,
-            JSON.stringify(this.view.state.toJSON(serializedFields)),
-          );
-        });
+        .pipe(
+          debounceTime(500),
+          mergeMap(() =>
+            storeState(storeName, this.view.state.toJSON(serializedFields)),
+          ),
+        )
+        .subscribe(() => {});
 
       constructor(readonly view: EditorView) {}
 
@@ -120,3 +130,58 @@ export function persistentStatePlugin(storeName: string) {
     },
   );
 }
+
+const dbName = "chord-state";
+const dbVersion = 1;
+const storeName = "state";
+
+async function openDb(): Promise<IDBDatabase> {
+  const dbRequest = indexedDB.open(dbName, dbVersion);
+  return new Promise<IDBDatabase>((resolve, reject) => {
+    dbRequest.onsuccess = () => resolve(dbRequest.result);
+    dbRequest.onerror = () => reject(dbRequest.error);
+    dbRequest.onupgradeneeded = () => {
+      const db = dbRequest.result;
+      if (!db.objectStoreNames.contains(storeName)) {
+        db.createObjectStore(storeName);
+      }
+    };
+  });
+}
+
+async function getState<T>(name: string): Promise<T | undefined> {
+  const db = await openDb();
+  try {
+    const readTransaction = db.transaction([storeName], "readonly");
+    const store = readTransaction.objectStore(storeName);
+    const itemRequest = store.get(name);
+    const result = await new Promise<T | undefined>((resolve) => {
+      itemRequest.onsuccess = () => resolve(itemRequest.result);
+      itemRequest.onerror = () => resolve(undefined);
+    });
+    return result;
+  } catch (e) {
+    console.error(e);
+    return undefined;
+  } finally {
+    db.close();
+  }
+}
+
+async function storeState<T>(name: string, state: T): Promise<void> {
+  const db = await openDb();
+  try {
+    const putTransaction = db.transaction([storeName], "readwrite");
+    const putStore = putTransaction.objectStore(storeName);
+    const putRequest = putStore.put(state, name);
+    await new Promise<void>((resolve, reject) => {
+      putRequest.onsuccess = () => resolve();
+      putRequest.onerror = () => reject(putRequest.error);
+    });
+    putTransaction.commit();
+  } catch (e) {
+    console.error(e);
+  } finally {
+    db.close();
+  }
+}

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

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

src/lib/components/Action.svelte

@@ -4,17 +4,20 @@
   import { osLayout } from "$lib/os-layout";
   import { isVerbose } from "./verbose-action";
   import { actionTooltip } from "$lib/title";
+  import ActionTooltip from "./action/ActionTooltip.svelte";
 
   let {
     action,
     display,
     ignoreIcon = false,
     inText = false,
+    withPopover = true,
   }: {
     action: string | number | KeyInfo;
     display: "inline-keys" | "keys" | "verbose";
     ignoreIcon?: boolean;
     inText?: boolean;
+    withPopover?: boolean;
   } = $props();
 
   let retrievedInfo = $derived(
@@ -35,33 +38,13 @@
   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,
+    withPopover &&
+      (!retrievedInfo || !info.id || info.title || info.description),
   );
 </script>
 
 {#snippet popover()}
-  {#if retrievedInfo}
-    {#if info.icon || info.display || !info.id}
-      &lt;<b>{info.id ?? `0x${info.code.toString(16)}`}</b>&gt;
-    {/if}
-    {#if info.title}
-      {info.title}
-    {/if}
-    {#if info.variant === "left"}
-      (Left)
-    {:else if info.variant === "right"}
-      (Right)
-    {/if}
-    {#if info.description}
-      <br />
-      <small>{info.description}</small>
-    {/if}
-  {:else}
-    <b>Unknown Action</b><br />
-    {#if info.code > 1023}
-      This action cannot be translated and will be ingored.
-    {/if}
-  {/if}
+  <ActionTooltip valid={!!retrievedInfo} {info} />
 {/snippet}
 
 {#snippet kbdText()}
@@ -232,13 +215,13 @@
       display: -webkit-box;
       opacity: 0.9;
       max-width: 15ch;
+      -webkit-line-clamp: 2; /* number of lines to show */
+      line-clamp: 2;
       overflow: hidden;
       font-style: italic;
       font-size: 12px;
       text-align: left;
       text-overflow: ellipsis;
-      -webkit-line-clamp: 2; /* number of lines to show */
-      line-clamp: 2;
       -webkit-box-orient: vertical;
     }
   }

src/lib/components/action/ActionTooltip.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import type { KeyInfo } from "$lib/serial/keymap-codes";
+
+  let { valid, info }: { valid: boolean; info: KeyInfo } = $props();
+</script>
+
+{#if valid}
+  {#if info.icon || info.display || !info.id}
+    &lt;<b>{info.id ?? `0x${info.code.toString(16)}`}</b>&gt;
+  {/if}
+  {#if info.title}
+    {info.title}
+  {/if}
+  {#if info.variant === "left"}
+    (Left)
+  {:else if info.variant === "right"}
+    (Right)
+  {/if}
+  {#if info.description}
+    <br />
+    <small>{info.description}</small>
+  {/if}
+  {#if info.breaking}
+    <br />&nbsp;<i>Prevents prepended autospaces</i>
+  {/if}
+  {#if info.separator || info.breaking}
+    <br />&nbsp;<i>Stops autocorrect</i>
+  {/if}
+{:else}
+  <b>Unknown Action</b><br />
+  {#if info.code > 1023}
+    This action cannot be translated and will be ingored.
+  {/if}
+{/if}

src/lib/components/layout/ActionList.svelte

@@ -14,7 +14,7 @@
   import type { KeymapCategory } from "$lib/meta/types/actions";
   import Action from "../Action.svelte";
   import { isVerbose } from "../verbose-action";
-  import { actionToValue } from "$lib/chord-editor/action-serializer";
+  import { actionToValue } from "$lib/chord-editor/chord-sync";
 
   let {
     currentAction = undefined,

src/lib/learn/chords.ts

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

src/lib/learn/stats.ts

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

src/lib/serial/device.ts

@@ -1,5 +1,5 @@
 import { LineBreakTransformer } from "$lib/serial/line-break-transformer";
-import { serialLog } from "$lib/serial/connection";
+import { serialLog, type SerialLogEntry } from "$lib/serial/connection";
 import type { Chord } from "$lib/serial/chord";
 import {
   parseChordActions,
@@ -147,7 +147,7 @@ export class CharaDevice {
   version!: string;
   company!: "CHARACHORDER" | "FORGE";
   device!: "ONE" | "TWO" | "LITE" | "X" | "M4G" | "ENGINE" | "ZERO";
-  chipset!: "M0" | "S2" | "S3";
+  chipset!: "M0" | "S2" | "S3" | "WASM";
   keyCount!: 90 | 67 | 256;
   layerCount = 3;
   profileCount = 1;
@@ -157,8 +157,8 @@ export class CharaDevice {
   }
 
   constructor(
-    private readonly port: SerialPortLike,
-    public baudRate = 115200,
+    readonly port: SerialPortLike,
+    public baudRate = navigator.userAgent.includes("Mac") ? 38400 : 115200,
   ) {}
 
   async init() {
@@ -183,11 +183,11 @@ export class CharaDevice {
       this.company = company as typeof this.company;
       this.device = device as typeof this.device;
       this.chipset = chipset as typeof this.chipset;
-      if (semverGte(this.version, "2.2.0-beta.4")) {
-        this.profileCount = this.chipset === "M0" ? 2 : 3;
+      if (semverGte(this.version, "2.2.0-beta.4") && this.chipset !== "M0") {
+        this.profileCount = 3;
       }
-      if (semverGte(this.version, "2.2.0-beta.20")) {
-        this.layerCount = this.chipset === "M0" ? 3 : 4;
+      if (semverGte(this.version, "2.2.0-beta.20") && this.chipset !== "M0") {
+        this.layerCount = 4;
       }
       this.keyCount = KEY_COUNTS[this.device];
     } catch (e) {
@@ -564,37 +564,48 @@ export class CharaDevice {
 
       const writer = this.port.writable!.getWriter();
       try {
-        await writer.write(new TextEncoder().encode(`RST OTA\r\n`));
-        serialLog.update((it) => {
-          it.push({
-            type: "input",
-            value: "RST OTA",
-          });
-          return it;
-        });
+        const start = performance.now();
+        writer.write(new TextEncoder().encode(`RST OTA\r\n`));
 
         // Wait for the device to be ready
         const signal = await this.reader.read();
-        serialLog.update((it) => {
-          it.push({
-            type: "output",
-            value: signal.value!.trim(),
-          });
-          return it;
-        });
+        const signalTime = performance.now();
 
         const chunkSize = 128;
+        const chunks: Promise<void>[] = [];
         for (let i = 0; i < file.byteLength; i += chunkSize) {
-          const chunk = file.slice(i, i + chunkSize);
-          await writer.write(new Uint8Array(chunk));
-          progress(i + chunk.byteLength, file.byteLength);
+          const size = Math.min(chunkSize, file.byteLength - i);
+          chunks.push(
+            writer
+              .write(new Uint8Array(file, i, size))
+              .then(() => progress(i + size, file.byteLength)),
+          );
         }
+        await Promise.all(chunks);
 
         serialLog.update((it) => {
-          it.push({
-            type: "input",
-            value: `...${file.byteLength} bytes`,
-          });
+          it.push(
+            {
+              type: "input",
+              value: "RST OTA",
+            },
+            {
+              type: "system",
+              value: `+${(signalTime - start).toFixed(0)} ms`,
+            },
+            {
+              type: "output",
+              value: signal.value!.trim(),
+            },
+            {
+              type: "system",
+              value: `+${(performance.now() - signalTime).toFixed(0)} ms`,
+            },
+            {
+              type: "input",
+              value: `...${file.byteLength} bytes`,
+            },
+          );
           return it;
         });
 
@@ -621,9 +632,8 @@ export class CharaDevice {
         });
       } finally {
         writer.releaseLock();
+        await this.suspend();
       }
-
-      await this.suspend();
     } finally {
       delete this.lock;
       resolveLock!(true);

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)),
-);

src/routes/(app)/ConnectPopup.svelte

@@ -10,6 +10,7 @@
   import { showConnectionFailedDialog } from "$lib/dialogs/connection-failed-dialog";
   import { onMount } from "svelte";
   import { persistentWritable } from "$lib/storage";
+  import { goto } from "$app/navigation";
 
   let ports = $state<SerialPort[]>([]);
   let element: HTMLDivElement | undefined = $state();
@@ -46,16 +47,11 @@
     element?.closest<HTMLElement>("[popover]")?.hidePopover();
   }
 
-  async function connectCC0(event: MouseEvent) {
-    const { fetchCCOS } = await import("$lib/ccos/ccos");
-    closePopover();
-    const ccos = await fetchCCOS();
-    if (ccos) {
-      connect(ccos, !event.shiftKey);
-    }
-  }
-
   async function connectDevice(event: MouseEvent) {
+    if (event.altKey) {
+      goto("/terminal/");
+      return;
+    }
     const port = await navigator.serial.requestPort({
       filters: event.shiftKey ? [] : [...PORT_FILTERS.values()],
     });
@@ -88,9 +84,10 @@
   {#if ports.length !== 0}
     <h4>Recent Devices</h4>
     <div class="devices">
+      <!--
       <div class="device">
         <button onclick={connectCC0}> CC0</button>
-      </div>
+      </div>-->
       {#each ports as port}
         <div class="device">
           <button
@@ -115,7 +112,7 @@
     <button onclick={connectDevice} class="primary"
       ><span class="icon">add</span>Connect</button
     >
-    <a href="/ccos/zero_wasm/"><span class="icon">add</span>Virtual Device</a>
+    <!--<a href="/ccos/zero_wasm/"><span class="icon">add</span>Virtual Device</a>-->
   </div>
 </div>
 

src/routes/(app)/Footer.svelte

@@ -15,6 +15,7 @@
   } from "$lib/serial/connection";
   import { fade, slide } from "svelte/transition";
   import ConnectPopup from "./ConnectPopup.svelte";
+  import { goto } from "$app/navigation";
 
   let locale = $state(
     (browser && (localStorage.getItem("locale") as Locales)) || detectLocale(),
@@ -49,6 +50,8 @@
   function disconnect(event: MouseEvent) {
     if (event.shiftKey) {
       sync();
+    } else if (event.altKey) {
+      goto("/terminal/");
     } else {
       $serialPort?.close();
       $serialPort = undefined;
@@ -116,6 +119,25 @@
     {/if}
   </div>
   <ul>
+    <li>
+      <a
+        href={import.meta.env.VITE_DISCORD_URL}
+        rel="noreferrer"
+        target="_blank"
+      >
+        <svg
+          class="discord-icon"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 126.64 96"
+        >
+          <path
+            fill="currentColor"
+            d="m81 0-3 7Q63 4 49 7l-4-7-26 8Q-4 45 1 80q14 10 32 16l6-11-10-5 2-2q33 13 64 0l3 2-11 5 7 11q17-5 32-16 4-40-19-72-12-5-26-8M42 65q-10-1-11-12 0-15 11-13c11 2 12 6 12 13q-1 11-12 12m42 0q-10-1-11-12 0-15 11-13c11 2 12 6 12 13q-1 11-12 12"
+          /></svg
+        >
+        Discord</a
+      >
+    </li>
     <li>
       <a href={import.meta.env.VITE_BUGS_URL} rel="noreferrer" target="_blank"
         ><span class="icon">bug_report</span> Bugs</a
@@ -168,6 +190,11 @@
 
   $sync-border-radius: 16px;
 
+  .discord-icon {
+    margin: 5px;
+    inline-size: 14px;
+  }
+
   .sync-box {
     display: flex;
     position: relative;

src/routes/(app)/PageTransition.svelte

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

src/routes/(app)/Sidebar.svelte

@@ -17,6 +17,11 @@
         : []),
     ],
     [
+      {
+        href: "/editor/",
+        icon: "playground_2",
+        title: "Emulator",
+      },
       {
         href: import.meta.env.VITE_LEARN_URL,
         icon: "school",
@@ -36,14 +41,6 @@
         external: true,
       },
     ],
-    [
-      { href: "/editor", icon: "edit_document", title: "Editor", wip: true },
-      { href: "/chat", icon: "chat", title: "Chat", wip: true },
-      { href: "/learn", icon: "school", title: "Learn", wip: true },
-    ],
-    /*[
-      { href: "/plugin", icon: "code", title: "Plugin", wip: true },
-    ],*/
   ] satisfies {
     href: string;
     icon: string;

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

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

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

@@ -1,92 +0,0 @@
-<script lang="ts">
-  import { initMatrixClient, isLoggedIn, matrix } from "$lib/chat/chat-rx";
-  import { flip } from "svelte/animate";
-  import { slide } from "svelte/transition";
-  import Login from "./Login.svelte";
-  import { onMount } from "svelte";
-  import { browser } from "$app/environment";
-
-  onMount(async () => {
-    if (browser) {
-      await initMatrixClient();
-    }
-  });
-
-  let { children } = $props();
-
-  let spaces = $derived($matrix?.topLevelSpaces$);
-
-  function spaceShort(name: string) {
-    return name
-      .split(" ")
-      .map((it) => it[0])
-      .join("");
-  }
-</script>
-
-{#if $isLoggedIn}
-  <div class="layout">
-    <nav class="spaces">
-      <a href="/chat/chats" class="icon chats">chat</a>
-      <hr />
-      {#if $spaces}
-        <ul>
-          {#each $spaces as space (space.roomId)}
-            <li animate:flip transition:slide>
-              <a class="space" href="/chat/space/{space.roomId}">
-                {spaceShort(space.name)}
-              </a>
-            </li>
-          {/each}
-        </ul>
-      {/if}
-      <button class="icon">add</button>
-    </nav>
-  </div>
-{:else}
-  <Login />
-{/if}
-
-<style lang="scss">
-  nav {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .layout {
-    display: flex;
-    width: 100%;
-    height: 100%;
-  }
-
-  hr {
-    width: 60%;
-    height: 1px;
-  }
-
-  ul {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
-
-  button,
-  a {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background: var(--md-sys-color-surface-variant);
-    width: 56px;
-    height: 56px;
-    overflow: hidden;
-  }
-
-  .chats {
-    font-size: 24px;
-  }
-
-  .space {
-    margin-bottom: 8px;
-    font-size: 20px;
-  }
-</style>

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

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

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

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

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

@@ -6,18 +6,15 @@
     layout,
     overlay,
     settings,
-    duplicateChords,
   } from "$lib/undo-redo";
-  import type { Change, ChordChange } from "$lib/undo-redo";
+  import type { Change } from "$lib/undo-redo";
   import { fly } from "svelte/transition";
   import { actionTooltip } from "$lib/title";
   import {
-    deviceChords,
     deviceLayout,
     deviceSettings,
     serialLog,
     serialPort,
-    sync,
     syncProgress,
     syncStatus,
   } from "$lib/serial/connection";
@@ -106,115 +103,7 @@
     return true;
   }
 
-  async function safeDeleteChord(actions: number[]): Promise<boolean> {
-    const port = $serialPort;
-    if (!port) return false;
-    try {
-      await port.deleteChord({ actions });
-      return true;
-    } catch (e) {
-      console.error(e);
-      try {
-        if ((await port.getChordPhrase(actions)) === undefined) {
-          return true;
-        }
-      } catch (e) {
-        console.error(e);
-      }
-    }
-    return false;
-  }
-
-  async function saveChords(progress: () => void): Promise<boolean> {
-    const port = $serialPort;
-    if (!port) return false;
-    let ok = true;
-
-    const empty = new Set<string>();
-    for (const [id, chord] of $overlay.chords) {
-      if (chord.actions.length === 0 || chord.phrase.length === 0) {
-        empty.add(id);
-      }
-    }
-    changes.update((changes) => {
-      changes.push([
-        ...empty.keys().map(
-          (id) =>
-            ({
-              type: ChangeType.Chord,
-              id: JSON.parse(id),
-              deleted: true,
-              actions: [],
-              phrase: [],
-            }) satisfies ChordChange,
-        ),
-      ]);
-      return changes;
-    });
-    await tick();
-
-    const deleted = new Set<string>();
-    const changed = new Map<string, number[]>();
-    for (const [id, chord] of $overlay.chords) {
-      if (!chord.deleted) continue;
-      if (await safeDeleteChord(JSON.parse(id))) {
-        deleted.add(id);
-      } else {
-        ok = false;
-      }
-      progress();
-    }
-    deviceChords.update((chords) =>
-      chords.filter((chord) => !deleted.has(JSON.stringify(chord.actions))),
-    );
-    deleted.clear();
-    await tick();
-
-    for (const [id, chord] of $overlay.chords) {
-      if (chord.deleted) continue;
-      if ($duplicateChords.has(JSON.stringify(chord.actions))) {
-        ok = false;
-      } else {
-        let skip = false;
-        if (id !== JSON.stringify(chord.actions)) {
-          if (await safeDeleteChord(JSON.parse(id))) {
-            deleted.add(id);
-          } else {
-            skip = true;
-            ok = false;
-          }
-        }
-        if (!skip) {
-          try {
-            await port.setChord({
-              actions: chord.actions,
-              phrase: chord.phrase,
-            });
-            deleted.add(JSON.stringify(chord.actions));
-            changed.set(JSON.stringify(chord.actions), chord.phrase);
-          } catch (e) {
-            console.error(e);
-            ok = false;
-          }
-        } else {
-          ok = false;
-        }
-      }
-      progress();
-    }
-    deviceChords.update((chords) => {
-      chords.filter((chord) => !deleted.has(JSON.stringify(chord.actions)));
-      for (const [id, phrase] of changed) {
-        chords.push({ actions: JSON.parse(id), phrase });
-      }
-      return chords;
-    });
-    await tick();
-    return ok;
-  }
-
   async function save() {
-    let needsSync = false;
     try {
       const port = $serialPort;
       if (!port) {
@@ -235,10 +124,8 @@
         (acc, profile) => acc + (profile?.size ?? 0),
         0,
       );
-      const chordChanges = $overlay.chords.size;
-      needsSync = chordChanges > 0;
       const needsCommit = settingChanges > 0 || layoutChanges > 0;
-      const progressMax = layoutChanges + settingChanges + chordChanges;
+      const progressMax = layoutChanges + settingChanges;
 
       let progressCurrent = 0;
 
@@ -261,11 +148,9 @@
           layoutSuccess = false;
         }
       }
-      let chordsSuccess = await saveChords(updateProgress);
 
-      if (layoutSuccess && settingsSuccess && chordsSuccess) {
+      if (layoutSuccess && settingsSuccess) {
         changes.set([]);
-        needsSync = true;
       } else {
         throw new Error("Some changes could not be saved.");
       }
@@ -280,10 +165,6 @@
     } finally {
       $syncStatus = "done";
     }
-
-    if (needsSync) {
-      await sync();
-    }
   }
 
   let progressPopover: HTMLElement | undefined = $state();

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,7 +1,5 @@
 <script lang="ts">
   import { serializeActions } from "$lib/serial/chord";
-  import { chords } from "$lib/undo-redo";
-  import ChordEdit from "../ChordEdit.svelte";
 
   export function hashChord(actions: number[]) {
     const chord = new Uint8Array(16);
@@ -17,7 +15,8 @@
   }
 
   const broken = $derived(
-    $chords.filter((it) => (hashChord(it.actions) & 0xff) === 0xff),
+    [],
+    // $chords.filter((it) => (hashChord(it.actions) & 0xff) === 0xff),
   );
 </script>
 
@@ -35,7 +34,7 @@
     >, your library might have been corrupted.
   </p>
   {#each broken as chord}
-    <ChordEdit {chord} onduplicate={() => {}} />
+    <!--<ChordEdit {chord} onduplicate={() => {}} />-->
   {/each}
 {:else}
   <p>No problematic chords found</p>
@@ -47,19 +46,6 @@
     font-weight: bold;
   }
 
-  .chord {
-    display: flex;
-    gap: 0.5rem;
-    margin-bottom: 0.5rem;
-  }
-
-  .compound {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    margin-bottom: 1rem;
-  }
-
   p {
     max-width: 600px;
   }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,263 +0,0 @@
-<script lang="ts">
-  import { KEYMAP_CODES } from "$lib/serial/keymap-codes";
-  import { onMount } from "svelte";
-  import { basicSetup, EditorView } from "codemirror";
-  import { javascript, javascriptLanguage } from "@codemirror/lang-javascript";
-  import { defaultKeymap } from "@codemirror/commands";
-  import { keymap } from "@codemirror/view";
-  import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
-  import { tags } from "@lezer/highlight";
-  import LL from "$i18n/i18n-svelte";
-  import type { CompletionContext, Completion } from "@codemirror/autocomplete";
-  import { syntaxTree } from "@codemirror/language";
-  import { serialPort } from "$lib/serial/connection";
-  import examplePlugin from "./example-plugin.js?raw";
-  import {
-    charaMethods,
-    type ChannelCharaEventData,
-    type ChannelResponseEventData,
-  } from "./plugin-types";
-
-  let theme = EditorView.baseTheme({
-    ".cm-editor .cm-content": {
-      fontFamily: '"Noto Sans Mono", monospace',
-    },
-    ".cm-FoldPlaceholder": {
-      backgroundColor: "var(--md-sys-color-surface-variant)",
-      color: "var(--md-sys-color-on-surface-variant)",
-    },
-    ".cm-gutters": {
-      backgroundColor: "var(--md-sys-color-surface-variant)",
-      color: "var(--md-sys-color-on-surface-variant)",
-      borderColor: "var(--md-sys-color-outline)",
-    },
-    ".cm-activeLineGutter": {
-      backgroundColor: "var(--md-sys-color-tertiary)",
-      color: "var(--md-sys-color-on-tertiary)",
-    },
-    ".cm-activeLine": {
-      backgroundColor: "transparent",
-    },
-    ".cm-cursor": {
-      borderColor: "var(--md-sys-color-on-background)",
-    },
-    ".cm-selectionBackground": {
-      background: "transparent !important",
-      backdropFilter: "invert(0.3)",
-    },
-    ".cm-tooltip": {
-      backgroundColor: "var(--md-sys-color-background) !important",
-      color: "var(--md-sys-color-on-background)",
-      borderColor: "var(--md-sys-color-outline)",
-    },
-    ".cm-tooltip-autocomplete ul li[aria-selected]": {
-      backgroundColor: "var(--md-sys-color-primary) !important",
-      color: "var(--md-sys-color-on-primary) !important",
-    },
-    ".cm-completionIcon.cm-completionIcon-keyword::after": {
-      content: "'🗝'",
-    },
-  });
-  const highlightStyle = HighlightStyle.define(
-    [
-      { tag: tags.keyword, color: "var(--md-sys-color-primary)" },
-      { tag: tags.number, color: "var(--md-sys-color-secondary)" },
-      { tag: tags.string, color: "var(--md-sys-color-tertiary)" },
-      {
-        tag: tags.comment,
-        color: "var(--md-sys-color-on-background)",
-        opacity: 0.6,
-      },
-    ],
-    {
-      all: { fontFamily: '"Noto Sans Mono", monospace', fontSize: "14px" },
-    },
-  );
-
-  const globalsCompletion: Completion[] = [
-    { label: "Chara", type: "class", boost: 90 },
-    { label: "Actions", type: "class", boost: 90 },
-  ];
-
-  const actionsCompletion: Completion[] = Array.from(
-    $KEYMAP_CODES,
-    ([id, info]) => {
-      const isValidIdentifier =
-        info.id && /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(info.id);
-      return {
-        label: info.id
-          ? isValidIdentifier
-            ? info.id
-            : `["${info.id}"]`
-          : info.id!,
-        displayLabel: info.id,
-        detail: [info.title, `(0x${id.toString(16)})`, info.description]
-          .filter((it) => !!it)
-          .join(" "),
-        section: info.category,
-        boost: isValidIdentifier ? Math.min(info.id?.length ?? 0, 10) + 50 : 40,
-        type: "property",
-      };
-    },
-  ).filter((it) => it.label !== undefined);
-
-  const completion = javascriptLanguage.data.of({
-    autocomplete: function completeGlobals(context: CompletionContext) {
-      let nodeBefore = syntaxTree(context.state).resolveInner(context.pos, -1);
-      if (nodeBefore.name === "VariableName") {
-        return {
-          from: nodeBefore.from,
-          options: globalsCompletion,
-        };
-      } else if (nodeBefore.name === "Script") {
-        return {
-          from: context.pos,
-          options: globalsCompletion,
-        };
-      } else if (
-        (nodeBefore.name === "PropertyName" || nodeBefore.name === ".") &&
-        nodeBefore.parent?.name === "MemberExpression" &&
-        nodeBefore.parent.firstChild
-      ) {
-        const variable = nodeBefore.parent.firstChild;
-        const variableName = context.state.sliceDoc(variable.from, variable.to);
-        if (variableName === "Actions") {
-          return {
-            from:
-              nodeBefore.name === "PropertyName"
-                ? nodeBefore.from
-                : nodeBefore.to,
-            options: actionsCompletion,
-          };
-        }
-        let parent = nodeBefore.prevSibling;
-        while (parent !== null && parent?.name !== "VariableName") {
-          parent = parent.prevSibling;
-        }
-        if (parent) {
-        }
-      }
-      return null;
-    },
-  });
-
-  onMount(() => {
-    editorView = new EditorView({
-      extensions: [
-        basicSetup,
-        javascript(),
-        keymap.of(defaultKeymap),
-        theme,
-        syntaxHighlighting(highlightStyle),
-        completion,
-      ],
-      parent: editor,
-      doc: examplePlugin,
-    });
-  });
-
-  let channels = $derived.by(() => {
-    if (!$serialPort) return {} as any;
-    return {
-      getVersion: (..._args: unknown[]) => Promise.resolve($serialPort.version),
-      getDevice: (..._args: unknown[]) => Promise.resolve($serialPort.device),
-      commit: (..._args: unknown[]) => {
-        if (
-          confirm(
-            "Perform a commit? Settings are already applied until the next reboot.\n\n" +
-              "Excessive commits can lead to premature breakdowns, as the settings storage is only rated for 10,000-25,000 commits.\n\n" +
-              "Click OK to perform the commit anyways.",
-          )
-        ) {
-          return Promise.resolve($serialPort.commit());
-        }
-        return Promise.resolve();
-      },
-      ...Object.fromEntries(
-        charaMethods.map(
-          (it) => [it, $serialPort[it].bind($serialPort)] as const,
-        ),
-      ),
-    } satisfies Record<string, Function>;
-  });
-
-  async function onMessage(event: MessageEvent) {
-    if (event.origin !== "null" || event.source !== frame.contentWindow) return;
-
-    const [channel, params] = event.data;
-    const response = channels[channel as keyof typeof channels](...params);
-    frame.contentWindow!.postMessage(
-      { response: await response } satisfies ChannelResponseEventData,
-      "*",
-    );
-  }
-
-  function runPlugin() {
-    frame.contentWindow?.postMessage(
-      {
-        actionCodes: $KEYMAP_CODES,
-        script: editorView.state.doc.toString(),
-        charaChannels: Object.keys(channels),
-      } satisfies ChannelCharaEventData,
-      "*",
-    );
-  }
-
-  let frame: HTMLIFrameElement;
-  let editor: HTMLDivElement;
-  let editorView: EditorView;
-</script>
-
-<svelte:window onmessage={onMessage} />
-<section>
-  <h3>Plugin</h3>
-  <button onclick={runPlugin}
-    ><span class="icon">play_arrow</span>{$LL.plugin.editor.RUN()}</button
-  >
-  <div class="editor-root" bind:this={editor}></div>
-</section>
-
-<iframe
-  aria-hidden="true"
-  title="code sandbox"
-  bind:this={frame}
-  src="/sandbox/"
-  sandbox="allow-scripts"
-></iframe>
-
-<style lang="scss">
-  section {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    width: 100%;
-  }
-
-  iframe {
-    display: none;
-  }
-
-  button {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    border: none;
-    border-radius: 4px;
-
-    background: var(--md-sys-color-primary);
-    padding-inline-start: 0;
-    padding-inline-end: 8px;
-
-    width: min-content;
-    color: var(--md-sys-color-on-primary);
-    font-weight: bold;
-
-    font-size: 14px;
-  }
-
-  .editor-root {
-    width: 100%;
-    height: 100%;
-  }
-</style>

src/routes/(app)/plugin/example-plugin.js

@@ -1,32 +0,0 @@
-// @ts-nocheck
-/*******************************
- * HOLD UP AND READ THIS FIRST *
- *******************************
- *
- * Chara devices have a LIMITED number of commits.
- * calling `Chara.commit()` can be a dangerous operation, which is why a confirmation dialog will be shown.
- * Devices are only rated for 10,000-25,000 commits, exceeding that limit may result in premature breakdowns.
- * `Chara.setSetting` or `Chara.setLayoutKey` is not affected by this, they last however only until the next boot.
- *
- * Chord writing is more forgiving, but keep in mind that excessive large-scale writing can still damage the device.
- *
- */
-
-const count = await Chara.getChordCount(); // => 499
-const chord = await Chara.getChord(2); // => {actions: [1, 2, 3], phrase: [4, 5, 6]}
-
-const setting = await Chara.getSetting(5); // => 0
-
-// This, for example, would return all chords
-const chords = [];
-for (let i = 0; i < count; i++) {
-  chords.push(await Chara.getChord(i));
-}
-
-// You can also print values to the browser console (F12)
-console.log("Chords:", chords);
-
-// You can access the actions by ID!
-Actions.SPACE; // => {id: "SPACE", code: 32, icon: "space_bar", description: ...}
-Actions[32]; // This also works
-Actions[0x20]; // Or this!

src/routes/(app)/plugin/plugin-types.ts

@@ -1,30 +0,0 @@
-import type { CharaDevice } from "$lib/serial/device";
-import type { KeyInfo } from "$lib/serial/keymap-codes";
-
-export const charaMethods = [
-  "reboot",
-  "bootloader",
-  "getRamBytesAvailable",
-  "getSetting",
-  "setSetting",
-  "getLayoutKey",
-  "setLayoutKey",
-  "deleteChord",
-  "setChord",
-  "getChordPhrase",
-  "getChordCount",
-  "getChord",
-  "send",
-] as const satisfies Array<keyof CharaDevice>;
-
-export interface ChannelResponseEventData {
-  response: unknown;
-}
-
-export interface ChannelCharaEventData {
-  charaChannels: string[];
-  script: string;
-  actionCodes: Map<number, KeyInfo>;
-}
-
-export type ChannelEventData = ChannelResponseEventData | ChannelCharaEventData;

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

@@ -1,20 +0,0 @@
-<script lang="ts">
-  import AnimatedNumber from "$lib/components/AnimatedNumber.svelte";
-  import { onDestroy, onMount } from "svelte";
-
-  let interval: ReturnType<typeof setInterval>;
-
-  let value = $state(Math.round(Math.random() * 100));
-
-  onMount(() => {
-    interval = setInterval(() => {
-      value = Math.round(Math.random() * 100);
-    }, 2000);
-  });
-
-  onDestroy(() => {
-    clearInterval(interval);
-  });
-</script>
-
-<p>The number is <AnimatedNumber {value} /></p>

static/sandbox/index.html

@@ -1,60 +0,0 @@
-<script>
-  /** @type {Promise<unknown> | undefined} */
-  let ongoingRequest = undefined;
-  /** @type {(data: unknown) => void | undefined} */
-  let resolveRequest = undefined;
-  /** @type {MessageEventSource | undefined} */
-  let source = undefined;
-
-  /**
-   * @param {string} channel
-   * @param {unknown} args
-   * @returns {Promise<unknown>}
-   */
-  async function post(channel, args) {
-    while (ongoingRequest) {
-      await ongoingRequest;
-    }
-    ongoingRequest = new Promise((resolve) => {
-      resolveRequest = resolve;
-      source?.postMessage([channel, args], { targetOrigin: "*" });
-    });
-    ongoingRequest.then(() => {
-      ongoingRequest = undefined;
-    });
-    return ongoingRequest;
-  }
-
-  /**
-   * @param {MessageEvent<import('../../src/routes/plugin/plugin-types').ChannelEventData>} event
-   */
-  function onMessage(event) {
-    if ("response" in event.data) {
-      resolveRequest?.(event.data.response);
-    } else {
-      source = event.source ?? undefined;
-
-      const Action = event.data.actionCodes;
-      Object.assign(
-        Action,
-        Object.fromEntries(
-          Object.values(event.data.actionCodes)
-            .filter((it) => !!it.id)
-            .map((it) => [it.id, it]),
-        ),
-      );
-
-      new Function("Action", "Chara", event.data.script)(
-        Action,
-        Object.fromEntries(
-          event.data.charaChannels.map((name) => [
-            name,
-            (...args) => post(name, args),
-          ]),
-        ),
-      );
-    }
-  }
-
-  window.addEventListener("message", onMessage);
-</script>

static/sentences/Modelfile

@@ -1,10 +0,0 @@
-FROM llama3.1
-
-TEMPLATE """
-<|system|>
-Only output the sentence
-<|user|>
-Create a typical sentence with around 10 words that includes the word "{{ .Prompt }}".
-<|assistant|>
-Create a sentence that includes "{{ .Prompt }}".
-"""

vite.config.ts

@@ -26,6 +26,7 @@ process.env["VITE_LATEST_FIRMWARE"] = "1.1.4";
 process.env["VITE_STORE_URL"] = "https://www.charachorder.com/";
 process.env["VITE_MATRIX_URL"] = "https://charachorder.io/";
 process.env["VITE_FIRMWARE_URL"] = "https://charachorder.io/firmware";
+process.env["VITE_DISCORD_URL"] = "https://discord.gg/CharaChorder";
 
 export default defineConfig({
   build: {
@@ -62,7 +63,6 @@ export default defineConfig({
                 "client/**/*.{js,css,ico,woff2,csv,png,webp,svg,webmanifest}",
                 "prerendered/**/*.html",
               ],
-              globIgnores: ["prerendered/pages/ccos/**/*"],
               ignoreURLParametersMatching: [/^import|redirectUrl|loginToken$/],
               maximumFileSizeToCacheInBytes: 10 * 1024 * 1024,
             },

vitest.config.ts

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