feat: enable stricter type checking options

feat: make the app more fault tolerant

src/lib/components/Action.svelte

@@ -10,7 +10,7 @@
 
   $: info =
     typeof action === "number"
-      ? KEYMAP_CODES[action] ?? { code: action }
+      ? KEYMAP_CODES.get(action) ?? { code: action }
       : action;
   $: dynamicMapping = info.keyCode && $osLayout.get(info.keyCode);
 

src/lib/components/ActionListItem.svelte

@@ -6,7 +6,7 @@
 
   export let id: number | KeyInfo;
 
-  $: key = (typeof id === "number" ? KEYMAP_CODES[id] ?? id : id) as
+  $: key = (typeof id === "number" ? KEYMAP_CODES.get(id) ?? id : id) as
     | number
     | KeyInfo;
 </script>
@@ -25,10 +25,10 @@
       {#if key.description}
         <i>{key.description}</i>
       {/if}
-      {#if key.category.name === "ASCII Macros"}
+      {#if key.category?.name === "ASCII Macros"}
         <span class="warning">{@html $LL.actionSearch.SHIFT_WARNING()}</span>
       {/if}
-      {#if key.category.name === "CP-1252"}
+      {#if key.category?.name === "CP-1252"}
         <span class="warning">{@html $LL.actionSearch.ALT_CODE_WARNING()}</span>
       {/if}
     </div>

src/lib/components/PwaStatus.svelte

@@ -1,4 +1,5 @@
 <script>
+  // @ts-expect-error no types here
   import { useRegisterSW } from "virtual:pwa-register/svelte";
 
   const { needRefresh, updateServiceWorker, offlineReady } = useRegisterSW();

src/lib/components/Terminal.svelte

@@ -4,7 +4,7 @@
 
   function submit(event: Event) {
     event.preventDefault();
-    $serialPort.send(value.trim());
+    $serialPort?.send(0, value.trim());
     value = "";
     io.scrollTo({ top: io.scrollHeight });
   }

src/lib/components/layout/ActionSelector.svelte

@@ -26,7 +26,7 @@
   );
 
   function search() {
-    results = index!.search(searchBox.value);
+    results = index!.search(searchBox.value) as number[];
     exact = exactIndex[searchBox.value]?.code;
     code = Number(searchBox.value);
   }

src/lib/components/layout/GenericLayout.svelte

@@ -121,9 +121,11 @@
 
   function edit(index: number) {
     const keyInfo = layoutInfo.keys[index];
+    if (!keyInfo) return;
     const clickedGroup = groupParent.children.item(index) as SVGGElement;
-    const nextAction = get(layout)[get(activeLayer)][keyInfo.id];
-    const currentAction = get(deviceLayout)[get(activeLayer)][keyInfo.id];
+    const nextAction = get(layout)[get(activeLayer)]?.[keyInfo.id];
+    const currentAction = get(deviceLayout)[get(activeLayer)]?.[keyInfo.id];
+    if (!nextAction || !currentAction) return;
     const component = new ActionSelector({
       target: document.body,
       props: {

src/lib/components/layout/KeyText.svelte

@@ -23,13 +23,12 @@
 </script>
 
 {#each positions as position, layer}
-  {@const { action: actionId, isApplied } = $layout[layer][key.id] ?? {
+  {@const { action: actionId, isApplied } = $layout[layer]?.[key.id] ?? {
     action: 0,
     isApplied: true,
   }}
-  {@const { code, icon, id, display, title, keyCode, variant } = KEYMAP_CODES[
-    actionId
-  ] ?? { code: actionId }}
+  {@const { code, icon, id, display, title, keyCode, variant } =
+    KEYMAP_CODES.get(actionId) ?? { code: actionId }}
   {@const dynamicMapping = keyCode && $osLayout.get(keyCode)}
   {@const tooltip =
     (title ?? id ?? `0x${code.toString(16)}`) +
@@ -53,7 +52,7 @@
     style:scale={isActive ? 1 : `var(--inactive-scale, ${inactiveScale})`}
     style:translate={isActive
       ? "0 0 0"
-      : `${direction[0].toPrecision(2)}px ${direction[1].toPrecision(2)}px 0`}
+      : `${direction[0]?.toPrecision(2)}px ${direction[1]?.toPrecision(2)}px 0`}
     style:rotate="{rotate}deg"
     use:action={{ title: tooltip }}
   >