refactor: update to Svelte 5 preview

feat: add charrecorder
feat: dynamic os layouts for CC1

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

@@ -21,7 +21,7 @@
   let resizeObserver: ResizeObserver;
 
   let abortIndexing: (() => void) | undefined;
-  let progress = 0;
+  let progress = $state(0);
 
   onMount(() => {
     resizeObserver = new ResizeObserver(() => {
@@ -37,11 +37,11 @@
 
   let index = new FlexSearch.Index();
   let searchIndex = writable<FlexSearch.Index | undefined>(undefined);
-  $: {
+  $effect(() => {
     abortIndexing?.();
     progress = 0;
     buildIndex($chords, $osLayout).then(searchIndex.set);
-  }
+  });
 
   function encodeChord(chord: ChordInfo, osLayout: Map<string, string>) {
     const plainPhrase: string[] = [""];
@@ -210,7 +210,7 @@
 
   setContext("cursor-crossfade", crossfade({}));
 
-  let page = 0;
+  let page = $state(0);
 </script>
 
 <svelte:head>
@@ -222,7 +222,7 @@
   <input
     type="search"
     placeholder={$LL.configure.chords.search.PLACEHOLDER(progress + 1)}
-    on:input={(event) => $searchIndex && search($searchIndex, event)}
+    oninput={(event) => $searchIndex && search($searchIndex, event)}
     class:loading={progress !== $chords.length - 1}
   />
   <div class="paginator">
@@ -234,12 +234,12 @@
   </div>
   <button
     class="icon"
-    on:click={() => (page = Math.max(page - 1, 0))}
+    onclick={() => (page = Math.max(page - 1, 0))}
     use:action={{ shortcut: "ctrl+left" }}>navigate_before</button
   >
   <button
     class="icon"
-    on:click={() => (page = Math.min(page + 1, $lastPage))}
+    onclick={() => (page = Math.min(page + 1, $lastPage))}
     use:action={{ shortcut: "ctrl+right" }}>navigate_next</button
   >
 </div>
@@ -250,22 +250,24 @@
     <div class="results">
       <table transition:fly={{ y: 48, easing: expoOut }}>
         {#if $lastPage !== -1}
-          {#if page === 0}
-            <tr
-              ><th class="new-chord"
-                ><ChordActionEdit
-                  on:submit={({ detail }) => insertChord(detail)}
-                /></th
-              ><td /><td /></tr
-            >
-          {/if}
-          {#each $items.slice(page * $pageSize - (page === 0 ? 0 : 1), (page + 1) * $pageSize - 1) as [chord] (JSON.stringify(chord?.id))}
-            {#if chord}
-              <tr>
-                <ChordEdit {chord} on:duplicate={() => (page = 0)} />
-              </tr>
+          <tbody>
+            {#if page === 0}
+              <tr
+                ><th class="new-chord"
+                  ><ChordActionEdit
+                    onsubmit={(action) => insertChord(action)}
+                  /></th
+                ><td></td><td></td></tr
+              >
             {/if}
-          {/each}
+            {#each $items.slice(page * $pageSize - (page === 0 ? 0 : 1), (page + 1) * $pageSize - 1) as [chord] (JSON.stringify(chord?.id))}
+              {#if chord}
+                <tr>
+                  <ChordEdit {chord} onduplicate={() => (page = 0)} />
+                </tr>
+              {/if}
+            {/each}</tbody
+          >
         {:else}
           <caption>{$LL.configure.chords.search.NO_RESULTS()}</caption>
         {/if}
@@ -277,7 +279,7 @@
           "\n\nDid you know? " +
           randomTips[Math.floor(randomTips.length * Math.random())]}
       ></textarea>
-      <button on:click={downloadVocabulary}
+      <button onclick={downloadVocabulary}
         ><span class="icon">download</span>
         {$LL.configure.chords.VOCABULARY()}</button
       >

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

@@ -1,21 +1,22 @@
 <script lang="ts">
   import type { ChordInfo } from "$lib/undo-redo";
+  import { SvelteSet } from "svelte/reactivity";
   import { changes, chordHashes, ChangeType } from "$lib/undo-redo";
-  import { createEventDispatcher } from "svelte";
   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 } from "$lib/serial/chord";
+  import { hashChord, type Chord } from "$lib/serial/chord";
 
-  export let chord: ChordInfo | undefined = undefined;
+  let {
+    chord = undefined,
+    onsubmit,
+  }: { chord?: ChordInfo; onsubmit: (actions: number[]) => void } = $props();
 
-  const dispatch = createEventDispatcher();
-
-  let pressedKeys = new Set<number>();
-  let editing = false;
+  let pressedKeys = new SvelteSet<number>();
+  let editing = $state(false);
 
   function compare(a: number, b: number) {
     return a - b;
@@ -37,7 +38,7 @@
   }
 
   function edit() {
-    pressedKeys = new Set();
+    pressedKeys.clear();
     editing = true;
   }
 
@@ -52,14 +53,13 @@
       return;
     }
     pressedKeys.add(input);
-    pressedKeys = pressedKeys;
   }
 
   function keyup() {
     if (!editing) return;
     editing = false;
     if (pressedKeys.size < 1) return;
-    if (!chord) return dispatch("submit", makeChordInput(...pressedKeys));
+    if (!chord) return onsubmit(makeChordInput(...pressedKeys));
     changes.update((changes) => {
       changes.push({
         type: ChangeType.Chord,
@@ -73,6 +73,7 @@
   }
 
   function addSpecial(event: MouseEvent) {
+    event.stopPropagation();
     selectAction(event, (action) => {
       changes.update((changes) => {
         changes.push({
@@ -88,7 +89,7 @@
 
   function* resolveCompound(chord?: ChordInfo) {
     if (!chord) return;
-    let current = chord;
+    let current: Chord = chord;
     for (let i = 0; i < 10; i++) {
       if (current.actions[3] !== 0) return;
       const compound = current.actions
@@ -106,10 +107,10 @@
     return;
   }
 
-  $: chordActions = chord?.actions
-    .slice(chord.actions.lastIndexOf(0) + 1)
-    .toSorted(compare);
-  $: compoundInputs = [...resolveCompound(chord)].reverse();
+  let chordActions = $derived(
+    chord?.actions.slice(chord.actions.lastIndexOf(0) + 1).toSorted(compare),
+  );
+  let compoundInputs = $derived([...resolveCompound(chord)].reverse());
 </script>
 
 <button
@@ -120,10 +121,10 @@
     (chordActions.length < 2 ||
       chordActions.some((it, i) => chordActions[i] !== it))}
   class="chord"
-  on:click={edit}
-  on:keydown={keydown}
-  on:keyup={keyup}
-  on:blur={keyup}
+  onclick={edit}
+  onkeydown={keydown}
+  onkeyup={keyup}
+  onblur={keyup}
 >
   {#if editing && pressedKeys.size === 0}
     <span>{$LL.configure.chords.HOLD_KEYS()}</span>
@@ -143,12 +144,10 @@
   {/if}
   <ActionString
     display="keys"
-    actions={editing ? [...pressedKeys].sort(compare) : chordActions ?? []}
+    actions={editing ? [...pressedKeys].sort(compare) : (chordActions ?? [])}
   />
   <sup>•</sup>
-  <button class="icon add" on:click|stopPropagation={addSpecial}
-    >add_circle</button
-  >
+  <div role="button" class="icon add" onclick={addSpecial}>add_circle</div>
 </button>
 
 <style lang="scss">

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

@@ -8,11 +8,10 @@
   import { charaFileToUriComponent } from "$lib/share/share-url";
   import SharePopup from "../SharePopup.svelte";
   import tippy from "tippy.js";
-  import { createEventDispatcher } from "svelte";
+  import { mount, unmount } from "svelte";
 
-  export let chord: ChordInfo;
-
-  const dispatch = createEventDispatcher<{ duplicate: void }>();
+  let { chord, onduplicate }: { chord: ChordInfo; onduplicate: () => void } =
+    $props();
 
   function remove() {
     changes.update((changes) => {
@@ -47,7 +46,7 @@
     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]!++;
     }
 
     changes.update((changes) => {
@@ -60,7 +59,7 @@
       return changes;
     });
 
-    dispatch("duplicate");
+    onduplicate();
   }
 
   async function share(event: Event) {
@@ -74,48 +73,48 @@
       }),
     );
     await navigator.clipboard.writeText(url.toString());
-    let shareComponent: SharePopup;
+    let shareComponent = {};
     tippy(event.target as HTMLElement, {
       onCreate(instance) {
         const target = instance.popper.querySelector(".tippy-content")!;
-        shareComponent = new SharePopup({ target });
+        shareComponent = mount(SharePopup, { target });
       },
       onHidden(instance) {
         instance.destroy();
       },
       onDestroy(_instance) {
-        shareComponent.$destroy();
+        unmount(shareComponent);
       },
     }).show();
   }
 </script>
 
 <th>
-  <ChordActionEdit {chord} />
+  <ChordActionEdit {chord} onsubmit={() => {}} />
 </th>
 <td>
   <ChordPhraseEdit {chord} />
 </td>
 <td class="table-buttons">
   {#if !chord.deleted}
-    <button transition:slide class="icon compact" on:click={remove}
+    <button transition:slide class="icon compact" onclick={remove}
       >delete</button
     >
   {:else}
-    <button transition:slide class="icon compact" on:click={restore}
+    <button transition:slide class="icon compact" onclick={restore}
       >restore_from_trash</button
     >
   {/if}
-  <button disabled={chord.deleted} class="icon compact" on:click={duplicate}
+  <button disabled={chord.deleted} class="icon compact" onclick={duplicate}
     >content_copy</button
   >
   <button
     class="icon compact"
     class:disabled={chord.isApplied}
-    on:click={restore}>undo</button
+    onclick={restore}>undo</button
   >
-  <div class="separator" />
-  <button class="icon compact" on:click={share}>share</button>
+  <div class="separator"></div>
+  <button class="icon compact" onclick={share}>share</button>
 </td>
 
 <style lang="scss">

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

@@ -9,11 +9,11 @@
   import { serialPort } from "$lib/serial/connection";
   import { get } from "svelte/store";
 
-  export let chord: ChordInfo;
+  let { chord }: { chord: ChordInfo } = $props();
 
   onMount(() => {
     if (chord.phrase.length === 0) {
-      box.focus();
+      box?.focus();
     }
   });
 
@@ -40,6 +40,7 @@
   }
 
   function moveCursor(to: number) {
+    if (!box) return;
     cursorPosition = Math.max(0, Math.min(to, chord.phrase.length));
     const item = box.children.item(cursorPosition) as HTMLElement;
     cursorOffset = item.offsetLeft + item.offsetWidth;
@@ -71,7 +72,7 @@
   }
 
   function clickCursor(event: MouseEvent) {
-    if (event.target === button) return;
+    if (box === undefined || event.target === button) return;
     const distance = (event as unknown as { layerX: number }).layerX;
 
     let i = 0;
@@ -93,37 +94,36 @@
         insertAction(cursorPosition, action);
         tick().then(() => moveCursor(cursorPosition + 1));
       },
-      () => box.focus(),
+      () => box?.focus(),
     );
   }
 
-  let button: HTMLButtonElement;
-  let box: HTMLDivElement;
+  let button: HTMLButtonElement | undefined = $state();
+  let box: HTMLDivElement | undefined = $state();
   let cursorPosition = 0;
-  let cursorOffset = 0;
+  let cursorOffset = $state(0);
 
-  let hasFocus = false;
+  let hasFocus = $state(false);
 </script>
 
-<!-- svelte-ignore a11y-autofocus -->
 <div
-  on:keydown={keypress}
-  on:mousedown={clickCursor}
+  onkeydown={keypress}
+  onmousedown={clickCursor}
   role="textbox"
   tabindex="0"
   bind:this={box}
   class:edited={!chord.deleted && chord.phraseChanged}
-  on:focusin={() => (hasFocus = true)}
-  on:focusout={(event) => {
+  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} on:click={addSpecial}>add</button>
+      <button class="icon" bind:this={button} onclick={addSpecial}>add</button>
     </div>
   {:else}
-    <div />
+    <div></div>
     <!-- placeholder for cursor placement -->
   {/if}
   <ActionString actions={chord.phrase} />

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

@@ -1,12 +1,21 @@
 import ActionSelector from "$lib/components/layout/ActionSelector.svelte";
-import { tick } from "svelte";
+import { mount, unmount, tick } from "svelte";
 
 export function selectAction(
   event: MouseEvent | KeyboardEvent,
   select: (action: number) => void,
   dismissed?: () => void,
 ) {
-  const component = new ActionSelector({ target: document.body });
+  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();
@@ -40,14 +49,8 @@ export function selectAction(
 
     await dialogAnimation.finished;
 
-    component.$destroy();
+    unmount(component);
     await tick();
     dismissed?.();
   }
-
-  component.$on("close", closed);
-  component.$on("select", ({ detail }) => {
-    select(detail);
-    closed();
-  });
 }

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

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { share } from "$lib/share";
   import tippy from "tippy.js";
-  import { setContext } from "svelte";
+  import { mount, setContext, unmount } from "svelte";
   import Layout from "$lib/components/layout/Layout.svelte";
   import { charaFileToUriComponent } from "$lib/share/share-url";
   import SharePopup from "../SharePopup.svelte";
@@ -25,17 +25,17 @@
       }),
     );
     await navigator.clipboard.writeText(url.toString());
-    let shareComponent: SharePopup;
+    let shareComponent: {};
     tippy(event.target as HTMLElement, {
       onCreate(instance) {
         const target = instance.popper.querySelector(".tippy-content")!;
-        shareComponent = new SharePopup({ target });
+        shareComponent = mount(SharePopup, { target });
       },
       onHidden(instance) {
         instance.destroy();
       },
       onDestroy() {
-        shareComponent.$destroy();
+        unmount(shareComponent);
       },
     }).show();
   }

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

@@ -229,12 +229,6 @@
           />ms</span
         ></label
       >
-      <label
-        >Compound Chording<input
-          type="checkbox"
-          use:setting={{ id: 0x61 }}
-        /></label
-      >
     </fieldset>
 
     <fieldset>

src/routes/(app)/config/settings/ConfirmChallenge.svelte

@@ -1,20 +1,18 @@
 <script lang="ts">
   import { serialPort } from "$lib/serial/connection";
-  import { createEventDispatcher } from "svelte";
 
-  export let challenge: string;
+  let { challenge, onconfirm }: { challenge: string; onconfirm: () => void } =
+    $props();
 
-  let challengeInput = "";
-  $: challengeString = `${challenge} ${$serialPort!.device}`;
-  $: isValid = challengeInput === challengeString;
-
-  const dispatch = createEventDispatcher();
+  let challengeInput = $state("");
+  let challengeString = $derived(`${challenge} ${$serialPort!.device}`);
+  let isValid = $derived(challengeInput === challengeString);
 </script>
 
 <h3>Type the following to confirm the action</h3>
 
 <p>{challengeString}</p>
-<!-- svelte-ignore a11y-autofocus -->
+<!-- svelte-ignore a11y_autofocus -->
 <input
   autofocus
   type="text"
@@ -22,9 +20,7 @@
   placeholder={challengeString}
 />
 
-<button disabled={!isValid} on:click={() => dispatch("confirm")}
-  >Confirm {challenge}</button
->
+<button disabled={!isValid} onclick={onconfirm}>Confirm {challenge}</button>
 
 <style lang="scss">
   input[type="text"] {