feat: m4g support

src/lib/assets/layouts/m4g.yml

@@ -3,35 +3,22 @@ col:
   # Ring / Middle
   - offset: [2, 0]
     row:
-      - switch: { d: 25, e: 26, n: 27, w: 28, s: 29 }
-      - switch: { d: 20, e: 21, n: 22, w: 23, s: 24 }
-      - offset: [4, 0]
-        switch: { d: 65, w: 66, n: 67, e: 68, s: 69 }
-      - switch: { d: 70, w: 71, n: 72, e: 73, s: 74 }
+      - switch: { e: 26, n: 27, w: 28, s: 29 }
+      - switch: { e: 21, n: 22, w: 23, s: 24 }
   - offset: [2, 0]
     row:
-      - switch: { d: 40, e: 41, n: 42, w: 43, s: 44 }
-      - switch: { d: 35, e: 36, n: 37, w: 38, s: 39 }
-      - offset: [4, 0]
-        switch: { d: 80, w: 81, n: 82, e: 83, s: 84 }
-      - switch: { d: 85, w: 86, n: 87, e: 88, s: 89 }
+      - switch: { e: 41, n: 42, w: 43, s: 44 }
+      - switch: { e: 36, n: 37, w: 38, s: 39 }
   # Pinkie / Index
   - offset: [0, -3]
     row:
-      - switch: { d: 30, e: 31, n: 32, w: 33, s: 34 }
+      - switch: { e: 31, n: 32, w: 33, s: 34 }
       - offset: [4, 0]
-        switch: { d: 15, e: 16, n: 17, w: 18, s: 19 }
-      - switch: { d: 60, w: 61, n: 62, e: 63, s: 64 }
-      - offset: [4, 0]
-        switch: { d: 75, w: 76, n: 77, e: 78, s: 79 }
+        switch: { e: 16, n: 17, w: 18, s: 19 }
   # Thumbs
   - row:
       - offset: [5.5, 0.5]
-        switch: { d: 10, e: 11, n: 12, w: 13, s: 14 }
-      - offset: [1, 0.5]
-        switch: { d: 55, w: 56, n: 57, e: 58, s: 59 }
+        switch: { e: 11, n: 12, w: 13, s: 14 }
   - row:
       - offset: [4.5, -0.25]
-        switch: { d: 5, e: 6, n: 7, w: 8, s: 9 }
-      - offset: [3, -0.25]
-        switch: { d: 50, w: 51, n: 52, e: 53, s: 54 }
+        switch: { e: 6, n: 7, w: 8, s: 9 }

src/lib/assets/layouts/m4g_right_hand.yml

@@ -0,0 +1,24 @@
+name: M4G
+col:
+  # Ring / Middle
+  - offset: [2, 0]
+    row:
+      - switch: { e: 21, n: 22, w: 23, s: 24 }
+      - switch: { e: 26, n: 27, w: 28, s: 29 }
+  - offset: [2, 0]
+    row:
+      - switch: { e: 36, n: 37, w: 38, s: 39 }
+      - switch: { e: 41, n: 42, w: 43, s: 44 }
+  # Pinkie / Index
+  - offset: [0, -3]
+    row:
+      - switch: { e: 16, n: 17, w: 18, s: 19 }
+      - offset: [4, 0]
+        switch: { e: 31, n: 32, w: 33, s: 34 }
+  # Thumbs
+  - row:
+      - offset: [0.5, 0.5]
+        switch: { e: 11, n: 12, w: 13, s: 14 }
+  - row:
+      - offset: [1.5, -0.25]
+        switch: { e: 6, n: 7, w: 8, s: 9 }

src/lib/components/layout/Layout.svelte

@@ -37,6 +37,10 @@
       import("$lib/assets/layouts/m4g.yml").then(
         (it) => it.default as VisualLayout,
       ),
+    M4G_RIGHT_HAND: () =>
+      import("$lib/assets/layouts/m4g_right_hand.yml").then(
+        (it) => it.default as VisualLayout,
+      ),
   };
 </script>
 
@@ -70,6 +74,7 @@
 
     width: 100%;
     height: 100%;
+    max-height: 20cm;
   }
 
   fieldset {

src/lib/serial/device.ts

@@ -25,7 +25,8 @@ const KEY_COUNTS = {
   TWO: 90,
   LITE: 67,
   X: 256,
-  M4G: 90,
+  M4G: 64,
+  M4G_RIGHT_HAND: 64,
 } as const;
 
 if (

src/routes/(app)/config/settings/confirm-challenge.ts

@@ -1,12 +1,13 @@
 import type { Action } from "svelte/action";
 import ConfirmChallenge from "./ConfirmChallenge.svelte";
 import tippy from "tippy.js";
+import { mount, unmount } from "svelte";
 
 export const confirmChallenge: Action<
   HTMLElement,
   { onConfirm: () => void; challenge: string }
 > = (node, { onConfirm, challenge }) => {
-  let component: ConfirmChallenge | undefined;
+  let component: {} | undefined;
   let target: HTMLElement | undefined;
   const edit = tippy(node, {
     interactive: true,
@@ -15,15 +16,22 @@ export const confirmChallenge: Action<
       target = instance.popper.querySelector(".tippy-content") as HTMLElement;
       target.classList.add("active");
       if (component === undefined) {
-        component = new ConfirmChallenge({ target, props: { challenge } });
-        component.$on("confirm", () => {
-          edit.hide();
-          onConfirm();
+        component = mount(ConfirmChallenge, {
+          target,
+          props: {
+            challenge,
+            onconfirm() {
+              edit.hide();
+              onConfirm();
+            },
+          },
         });
       }
     },
     onHidden() {
-      component?.$destroy();
+      if (component) {
+        unmount(component);
+      }
       target?.classList.remove("active");
       component = undefined;
     },