From f2da7f087f9cc216df37b2c657decfd03a8f1bd3 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Wed, 17 Jun 2026 19:23:24 +0200
Subject: [PATCH 01/61] wip

---
 frontend/src/html/pages/test.html             |   1 +
 frontend/src/ts/components/mount.tsx          |   2 +
 .../src/ts/components/pages/test/Keymap.tsx   | 100 ++++++++++++++++++
 .../components/pages/test/keymapConverter.ts  |   0
 frontend/src/ts/event-handlers/modifiers.ts   |  17 +++
 frontend/src/ts/index.ts                      |   1 +
 frontend/src/ts/states/modifiers.ts           |  23 ++++
 frontend/src/ts/states/test.ts                |  28 ++++-
 frontend/src/ts/utils/misc.ts                 |   7 +-
 packages/schemas/src/layouts.ts               |  27 ++---
 10 files changed, 191 insertions(+), 15 deletions(-)
 create mode 100644 frontend/src/ts/components/pages/test/Keymap.tsx
 create mode 100644 frontend/src/ts/components/pages/test/keymapConverter.ts
 create mode 100644 frontend/src/ts/event-handlers/modifiers.ts
 create mode 100644 frontend/src/ts/states/modifiers.ts

diff --git a/frontend/src/html/pages/test.html b/frontend/src/html/pages/test.html
index 55cdb2531f42..40fa5c8af812 100644
--- a/frontend/src/html/pages/test.html
+++ b/frontend/src/html/pages/test.html
@@ -66,6 +66,7 @@
     <div id="compositionDisplay"></div>
 
     <div id="keymap" class="hidden"></div>
+    <mount data-component="keymap"></mount>
 
     <button
       id="restartTestButton"
diff --git a/frontend/src/ts/components/mount.tsx b/frontend/src/ts/components/mount.tsx
index 6a2a1d83b3a0..ce8f5311484d 100644
--- a/frontend/src/ts/components/mount.tsx
+++ b/frontend/src/ts/components/mount.tsx
@@ -22,6 +22,7 @@ import { LoginPage } from "./pages/login/LoginPage";
 import { ProfilePage } from "./pages/profile/ProfilePage";
 import { ProfileSearchPage } from "./pages/profile/ProfileSearchPage";
 import { SettingsPage } from "./pages/settings/SettingsPage";
+import { Keymap } from "./pages/test/Keymap";
 import { TestConfig } from "./pages/test/TestConfig";
 import { Popups } from "./popups/Popups";
 import { TestModesNotice } from "./test/modes-notice/TestModesNotice";
@@ -48,6 +49,7 @@ const components: Record<string, () => JSXElement> = {
   friendspage: () => <FriendsPage />,
   blockedusers: () => <BlockedUsers />,
   notfoundpage: () => <NotFoundPage />,
+  keymap: () => <Keymap />,
 };
 
 function mountToMountpoint(name: string, component: () => JSXElement): void {
diff --git a/frontend/src/ts/components/pages/test/Keymap.tsx b/frontend/src/ts/components/pages/test/Keymap.tsx
new file mode 100644
index 000000000000..2771f3522f79
--- /dev/null
+++ b/frontend/src/ts/components/pages/test/Keymap.tsx
@@ -0,0 +1,100 @@
+import { KeyLegends, LayoutObject } from "@monkeytype/schemas/layouts";
+import { createMemo, For, Show } from "solid-js";
+
+import { getConfig } from "../../../config/store";
+import { getModifierState } from "../../../states/modifiers";
+import { getKeymapLayout, keymapLayoutObject } from "../../../states/test";
+import { typedEntries, typedValues } from "../../../utils/misc";
+
+export function Keymap() {
+  return (
+    <Show when={keymapLayoutObject()} fallback={<div>Loading...</div>}>
+      <Keyboard
+        displayName={getKeymapLayout().layoutNameDisplayString}
+        layoutData={keymapLayoutObject() as LayoutObject}
+      />
+    </Show>
+  );
+}
+
+function Keyboard(props: { displayName: string; layoutData: LayoutObject }) {
+  const hasAltGr = createMemo(() =>
+    typedValues(props.layoutData.keys).some((key) =>
+      key.some((legend) => legend.length > 2),
+    ),
+  );
+
+  const layer = createMemo(() => {
+    if (hasAltGr() && getModifierState().shift && getModifierState().altGr) {
+      return 3;
+    }
+    if (hasAltGr() && getModifierState().altGr) return 2;
+    if (getModifierState().shift) return 1;
+
+    return 0;
+  });
+
+  const showFirstRow =
+    getConfig.keymapShowTopRow === "always" ||
+    (getConfig.keymapShowTopRow === "layout" &&
+      keymapLayoutObject()?.keymapShowTopRow);
+
+  // Convert layout to KeyboardDefinition format
+  const keyboardDef = createMemo(() => props.layoutData);
+
+  return (
+    <div data-ui-element="keymap" class="flex flex-col gap-2 text-sm text-sub">
+      <Show when={keyboardDef()} fallback={<div>Loading...</div>}>
+        <KeyboardDefinitionRenderer
+          keyboardDef={keyboardDef().keys}
+          layer={layer()}
+          showFirstRow={showFirstRow ?? false}
+        />
+      </Show>
+    </div>
+  );
+}
+
+function KeyboardDefinitionRenderer(props: {
+  keyboardDef: LayoutObject["keys"];
+  layer: number;
+  showFirstRow: boolean;
+}) {
+  return (
+    <For each={typedEntries(props.keyboardDef)}>
+      {([rowId, keys]) => (
+        <Show when={rowId !== "row1" || props.showFirstRow}>
+          <div class="flex flex-row gap-2">
+            <For each={keys}>
+              {(key, col) => (
+                <Show when={rowId !== "row4" || col() !== 0}>
+                  <Key legend={key.at(props.layer) ?? ""} />
+                </Show>
+              )}
+            </For>
+          </div>
+        </Show>
+      )}
+    </For>
+  );
+}
+
+function Key(props: { legend: string; x?: number }) {
+  return (
+    <div
+      class="flex h-8 aspect-square bg-sub-alt rounded justify-center items-center"
+      style={{ transform: `translateX(${(props.x ?? 0) * 16}px)` }}
+    >
+      {props.legend}
+    </div>
+  );
+}
+
+type Row = "row1" | "row2" | "row3" | "row4" | "row5";
+type KeyDefinition = {
+  legends: KeyLegends;
+  width: number;
+  height: number;
+  x: number;
+};
+type KeyboardDefinition = Record<Row, KeyDefinition[]>;
diff --git a/frontend/src/ts/components/pages/test/keymapConverter.ts b/frontend/src/ts/components/pages/test/keymapConverter.ts
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/frontend/src/ts/event-handlers/modifiers.ts b/frontend/src/ts/event-handlers/modifiers.ts
new file mode 100644
index 000000000000..59a3a3ce060b
--- /dev/null
+++ b/frontend/src/ts/event-handlers/modifiers.ts
@@ -0,0 +1,17 @@
+import { updateModifierState } from "../states/modifiers";
+
+document.addEventListener("keydown", (e: KeyboardEvent) => {
+  handleKey(e, true);
+});
+
+document.addEventListener("keyup", (e: KeyboardEvent) => {
+  handleKey(e, false);
+});
+
+function handleKey(e: KeyboardEvent, updateValue: boolean): void {
+  if (e.code === "ShiftLeft") updateModifierState({ leftShift: updateValue });
+  if (e.code === "ShiftRight") updateModifierState({ rightShift: updateValue });
+  if (e.code === "AltRight" || e.code === "AltLeft") {
+    updateModifierState({ altGr: updateValue });
+  }
+}
diff --git a/frontend/src/ts/index.ts b/frontend/src/ts/index.ts
index b9e848c87352..051c144ee46a 100644
--- a/frontend/src/ts/index.ts
+++ b/frontend/src/ts/index.ts
@@ -7,6 +7,7 @@ import "solid-devtools";
 import "./event-handlers/global";
 import "./event-handlers/keymap";
 import "./event-handlers/test";
+import "./event-handlers/modifiers";
 import "./modals/google-sign-up";
 
 import { init } from "./firebase";
diff --git a/frontend/src/ts/states/modifiers.ts b/frontend/src/ts/states/modifiers.ts
new file mode 100644
index 000000000000..5facc8bdb3c8
--- /dev/null
+++ b/frontend/src/ts/states/modifiers.ts
@@ -0,0 +1,23 @@
+import { createSignalWithSetters } from "../hooks/createSignalWithSetters";
+
+type ModifierState = {
+  shift: boolean;
+  altGr: boolean;
+  leftShift: boolean;
+  rightShift: boolean;
+};
+
+export const [getModifierState, { updateModifierState }] =
+  createSignalWithSetters<ModifierState>({
+    shift: false,
+    altGr: false,
+    leftShift: false,
+    rightShift: false,
+  })({
+    updateModifierState: (set, val: Partial<Omit<ModifierState, "shift">>) =>
+      set((prev) => ({
+        ...prev,
+        ...val,
+        shift: val.leftShift ?? val.rightShift ?? prev.shift,
+      })),
+  });
diff --git a/frontend/src/ts/states/test.ts b/frontend/src/ts/states/test.ts
index 9654775e29f0..823930bd861e 100644
--- a/frontend/src/ts/states/test.ts
+++ b/frontend/src/ts/states/test.ts
@@ -1,4 +1,9 @@
-import { createSignal, createEffect, createMemo } from "solid-js";
+import {
+  createSignal,
+  createEffect,
+  createMemo,
+  createResource,
+} from "solid-js";
 import { Challenge } from "@monkeytype/schemas/challenges";
 import { getConfig } from "../config/store";
 
@@ -8,6 +13,9 @@ import { getActivePage, getCustomTextIndicator } from "./core";
 import { QuoteWithTextSplit } from "../types/quotes";
 import { CompletedEvent, IncompleteTest } from "@monkeytype/schemas/results";
 import { createSignalWithSetters } from "../hooks/createSignalWithSetters";
+import { LayoutObject } from "@monkeytype/schemas/layouts";
+import { getLayout } from "../utils/json-data";
+import { replaceUnderscoresWithSpaces } from "../utils/strings";
 
 export const [wordsHaveNewline, setWordsHaveNewline] = createSignal(false);
 export const [wordsHaveTab, setWordsHaveTab] = createSignal(false);
@@ -54,3 +62,21 @@ createEffect(() => {
     ),
   );
 });
+
+export const getKeymapLayout = createMemo<{
+  layout: string;
+  layoutNameDisplayString: string;
+}>(() => {
+  const isOverride = getConfig.keymapLayout === "overrideSync";
+  const raw = isOverride ? getConfig.layout : getConfig.keymapLayout;
+
+  const layout = raw === "default" ? "qwerty" : raw;
+  const layoutNameDisplayString = replaceUnderscoresWithSpaces(raw);
+
+  return { layout: layout, layoutNameDisplayString };
+});
+
+export const [keymapLayoutObject] = createResource(
+  getKeymapLayout,
+  async (layout) => getLayout(layout.layout),
+);
diff --git a/frontend/src/ts/utils/misc.ts b/frontend/src/ts/utils/misc.ts
index 6480e38ae000..80c0d957d7f9 100644
--- a/frontend/src/ts/utils/misc.ts
+++ b/frontend/src/ts/utils/misc.ts
@@ -472,13 +472,18 @@ export function getBoundingRectOfElements(elements: HTMLElement[]): DOMRect {
     },
   };
 }
-
 export function typedKeys<T extends object>(
   obj: T,
 ): T extends T ? (keyof T)[] : never {
   return Object.keys(obj) as unknown as T extends T ? (keyof T)[] : never;
 }
 
+export function typedValues<T extends object>(
+  obj: T,
+): { [K in keyof T]: T[K] }[keyof T][] {
+  return Object.values(obj) as { [K in keyof T]: T[K] }[keyof T][];
+}
+
 export function typedEntries<T extends object>(
   obj: T,
 ): { [K in keyof T]: [K, T[K]] }[keyof T][] {
diff --git a/packages/schemas/src/layouts.ts b/packages/schemas/src/layouts.ts
index ce3cc2cd32d9..aebbc943d185 100644
--- a/packages/schemas/src/layouts.ts
+++ b/packages/schemas/src/layouts.ts
@@ -249,7 +249,8 @@ export const LayoutNameSchema = z.enum(
 
 export type LayoutName = z.infer<typeof LayoutNameSchema>;
 
-const charDefinitionSchema = z.array(z.string().length(1)).min(1).max(4);
+const KeyLegendsSchema = z.array(z.string().length(1)).min(1).max(4);
+export type KeyLegends = z.infer<typeof KeyLegendsSchema>;
 const row5CharDefinitionSchema = z.array(z.string().length(1)).min(1).max(4);
 
 const commonLayoutSchema = z
@@ -264,10 +265,10 @@ const ansiLayoutSchema = commonLayoutSchema
     type: z.literal("ansi"),
     keys: z
       .object({
-        row1: z.array(charDefinitionSchema).length(13),
-        row2: z.array(charDefinitionSchema).length(13),
-        row3: z.array(charDefinitionSchema).length(11),
-        row4: z.array(charDefinitionSchema).length(10),
+        row1: z.array(KeyLegendsSchema).length(13),
+        row2: z.array(KeyLegendsSchema).length(13),
+        row3: z.array(KeyLegendsSchema).length(11),
+        row4: z.array(KeyLegendsSchema).length(10),
         row5: z.array(row5CharDefinitionSchema).min(1).max(2),
       })
       .strict(),
@@ -279,10 +280,10 @@ const isoLayoutSchema = commonLayoutSchema
     type: z.literal("iso"),
     keys: z
       .object({
-        row1: z.array(charDefinitionSchema).length(13),
-        row2: z.array(charDefinitionSchema).length(12),
-        row3: z.array(charDefinitionSchema).length(12),
-        row4: z.array(charDefinitionSchema).length(11),
+        row1: z.array(KeyLegendsSchema).length(13),
+        row2: z.array(KeyLegendsSchema).length(12),
+        row3: z.array(KeyLegendsSchema).length(12),
+        row4: z.array(KeyLegendsSchema).length(11),
         row5: z.array(row5CharDefinitionSchema).min(1).max(2),
       })
       .strict(),
@@ -294,10 +295,10 @@ const matrixLayoutSchema = commonLayoutSchema
     type: z.literal("matrix"),
     keys: z
       .object({
-        row1: z.array(charDefinitionSchema).length(0),
-        row2: z.array(charDefinitionSchema).length(10),
-        row3: z.array(charDefinitionSchema).length(10),
-        row4: z.array(charDefinitionSchema).length(4),
+        row1: z.array(KeyLegendsSchema).length(0),
+        row2: z.array(KeyLegendsSchema).length(10),
+        row3: z.array(KeyLegendsSchema).length(10),
+        row4: z.array(KeyLegendsSchema).length(4),
         row5: z.array(row5CharDefinitionSchema).length(0),
       })
       .strict(),

From b570b60609b9f41dc1a1e0e94de2f397e07e9c25 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Wed, 17 Jun 2026 21:21:38 +0200
Subject: [PATCH 02/61] converter

---
 .../pages/test/keymapConverter.spec.ts        | 613 ++++++++++++++++++
 .../src/ts/components/pages/test/Keymap.tsx   |  52 +-
 .../components/pages/test/keymapConverter.ts  | 134 ++++
 frontend/src/ts/states/test.ts                |   1 -
 4 files changed, 778 insertions(+), 22 deletions(-)
 create mode 100644 frontend/__tests__/components/pages/test/keymapConverter.spec.ts

diff --git a/frontend/__tests__/components/pages/test/keymapConverter.spec.ts b/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
new file mode 100644
index 000000000000..d4560b798b3a
--- /dev/null
+++ b/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
@@ -0,0 +1,613 @@
+import { describe, expect, it } from "vitest";
+import { convertLayoutToKeymap } from "../../../../src/ts/components/pages/test/keymapConverter";
+
+import qwertyLayout from "../../../../static/layouts/qwerty.json";
+import { LayoutObject } from "@monkeytype/schemas/layouts";
+
+describe("keymap converter", () => {
+  describe("convertLayoutToKeymap", () => {
+    it("converts qwerty staggered", () => {
+      const result = convertLayoutToKeymap(qwertyLayout as LayoutObject, {
+        displayName: "qwerty",
+        keymapStyle: "staggered",
+        showAllKeys: false,
+      });
+
+      expect(result.row1).toEqual([
+        {
+          height: 1,
+          legends: ["1", "!", "1", "!"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["2", "@", "2", "@"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["3", "#", "3", "#"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["4", "$", "4", "$"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["5", "%", "5", "%"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["6", "^", "6", "^"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["7", "&", "7", "&"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["8", "*", "8", "*"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["9", "(", "9", "("],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["0", ")", "0", ")"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["-", "_", "-", "_"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["=", "+", "=", "+"],
+          width: 1,
+          x: 0,
+        },
+      ]);
+
+      expect(result.row2).toEqual([
+        {
+          height: 1,
+          legends: ["q", "Q", "q", "Q"],
+          width: 1,
+          x: 2,
+        },
+        {
+          height: 1,
+          legends: ["w", "W", "w", "W"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["e", "E", "e", "E"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["r", "R", "r", "R"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["t", "T", "t", "T"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["y", "Y", "y", "Y"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["u", "U", "u", "U"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["i", "I", "i", "I"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["o", "O", "o", "O"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["p", "P", "p", "P"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["[", "{", "[", "{"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["]", "}", "]", "}"],
+          width: 1,
+          x: 0,
+        },
+      ]);
+
+      expect(result.row3).toEqual([
+        {
+          height: 1,
+          legends: ["a", "A", "a", "A"],
+          width: 1,
+          x: 4,
+        },
+        {
+          height: 1,
+          legends: ["s", "S", "s", "S"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["d", "D", "d", "D"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["f", "F", "f", "F"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["g", "G", "g", "G"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["h", "H", "h", "H"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["j", "J", "j", "J"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["k", "K", "k", "K"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["l", "L", "l", "L"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: [";", ":", ";", ":"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["'", '"', "'", '"'],
+          width: 1,
+          x: 0,
+        },
+      ]);
+
+      expect(result.row4).toEqual([
+        {
+          height: 1,
+          legends: ["z", "Z", "z", "Z"],
+          width: 1,
+          x: 6,
+        },
+        {
+          height: 1,
+          legends: ["x", "X", "x", "X"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["c", "C", "c", "C"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["v", "V", "v", "V"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["b", "B", "b", "B"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["n", "N", "n", "N"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["m", "M", "m", "M"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: [",", "<", ",", "<"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: [".", ">", ".", ">"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["/", "?", "/", "?"],
+          width: 1,
+          x: 0,
+        },
+      ]);
+
+      expect(result.row5).toEqual([
+        {
+          legends: ["qwerty", "qwerty", "qwerty", "qwerty"],
+          height: 1,
+          width: 6,
+          x: 3,
+        },
+      ]);
+    });
+
+    it("converts qwerty split", () => {
+      const result = convertLayoutToKeymap(qwertyLayout as LayoutObject, {
+        displayName: "qwerty",
+        keymapStyle: "split",
+        showAllKeys: false,
+      });
+
+      expect(result.row1).toEqual([
+        {
+          height: 1,
+          legends: ["1", "!", "1", "!"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["2", "@", "2", "@"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["3", "#", "3", "#"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["4", "$", "4", "$"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["5", "%", "5", "%"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["6", "^", "6", "^"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["7", "&", "7", "&"],
+          width: 1,
+          x: 8,
+        },
+        {
+          height: 1,
+          legends: ["8", "*", "8", "*"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["9", "(", "9", "("],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["0", ")", "0", ")"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["-", "_", "-", "_"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["=", "+", "=", "+"],
+          width: 1,
+          x: 0,
+        },
+      ]);
+
+      expect(result.row2).toEqual([
+        {
+          height: 1,
+          legends: ["q", "Q", "q", "Q"],
+          width: 1,
+          x: 2,
+        },
+        {
+          height: 1,
+          legends: ["w", "W", "w", "W"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["e", "E", "e", "E"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["r", "R", "r", "R"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["t", "T", "t", "T"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["y", "Y", "y", "Y"],
+          width: 1,
+          x: 8,
+        },
+        {
+          height: 1,
+          legends: ["u", "U", "u", "U"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["i", "I", "i", "I"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["o", "O", "o", "O"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["p", "P", "p", "P"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["[", "{", "[", "{"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["]", "}", "]", "}"],
+          width: 1,
+          x: 0,
+        },
+      ]);
+
+      expect(result.row3).toEqual([
+        {
+          height: 1,
+          legends: ["a", "A", "a", "A"],
+          width: 1,
+          x: 4,
+        },
+        {
+          height: 1,
+          legends: ["s", "S", "s", "S"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["d", "D", "d", "D"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["f", "F", "f", "F"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["g", "G", "g", "G"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["h", "H", "h", "H"],
+          width: 1,
+          x: 8,
+        },
+        {
+          height: 1,
+          legends: ["j", "J", "j", "J"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["k", "K", "k", "K"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["l", "L", "l", "L"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: [";", ":", ";", ":"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["'", '"', "'", '"'],
+          width: 1,
+          x: 0,
+        },
+      ]);
+
+      expect(result.row4).toEqual([
+        {
+          height: 1,
+          legends: ["z", "Z", "z", "Z"],
+          width: 1,
+          x: 6,
+        },
+        {
+          height: 1,
+          legends: ["x", "X", "x", "X"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["c", "C", "c", "C"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["v", "V", "v", "V"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["b", "B", "b", "B"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["n", "N", "n", "N"],
+          width: 1,
+          x: 8,
+        },
+        {
+          height: 1,
+          legends: ["m", "M", "m", "M"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: [",", "<", ",", "<"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: [".", ">", ".", ">"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["/", "?", "/", "?"],
+          width: 1,
+          x: 0,
+        },
+      ]);
+
+      expect(result.row5).toEqual([
+        {
+          legends: ["qwerty", "qwerty", "qwerty", "qwerty"],
+          height: 1,
+          width: 3,
+          x: 23,
+        },
+        {
+          legends: ["", "", "", ""],
+          height: 1,
+          width: 3,
+          x: 8,
+        },
+      ]);
+    });
+  });
+});
diff --git a/frontend/src/ts/components/pages/test/Keymap.tsx b/frontend/src/ts/components/pages/test/Keymap.tsx
index 2771f3522f79..5dac07e58a8d 100644
--- a/frontend/src/ts/components/pages/test/Keymap.tsx
+++ b/frontend/src/ts/components/pages/test/Keymap.tsx
@@ -1,10 +1,11 @@
-import { KeyLegends, LayoutObject } from "@monkeytype/schemas/layouts";
+import { LayoutObject } from "@monkeytype/schemas/layouts";
 import { createMemo, For, Show } from "solid-js";
 
 import { getConfig } from "../../../config/store";
 import { getModifierState } from "../../../states/modifiers";
 import { getKeymapLayout, keymapLayoutObject } from "../../../states/test";
 import { typedEntries, typedValues } from "../../../utils/misc";
+import { convertLayoutToKeymap, KeyboardDefinition } from "./keymapConverter";
 
 export function Keymap() {
   return (
@@ -40,13 +41,19 @@ function Keyboard(props: { displayName: string; layoutData: LayoutObject }) {
       keymapLayoutObject()?.keymapShowTopRow);
 
   // Convert layout to KeyboardDefinition format
-  const keyboardDef = createMemo(() => props.layoutData);
+  const keyboardDef = createMemo(() =>
+    convertLayoutToKeymap(props.layoutData, {
+      displayName: props.displayName,
+      keymapStyle: getConfig.keymapStyle,
+      showAllKeys: false,
+    }),
+  );
 
   return (
     <div data-ui-element="keymap" class="flex flex-col gap-2 text-sm text-sub">
       <Show when={keyboardDef()} fallback={<div>Loading...</div>}>
         <KeyboardDefinitionRenderer
-          keyboardDef={keyboardDef().keys}
+          keyboardDef={keyboardDef()}
           layer={layer()}
           showFirstRow={showFirstRow ?? false}
         />
@@ -56,7 +63,7 @@ function Keyboard(props: { displayName: string; layoutData: LayoutObject }) {
 }
 
 function KeyboardDefinitionRenderer(props: {
-  keyboardDef: LayoutObject["keys"];
+  keyboardDef: KeyboardDefinition;
   layer: number;
   showFirstRow: boolean;
 }) {
@@ -64,12 +71,15 @@ function KeyboardDefinitionRenderer(props: {
     <For each={typedEntries(props.keyboardDef)}>
       {([rowId, keys]) => (
         <Show when={rowId !== "row1" || props.showFirstRow}>
-          <div class="flex flex-row gap-2">
+          <div class="flex flex-row">
             <For each={keys}>
-              {(key, col) => (
-                <Show when={rowId !== "row4" || col() !== 0}>
-                  <Key legend={key.at(props.layer) ?? ""} />
-                </Show>
+              {(key) => (
+                <Key
+                  legend={key.legends.at(props.layer) ?? ""}
+                  x={key.x}
+                  width={key.width}
+                  height={key.height}
+                />
               )}
             </For>
           </div>
@@ -79,22 +89,22 @@ function KeyboardDefinitionRenderer(props: {
   );
 }
 
-function Key(props: { legend: string; x?: number }) {
+function Key(props: {
+  legend: string;
+  x?: number;
+  width?: number;
+  height?: number;
+}) {
   return (
     <div
-      class="flex h-8 aspect-square bg-sub-alt rounded justify-center items-center"
-      style={{ transform: `translateX(${(props.x ?? 0) * 16}px)` }}
+      class="flex items-center justify-center rounded border-2 border-bg bg-sub-alt"
+      style={{
+        height: `${(props.height ?? 1) * 2}rem`,
+        width: `${(props.width ?? 1) * 2}rem`,
+        "margin-left": `${(props.x ?? 0) * 0.25}rem`,
+      }}
     >
       {props.legend}
     </div>
   );
 }
-
-type Row = "row1" | "row2" | "row3" | "row4" | "row5";
-type KeyDefinition = {
-  legends: KeyLegends;
-  width: number;
-  height: number;
-  x: number;
-};
-type KeyboardDefinition = Record<Row, KeyDefinition[]>;
diff --git a/frontend/src/ts/components/pages/test/keymapConverter.ts b/frontend/src/ts/components/pages/test/keymapConverter.ts
index e69de29bb2d1..c77918d60125 100644
--- a/frontend/src/ts/components/pages/test/keymapConverter.ts
+++ b/frontend/src/ts/components/pages/test/keymapConverter.ts
@@ -0,0 +1,134 @@
+import { KeymapStyle } from "@monkeytype/schemas/configs";
+import { KeyLegends, LayoutObject } from "@monkeytype/schemas/layouts";
+import { typedEntries } from "../../../utils/misc";
+
+export type KeyDefinition = {
+  legends: KeyLegends;
+  width: number;
+  height: number;
+  x: number;
+};
+export type KeyboardDefinition = Record<
+  keyof LayoutObject["keys"],
+  KeyDefinition[]
+>;
+
+type ConvertOptions = {
+  displayName: string;
+  keymapStyle: KeymapStyle;
+  showAllKeys: boolean;
+};
+
+export function convertLayoutToKeymap(
+  layout: LayoutObject,
+  options: ConvertOptions,
+): KeyboardDefinition {
+  switch (options.keymapStyle) {
+    case "staggered":
+      return convertStaggered(layout, options);
+    case "split":
+      return convertSplit(layout, options);
+  }
+
+  throw new Error("not supported");
+}
+
+function convertStaggered(
+  layout: LayoutObject,
+  options: ConvertOptions,
+): KeyboardDefinition {
+  const base = convertBase(layout, options, {
+    row1: { skip: (it) => it.col === 0 },
+    row2: { x: (it) => (it.col === 0 ? 2 : 0), skip: (it) => it.col === 12 },
+    row3: { x: (it) => (it.col === 0 ? 4 : 0) },
+    row4: { x: (it) => (it.col === 0 ? 6 : 0) },
+    row5: {
+      x: () => 3,
+      width: () => 6,
+      legend: () => new Array<string>(4).fill(options.displayName),
+    },
+  });
+
+  return base;
+}
+
+function convertSplit(
+  layout: LayoutObject,
+  options: ConvertOptions,
+): KeyboardDefinition {
+  const insertGap = (it: RuleParams): number => (it.col === 5 ? 8 : 0);
+  const base = convertBase(layout, options, {
+    row1: { skip: (it) => it.col === 0, x: (it) => (it.col === 7 ? 8 : 0) },
+    row2: {
+      x: (it) => (it.col === 0 ? 2 : insertGap(it)),
+      skip: (it) => it.col === 12,
+    },
+    row3: { x: (it) => (it.col === 0 ? 4 : insertGap(it)) },
+    row4: { x: (it) => (it.col === 0 ? 6 : insertGap(it)) },
+    row5: {
+      x: ({ col }) => (col === 0 ? 3 + 5 * 4 : 0),
+      width: () => 3,
+      legend: () => new Array<string>(4).fill(options.displayName),
+    },
+  });
+
+  if (base.row5.length === 1) {
+    base.row5.push({
+      height: 1,
+      width: 3,
+      x: 8,
+      legends: ["", "", "", ""],
+    });
+  }
+
+  return base;
+}
+
+type RuleParams = {
+  col: number;
+};
+
+function convertBase(
+  layout: LayoutObject,
+  options: ConvertOptions,
+  cols?: Partial<
+    Record<
+      keyof LayoutObject["keys"],
+      {
+        legend?: (options: RuleParams) => KeyLegends;
+        height?: (options: RuleParams) => number;
+        width?: (options: RuleParams) => number;
+        x?: (options: RuleParams) => number;
+        skip?: (options: RuleParams) => boolean;
+      }
+    >
+  >,
+): KeyboardDefinition {
+  const result = Object.fromEntries(
+    typedEntries(layout.keys).map(([row, keys]) => [
+      row,
+      keys
+        .map((key, colNum) =>
+          !options.showAllKeys &&
+          (cols?.[row]?.skip?.({ col: colNum }) ?? false)
+            ? undefined
+            : ({
+                legends: addLayers(
+                  cols?.[row]?.legend?.({ col: colNum }) ?? key,
+                ),
+                height: cols?.[row]?.height?.({ col: colNum }) ?? 1,
+                width: cols?.[row]?.width?.({ col: colNum }) ?? 1,
+                x: cols?.[row]?.x?.({ col: colNum }) ?? 0,
+              } satisfies KeyDefinition),
+        )
+        .filter((it) => it !== undefined),
+    ]),
+  ) as KeyboardDefinition;
+
+  return result;
+}
+
+function addLayers(legends: KeyLegends): KeyLegends {
+  if (legends.length === 2) return [...legends, ...legends];
+  return legends;
+}
diff --git a/frontend/src/ts/states/test.ts b/frontend/src/ts/states/test.ts
index 823930bd861e..8acc09110ace 100644
--- a/frontend/src/ts/states/test.ts
+++ b/frontend/src/ts/states/test.ts
@@ -13,7 +13,6 @@ import { getActivePage, getCustomTextIndicator } from "./core";
 import { QuoteWithTextSplit } from "../types/quotes";
 import { CompletedEvent, IncompleteTest } from "@monkeytype/schemas/results";
 import { createSignalWithSetters } from "../hooks/createSignalWithSetters";
-import { LayoutObject } from "@monkeytype/schemas/layouts";
 import { getLayout } from "../utils/json-data";
 import { replaceUnderscoresWithSpaces } from "../utils/strings";
 

From eb64bb2e763f467bead668bd991da219d2ab72d1 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Wed, 17 Jun 2026 22:53:24 +0200
Subject: [PATCH 03/61] wip

---
 .../pages/test/keymapConverter.spec.ts        | 391 +++++++++++++++++-
 .../src/ts/components/pages/test/Keymap.tsx   |  15 +-
 .../components/pages/test/keymapConverter.ts  | 148 +++++--
 frontend/src/ts/states/test.ts                |   2 +-
 4 files changed, 518 insertions(+), 38 deletions(-)

diff --git a/frontend/__tests__/components/pages/test/keymapConverter.spec.ts b/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
index d4560b798b3a..d282ac6353c1 100644
--- a/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
+++ b/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
@@ -299,12 +299,401 @@ describe("keymap converter", () => {
         {
           legends: ["qwerty", "qwerty", "qwerty", "qwerty"],
           height: 1,
-          width: 6,
+          width: 6.25,
           x: 3,
         },
       ]);
     });
 
+    it("converts qwerty staggered", () => {
+      const result = convertLayoutToKeymap(qwertyLayout as LayoutObject, {
+        displayName: "qwerty",
+        keymapStyle: "staggered",
+        showAllKeys: true,
+      });
+
+      expect(result.row1).toEqual([
+        {
+          height: 1,
+          legends: ["`", "~", "`", "~"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["1", "!", "1", "!"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["2", "@", "2", "@"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["3", "#", "3", "#"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["4", "$", "4", "$"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["5", "%", "5", "%"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["6", "^", "6", "^"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["7", "&", "7", "&"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["8", "*", "8", "*"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["9", "(", "9", "("],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["0", ")", "0", ")"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["-", "_", "-", "_"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["=", "+", "=", "+"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["BS", "BS", "BS", "BS"],
+          width: 2,
+          x: 0,
+        },
+      ]);
+
+      expect(result.row2).toEqual([
+        {
+          height: 1,
+          legends: ["Tab", "Tab", "Tab", "Tab"],
+          width: 1.5,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["q", "Q", "q", "Q"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["w", "W", "w", "W"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["e", "E", "e", "E"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["r", "R", "r", "R"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["t", "T", "t", "T"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["y", "Y", "y", "Y"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["u", "U", "u", "U"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["i", "I", "i", "I"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["o", "O", "o", "O"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["p", "P", "p", "P"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["[", "{", "[", "{"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["]", "}", "]", "}"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["\\", "|", "\\", "|"],
+          width: 1.5,
+          x: 0,
+        },
+      ]);
+
+      expect(result.row3).toEqual([
+        {
+          height: 1,
+          legends: ["Caps", "Caps", "Caps", "Caps"],
+          width: 1.75,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["a", "A", "a", "A"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["s", "S", "s", "S"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["d", "D", "d", "D"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["f", "F", "f", "F"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["g", "G", "g", "G"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["h", "H", "h", "H"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["j", "J", "j", "J"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["k", "K", "k", "K"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["l", "L", "l", "L"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: [";", ":", ";", ":"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["'", '"', "'", '"'],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["Enter", "Enter", "Enter", "Enter"],
+          width: 2.25,
+          x: 0,
+        },
+      ]);
+
+      expect(result.row4).toEqual([
+        {
+          height: 1,
+          legends: ["Shift", "Shift", "Shift", "Shift"],
+          width: 2.25,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["z", "Z", "z", "Z"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["x", "X", "x", "X"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["c", "C", "c", "C"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["v", "V", "v", "V"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["b", "B", "b", "B"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["n", "N", "n", "N"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["m", "M", "m", "M"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: [",", "<", ",", "<"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: [".", ">", ".", ">"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["/", "?", "/", "?"],
+          width: 1,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["Shift", "Shift", "Shift", "Shift"],
+          width: 2.75,
+          x: 0,
+        },
+      ]);
+
+      expect(result.row5).toEqual([
+        {
+          height: 1,
+          legends: ["Alt", "Alt", "Alt", "Alt"],
+          width: 1.25,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["Monke", "Monke", "Monke", "Monke"],
+          width: 1.25,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"],
+          width: 1.25,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["qwerty", "qwerty", "qwerty", "qwerty"],
+          width: 6.25,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"],
+          width: 1.25,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["Monke", "Monke", "Monke", "Monke"],
+          width: 1.25,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["Meta", "Meta", "Meta", "Meta"],
+          width: 1.25,
+          x: 0,
+        },
+        {
+          height: 1,
+          legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"],
+          width: 1.25,
+          x: 0,
+        },
+      ]);
+    });
+
     it("converts qwerty split", () => {
       const result = convertLayoutToKeymap(qwertyLayout as LayoutObject, {
         displayName: "qwerty",
diff --git a/frontend/src/ts/components/pages/test/Keymap.tsx b/frontend/src/ts/components/pages/test/Keymap.tsx
index 5dac07e58a8d..1ee3e00ae0ee 100644
--- a/frontend/src/ts/components/pages/test/Keymap.tsx
+++ b/frontend/src/ts/components/pages/test/Keymap.tsx
@@ -4,7 +4,7 @@ import { createMemo, For, Show } from "solid-js";
 import { getConfig } from "../../../config/store";
 import { getModifierState } from "../../../states/modifiers";
 import { getKeymapLayout, keymapLayoutObject } from "../../../states/test";
-import { typedEntries, typedValues } from "../../../utils/misc";
+import { typedEntries } from "../../../utils/misc";
 import { convertLayoutToKeymap, KeyboardDefinition } from "./keymapConverter";
 
 export function Keymap() {
@@ -19,19 +19,12 @@ export function Keymap() {
 }
 
 function Keyboard(props: { displayName: string; layoutData: LayoutObject }) {
-  const hasAltGr = createMemo(() =>
-    typedValues(props.layoutData.keys).some((key) =>
-      key.some((legend) => legend.length > 2),
-    ),
-  );
-
   const layer = createMemo(() => {
-    if (hasAltGr() && getModifierState().shift && getModifierState().altGr) {
+    if (getModifierState().shift && getModifierState().altGr) {
       return 3;
     }
-    if (hasAltGr() && getModifierState().altGr) return 2;
+    if (getModifierState().altGr) return 2;
     if (getModifierState().shift) return 1;
-
     return 0;
   });
 
@@ -45,7 +38,7 @@ function Keyboard(props: { displayName: string; layoutData: LayoutObject }) {
     convertLayoutToKeymap(props.layoutData, {
       displayName: props.displayName,
       keymapStyle: getConfig.keymapStyle,
-      showAllKeys: false,
+      showAllKeys: true,
     }),
   );
 
diff --git a/frontend/src/ts/components/pages/test/keymapConverter.ts b/frontend/src/ts/components/pages/test/keymapConverter.ts
index c77918d60125..ed96a806ac36 100644
--- a/frontend/src/ts/components/pages/test/keymapConverter.ts
+++ b/frontend/src/ts/components/pages/test/keymapConverter.ts
@@ -37,14 +37,22 @@ function convertStaggered(
   layout: LayoutObject,
   options: ConvertOptions,
 ): KeyboardDefinition {
+  const firstColGap =
+    (gap: number) =>
+    ({ col }: { col: number }) =>
+      options.showAllKeys ? 0 : col === 0 ? gap : 0;
   const base = convertBase(layout, options, {
-    row1: { skip: (it) => it.col === 0 },
-    row2: { x: (it) => (it.col === 0 ? 2 : 0), skip: (it) => it.col === 12 },
-    row3: { x: (it) => (it.col === 0 ? 4 : 0) },
-    row4: { x: (it) => (it.col === 0 ? 6 : 0) },
+    row1: { skip: ({ col }) => col === 0 },
+    row2: {
+      x: firstColGap(2),
+      skip: ({ col }) => col === 12,
+      width: ({ col }) => (col === 12 ? 1.5 : 1),
+    },
+    row3: { x: firstColGap(4) },
+    row4: { x: firstColGap(6) },
     row5: {
-      x: () => 3,
-      width: () => 6,
+      x: firstColGap(3),
+      width: () => 6.25,
       legend: () => new Array<string>(4).fill(options.displayName),
     },
   });
@@ -56,31 +64,38 @@ function convertSplit(
   layout: LayoutObject,
   options: ConvertOptions,
 ): KeyboardDefinition {
-  const insertGap = (it: RuleParams): number => (it.col === 5 ? 8 : 0);
+  if (layout.keys.row5.length === 1) {
+    layout.keys.row5.push(["", "", "", ""]);
+  }
+  const calcGap =
+    ({ col1Gap, splitCol }: { col1Gap: number; splitCol?: number }) =>
+    ({ col }: { col: number }) => {
+      if (col === 0) return options.showAllKeys ? 0 : col1Gap;
+      if (col === (splitCol ?? 5)) return 8;
+      return 0;
+    };
+
   const base = convertBase(layout, options, {
-    row1: { skip: (it) => it.col === 0, x: (it) => (it.col === 7 ? 8 : 0) },
+    row1: {
+      x: calcGap({ col1Gap: 0, splitCol: 7 }),
+      skip: ({ col }) => col === 0,
+    },
     row2: {
-      x: (it) => (it.col === 0 ? 2 : insertGap(it)),
-      skip: (it) => it.col === 12,
+      x: calcGap({ col1Gap: 2 }),
+      skip: ({ col }) => col === 12,
+      width: ({ col }) => (col === 12 ? 1.5 : 1),
     },
-    row3: { x: (it) => (it.col === 0 ? 4 : insertGap(it)) },
-    row4: { x: (it) => (it.col === 0 ? 6 : insertGap(it)) },
+    row3: { x: calcGap({ col1Gap: 4 }) },
+    row4: { x: calcGap({ col1Gap: 6 }) },
     row5: {
-      x: ({ col }) => (col === 0 ? 3 + 5 * 4 : 0),
-      width: () => 3,
-      legend: () => new Array<string>(4).fill(options.displayName),
+      x: calcGap({ col1Gap: 3 + 5 * 4, splitCol: 1 }),
+      width: ({ col }) =>
+        (options.showAllKeys ? { 0: 3.25, 1: 3 } : { 0: 3, 1: 3 })[col] ?? 1,
+      legend: ({ col }) =>
+        col === 0 ? new Array<string>(4).fill(options.displayName) : undefined,
     },
   });
 
-  if (base.row5.length === 1) {
-    base.row5.push({
-      height: 1,
-      width: 3,
-      x: 8,
-      legends: ["", "", "", ""],
-    });
-  }
-
   return base;
 }
 
@@ -95,7 +110,7 @@ function convertBase(
     Record<
       keyof LayoutObject["keys"],
       {
-        legend?: (options: RuleParams) => KeyLegends;
+        legend?: (options: RuleParams) => KeyLegends | undefined;
         height?: (options: RuleParams) => number;
         width?: (options: RuleParams) => number;
         x?: (options: RuleParams) => number;
@@ -125,6 +140,89 @@ function convertBase(
     ]),
   ) as KeyboardDefinition;
 
+  if (options.showAllKeys) {
+    result.row1.push({
+      legends: new Array<string>(4).fill("BS"),
+      x: 0,
+      width: 2,
+      height: 1,
+    });
+    result.row2.unshift({
+      legends: new Array<string>(4).fill("Tab"),
+      height: 1,
+      width: 1.5,
+      x: 0,
+    });
+    result.row3.unshift({
+      legends: new Array<string>(4).fill("Caps"),
+      height: 1,
+      width: 1.75,
+      x: 0,
+    });
+    result.row3.push({
+      legends: new Array<string>(4).fill("Enter"),
+      height: 1,
+      width: 2.25,
+      x: 0,
+    });
+    result.row4.unshift({
+      legends: new Array<string>(4).fill("Shift"),
+      height: 1,
+      width: 2.25,
+      x: 0,
+    });
+    result.row4.push({
+      legends: new Array<string>(4).fill("Shift"),
+      height: 1,
+      width: 2.75,
+      x: 0,
+    });
+
+    result.row5.unshift({
+      legends: new Array<string>(4).fill("Ctrl"),
+      height: 1,
+      width: 1.25,
+      x: 0,
+    });
+    result.row5.unshift({
+      legends: new Array<string>(4).fill("Monke"),
+      height: 1,
+      width: 1.25,
+      x: 0,
+    });
+    result.row5.unshift({
+      legends: new Array<string>(4).fill("Alt"),
+      height: 1,
+      width: 1.25,
+      x: 0,
+    });
+
+    result.row5.push({
+      legends: new Array<string>(4).fill("Ctrl"),
+      height: 1,
+      width: 1.25,
+      x: 0,
+    });
+    result.row5.push({
+      legends: new Array<string>(4).fill("Monke"),
+      height: 1,
+      width: 1.25,
+      x: 0,
+    });
+    result.row5.push({
+      legends: new Array<string>(4).fill("Meta"),
+      height: 1,
+      width: 1.25,
+      x: 0,
+    });
+    result.row5.push({
+      legends: new Array<string>(4).fill("Ctrl"),
+      height: 1,
+      width: 1.25,
+      x: 0,
+    });
+  }
+
   return result;
 }
 
diff --git a/frontend/src/ts/states/test.ts b/frontend/src/ts/states/test.ts
index 8acc09110ace..ea1143f25950 100644
--- a/frontend/src/ts/states/test.ts
+++ b/frontend/src/ts/states/test.ts
@@ -77,5 +77,5 @@ export const getKeymapLayout = createMemo<{
 
 export const [keymapLayoutObject] = createResource(
   getKeymapLayout,
-  async (layout) => getLayout(layout.layout),
+  async (layout) => structuredClone(await getLayout(layout.layout)),
 );

From ee7ef378351d1e191c5d12ad6b371ddd5262534f Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Thu, 18 Jun 2026 10:26:19 +0200
Subject: [PATCH 04/61] simplify

---
 .../pages/test/keymapConverter.spec.ts        | 435 +-----------------
 .../src/ts/components/pages/test/Keymap.tsx   |  56 ++-
 .../components/pages/test/keymapConverter.ts  | 181 ++++----
 3 files changed, 113 insertions(+), 559 deletions(-)

diff --git a/frontend/__tests__/components/pages/test/keymapConverter.spec.ts b/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
index d282ac6353c1..10297079fc8a 100644
--- a/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
+++ b/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
@@ -15,292 +15,159 @@ describe("keymap converter", () => {
 
       expect(result.row1).toEqual([
         {
-          height: 1,
           legends: ["1", "!", "1", "!"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["2", "@", "2", "@"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["3", "#", "3", "#"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["4", "$", "4", "$"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["5", "%", "5", "%"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["6", "^", "6", "^"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["7", "&", "7", "&"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["8", "*", "8", "*"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["9", "(", "9", "("],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["0", ")", "0", ")"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["-", "_", "-", "_"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["=", "+", "=", "+"],
-          width: 1,
-          x: 0,
         },
       ]);
 
       expect(result.row2).toEqual([
         {
-          height: 1,
           legends: ["q", "Q", "q", "Q"],
-          width: 1,
           x: 2,
         },
         {
-          height: 1,
           legends: ["w", "W", "w", "W"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["e", "E", "e", "E"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["r", "R", "r", "R"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["t", "T", "t", "T"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["y", "Y", "y", "Y"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["u", "U", "u", "U"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["i", "I", "i", "I"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["o", "O", "o", "O"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["p", "P", "p", "P"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["[", "{", "[", "{"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["]", "}", "]", "}"],
-          width: 1,
-          x: 0,
         },
       ]);
 
       expect(result.row3).toEqual([
         {
-          height: 1,
           legends: ["a", "A", "a", "A"],
-          width: 1,
           x: 4,
         },
         {
-          height: 1,
           legends: ["s", "S", "s", "S"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["d", "D", "d", "D"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["f", "F", "f", "F"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["g", "G", "g", "G"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["h", "H", "h", "H"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["j", "J", "j", "J"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["k", "K", "k", "K"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["l", "L", "l", "L"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: [";", ":", ";", ":"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["'", '"', "'", '"'],
-          width: 1,
-          x: 0,
         },
       ]);
 
       expect(result.row4).toEqual([
         {
-          height: 1,
           legends: ["z", "Z", "z", "Z"],
-          width: 1,
           x: 6,
         },
         {
-          height: 1,
           legends: ["x", "X", "x", "X"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["c", "C", "c", "C"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["v", "V", "v", "V"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["b", "B", "b", "B"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["n", "N", "n", "N"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["m", "M", "m", "M"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: [",", "<", ",", "<"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: [".", ">", ".", ">"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["/", "?", "/", "?"],
-          width: 1,
-          x: 0,
         },
       ]);
 
       expect(result.row5).toEqual([
         {
           legends: ["qwerty", "qwerty", "qwerty", "qwerty"],
-          height: 1,
-          width: 6.25,
-          x: 3,
+          width: 6,
+          x: 22,
         },
       ]);
     });
@@ -314,382 +181,214 @@ describe("keymap converter", () => {
 
       expect(result.row1).toEqual([
         {
-          height: 1,
           legends: ["`", "~", "`", "~"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["1", "!", "1", "!"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["2", "@", "2", "@"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["3", "#", "3", "#"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["4", "$", "4", "$"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["5", "%", "5", "%"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["6", "^", "6", "^"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["7", "&", "7", "&"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["8", "*", "8", "*"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["9", "(", "9", "("],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["0", ")", "0", ")"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["-", "_", "-", "_"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["=", "+", "=", "+"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["BS", "BS", "BS", "BS"],
           width: 2,
-          x: 0,
         },
       ]);
 
       expect(result.row2).toEqual([
         {
-          height: 1,
           legends: ["Tab", "Tab", "Tab", "Tab"],
           width: 1.5,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["q", "Q", "q", "Q"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["w", "W", "w", "W"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["e", "E", "e", "E"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["r", "R", "r", "R"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["t", "T", "t", "T"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["y", "Y", "y", "Y"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["u", "U", "u", "U"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["i", "I", "i", "I"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["o", "O", "o", "O"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["p", "P", "p", "P"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["[", "{", "[", "{"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["]", "}", "]", "}"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["\\", "|", "\\", "|"],
           width: 1.5,
-          x: 0,
         },
       ]);
 
       expect(result.row3).toEqual([
         {
-          height: 1,
           legends: ["Caps", "Caps", "Caps", "Caps"],
           width: 1.75,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["a", "A", "a", "A"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["s", "S", "s", "S"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["d", "D", "d", "D"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["f", "F", "f", "F"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["g", "G", "g", "G"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["h", "H", "h", "H"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["j", "J", "j", "J"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["k", "K", "k", "K"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["l", "L", "l", "L"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: [";", ":", ";", ":"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["'", '"', "'", '"'],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["Enter", "Enter", "Enter", "Enter"],
           width: 2.25,
-          x: 0,
         },
       ]);
 
       expect(result.row4).toEqual([
         {
-          height: 1,
           legends: ["Shift", "Shift", "Shift", "Shift"],
           width: 2.25,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["z", "Z", "z", "Z"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["x", "X", "x", "X"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["c", "C", "c", "C"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["v", "V", "v", "V"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["b", "B", "b", "B"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["n", "N", "n", "N"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["m", "M", "m", "M"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: [",", "<", ",", "<"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: [".", ">", ".", ">"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["/", "?", "/", "?"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["Shift", "Shift", "Shift", "Shift"],
           width: 2.75,
-          x: 0,
         },
       ]);
 
       expect(result.row5).toEqual([
         {
-          height: 1,
           legends: ["Alt", "Alt", "Alt", "Alt"],
           width: 1.25,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["Monke", "Monke", "Monke", "Monke"],
           width: 1.25,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"],
           width: 1.25,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["qwerty", "qwerty", "qwerty", "qwerty"],
           width: 6.25,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"],
           width: 1.25,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["Monke", "Monke", "Monke", "Monke"],
           width: 1.25,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["Meta", "Meta", "Meta", "Meta"],
           width: 1.25,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"],
           width: 1.25,
-          x: 0,
         },
       ]);
     });
@@ -703,296 +402,166 @@ describe("keymap converter", () => {
 
       expect(result.row1).toEqual([
         {
-          height: 1,
           legends: ["1", "!", "1", "!"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["2", "@", "2", "@"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["3", "#", "3", "#"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["4", "$", "4", "$"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["5", "%", "5", "%"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["6", "^", "6", "^"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["7", "&", "7", "&"],
-          width: 1,
           x: 8,
         },
         {
-          height: 1,
           legends: ["8", "*", "8", "*"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["9", "(", "9", "("],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["0", ")", "0", ")"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["-", "_", "-", "_"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["=", "+", "=", "+"],
-          width: 1,
-          x: 0,
         },
       ]);
 
       expect(result.row2).toEqual([
         {
-          height: 1,
           legends: ["q", "Q", "q", "Q"],
-          width: 1,
           x: 2,
         },
         {
-          height: 1,
           legends: ["w", "W", "w", "W"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["e", "E", "e", "E"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["r", "R", "r", "R"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["t", "T", "t", "T"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["y", "Y", "y", "Y"],
-          width: 1,
           x: 8,
         },
         {
-          height: 1,
           legends: ["u", "U", "u", "U"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["i", "I", "i", "I"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["o", "O", "o", "O"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["p", "P", "p", "P"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["[", "{", "[", "{"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["]", "}", "]", "}"],
-          width: 1,
-          x: 0,
         },
       ]);
 
       expect(result.row3).toEqual([
         {
-          height: 1,
           legends: ["a", "A", "a", "A"],
-          width: 1,
           x: 4,
         },
         {
-          height: 1,
           legends: ["s", "S", "s", "S"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["d", "D", "d", "D"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["f", "F", "f", "F"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["g", "G", "g", "G"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["h", "H", "h", "H"],
-          width: 1,
           x: 8,
         },
         {
-          height: 1,
           legends: ["j", "J", "j", "J"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["k", "K", "k", "K"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["l", "L", "l", "L"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: [";", ":", ";", ":"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["'", '"', "'", '"'],
-          width: 1,
-          x: 0,
         },
       ]);
 
       expect(result.row4).toEqual([
         {
-          height: 1,
           legends: ["z", "Z", "z", "Z"],
-          width: 1,
           x: 6,
         },
         {
-          height: 1,
           legends: ["x", "X", "x", "X"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["c", "C", "c", "C"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["v", "V", "v", "V"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["b", "B", "b", "B"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["n", "N", "n", "N"],
-          width: 1,
           x: 8,
         },
         {
-          height: 1,
           legends: ["m", "M", "m", "M"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: [",", "<", ",", "<"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: [".", ">", ".", ">"],
-          width: 1,
-          x: 0,
         },
         {
-          height: 1,
           legends: ["/", "?", "/", "?"],
-          width: 1,
-          x: 0,
         },
       ]);
 
       expect(result.row5).toEqual([
         {
           legends: ["qwerty", "qwerty", "qwerty", "qwerty"],
-          height: 1,
           width: 3,
           x: 23,
         },
         {
           legends: ["", "", "", ""],
-          height: 1,
           width: 3,
           x: 8,
         },
diff --git a/frontend/src/ts/components/pages/test/Keymap.tsx b/frontend/src/ts/components/pages/test/Keymap.tsx
index 1ee3e00ae0ee..51e053aeed35 100644
--- a/frontend/src/ts/components/pages/test/Keymap.tsx
+++ b/frontend/src/ts/components/pages/test/Keymap.tsx
@@ -4,8 +4,13 @@ import { createMemo, For, Show } from "solid-js";
 import { getConfig } from "../../../config/store";
 import { getModifierState } from "../../../states/modifiers";
 import { getKeymapLayout, keymapLayoutObject } from "../../../states/test";
+import { cn } from "../../../utils/cn";
 import { typedEntries } from "../../../utils/misc";
-import { convertLayoutToKeymap, KeyboardDefinition } from "./keymapConverter";
+import {
+  convertLayoutToKeymap,
+  KeyboardDefinition,
+  KeyDefinition,
+} from "./keymapConverter";
 
 export function Keymap() {
   return (
@@ -20,12 +25,24 @@ export function Keymap() {
 
 function Keyboard(props: { displayName: string; layoutData: LayoutObject }) {
   const layer = createMemo(() => {
-    if (getModifierState().shift && getModifierState().altGr) {
-      return 3;
+    switch (getConfig.keymapLegendStyle) {
+      case "blank":
+        return -1;
+      case "lowercase":
+        return 0;
+      case "uppercase":
+        return 1;
+      case "dynamic": {
+        if (getModifierState().shift && getModifierState().altGr) {
+          return 3;
+        } else if (getModifierState().altGr) {
+          return 2;
+        } else if (getModifierState().shift) {
+          return 1;
+        }
+        return 0;
+      }
     }
-    if (getModifierState().altGr) return 2;
-    if (getModifierState().shift) return 1;
-    return 0;
   });
 
   const showFirstRow =
@@ -66,14 +83,7 @@ function KeyboardDefinitionRenderer(props: {
         <Show when={rowId !== "row1" || props.showFirstRow}>
           <div class="flex flex-row">
             <For each={keys}>
-              {(key) => (
-                <Key
-                  legend={key.legends.at(props.layer) ?? ""}
-                  x={key.x}
-                  width={key.width}
-                  height={key.height}
-                />
-              )}
+              {(key) => <Key {...key} layer={props.layer} />}
             </For>
           </div>
         </Show>
@@ -82,22 +92,24 @@ function KeyboardDefinitionRenderer(props: {
   );
 }
 
-function Key(props: {
-  legend: string;
-  x?: number;
-  width?: number;
-  height?: number;
-}) {
+function Key(
+  props: {
+    layer: number;
+  } & KeyDefinition,
+) {
   return (
     <div
-      class="flex items-center justify-center rounded border-2 border-bg bg-sub-alt"
+      class={cn(
+        "flex items-center justify-center rounded border-2 border-bg bg-sub-alt",
+        (props.legends[props.layer] ?? "").length >= 3 && "text-em-xs",
+      )}
       style={{
         height: `${(props.height ?? 1) * 2}rem`,
         width: `${(props.width ?? 1) * 2}rem`,
         "margin-left": `${(props.x ?? 0) * 0.25}rem`,
       }}
     >
-      {props.legend}
+      {props.legends[props.layer]}
     </div>
   );
 }
diff --git a/frontend/src/ts/components/pages/test/keymapConverter.ts b/frontend/src/ts/components/pages/test/keymapConverter.ts
index ed96a806ac36..8aeda44f795c 100644
--- a/frontend/src/ts/components/pages/test/keymapConverter.ts
+++ b/frontend/src/ts/components/pages/test/keymapConverter.ts
@@ -4,9 +4,9 @@ import { typedEntries } from "../../../utils/misc";
 
 export type KeyDefinition = {
   legends: KeyLegends;
-  width: number;
-  height: number;
-  x: number;
+  width?: number;
+  height?: number;
+  x?: number;
 };
 export type KeyboardDefinition = Record<
   keyof LayoutObject["keys"],
@@ -19,15 +19,19 @@ type ConvertOptions = {
   showAllKeys: boolean;
 };
 
+type RuleParams = {
+  col: number;
+};
+
 export function convertLayoutToKeymap(
-  layout: LayoutObject,
+  rawLayout: LayoutObject,
   options: ConvertOptions,
 ): KeyboardDefinition {
+  const layout = structuredClone(rawLayout);
   switch (options.keymapStyle) {
     case "staggered":
-      return convertStaggered(layout, options);
     case "split":
-      return convertSplit(layout, options);
+      return convertStaggered(layout, options);
   }
 
   throw new Error("not supported");
@@ -37,42 +41,17 @@ function convertStaggered(
   layout: LayoutObject,
   options: ConvertOptions,
 ): KeyboardDefinition {
-  const firstColGap =
-    (gap: number) =>
-    ({ col }: { col: number }) =>
-      options.showAllKeys ? 0 : col === 0 ? gap : 0;
-  const base = convertBase(layout, options, {
-    row1: { skip: ({ col }) => col === 0 },
-    row2: {
-      x: firstColGap(2),
-      skip: ({ col }) => col === 12,
-      width: ({ col }) => (col === 12 ? 1.5 : 1),
-    },
-    row3: { x: firstColGap(4) },
-    row4: { x: firstColGap(6) },
-    row5: {
-      x: firstColGap(3),
-      width: () => 6.25,
-      legend: () => new Array<string>(4).fill(options.displayName),
-    },
-  });
-
-  return base;
-}
+  const split = options.keymapStyle === "split";
 
-function convertSplit(
-  layout: LayoutObject,
-  options: ConvertOptions,
-): KeyboardDefinition {
-  if (layout.keys.row5.length === 1) {
-    layout.keys.row5.push(["", "", "", ""]);
+  if (split && layout.keys.row5.length === 1) {
+    layout.keys.row5.push(buildLegends([""]));
   }
   const calcGap =
     ({ col1Gap, splitCol }: { col1Gap: number; splitCol?: number }) =>
     ({ col }: { col: number }) => {
-      if (col === 0) return options.showAllKeys ? 0 : col1Gap;
-      if (col === (splitCol ?? 5)) return 8;
-      return 0;
+      if (col === 0) return options.showAllKeys ? undefined : col1Gap;
+      if (split && col === (splitCol ?? 5)) return 8;
+      return undefined;
     };
 
   const base = convertBase(layout, options, {
@@ -83,26 +62,29 @@ function convertSplit(
     row2: {
       x: calcGap({ col1Gap: 2 }),
       skip: ({ col }) => col === 12,
-      width: ({ col }) => (col === 12 ? 1.5 : 1),
+      width: ({ col }) => (col === 12 ? 1.5 : undefined),
     },
     row3: { x: calcGap({ col1Gap: 4 }) },
     row4: { x: calcGap({ col1Gap: 6 }) },
     row5: {
-      x: calcGap({ col1Gap: 3 + 5 * 4, splitCol: 1 }),
-      width: ({ col }) =>
-        (options.showAllKeys ? { 0: 3.25, 1: 3 } : { 0: 3, 1: 3 })[col] ?? 1,
+      x: calcGap({ col1Gap: split ? 3 + 5 * 4 : 22, splitCol: 1 }),
+      width: ({ col }) => {
+        if (split) {
+          return (
+            (options.showAllKeys ? { 0: 3.25, 1: 3 } : { 0: 3, 1: 3 })[col] ??
+            undefined
+          );
+        }
+        return options.showAllKeys ? 6.25 : 6;
+      },
       legend: ({ col }) =>
-        col === 0 ? new Array<string>(4).fill(options.displayName) : undefined,
+        col === 0 ? buildLegends([options.displayName]) : undefined,
     },
   });
 
   return base;
 }
 
-type RuleParams = {
-  col: number;
-};
-
 function convertBase(
   layout: LayoutObject,
   options: ConvertOptions,
@@ -111,9 +93,9 @@ function convertBase(
       keyof LayoutObject["keys"],
       {
         legend?: (options: RuleParams) => KeyLegends | undefined;
-        height?: (options: RuleParams) => number;
-        width?: (options: RuleParams) => number;
-        x?: (options: RuleParams) => number;
+        height?: (options: RuleParams) => number | undefined;
+        width?: (options: RuleParams) => number | undefined;
+        x?: (options: RuleParams) => number | undefined;
         skip?: (options: RuleParams) => boolean;
       }
     >
@@ -123,110 +105,101 @@ function convertBase(
     typedEntries(layout.keys).map(([row, keys]) => [
       row,
       keys
-        .map((key, colNum) =>
-          !options.showAllKeys &&
-          (cols?.[row]?.skip?.({ col: colNum }) ?? false)
-            ? undefined
-            : ({
-                legends: addLayers(
-                  cols?.[row]?.legend?.({ col: colNum }) ?? key,
-                ),
-                height: cols?.[row]?.height?.({ col: colNum }) ?? 1,
-                width: cols?.[row]?.width?.({ col: colNum }) ?? 1,
-                x: cols?.[row]?.x?.({ col: colNum }) ?? 0,
-              } satisfies KeyDefinition),
-        )
+        .map((key, colNum) => {
+          if (
+            !options.showAllKeys &&
+            (cols?.[row]?.skip?.({ col: colNum }) ?? false)
+          ) {
+            return undefined;
+          }
+
+          const legends = buildLegends(
+            cols?.[row]?.legend?.({ col: colNum }) ?? key,
+          );
+          const height = cols?.[row]?.height?.({ col: colNum });
+          const width = cols?.[row]?.width?.({ col: colNum });
+          const x = cols?.[row]?.x?.({ col: colNum });
+
+          return {
+            legends,
+            ...(height !== undefined ? { height } : {}),
+            ...(width !== undefined ? { width } : {}),
+            ...(x !== undefined ? { x } : {}),
+          } satisfies KeyDefinition;
+        })
         .filter((it) => it !== undefined),
     ]),
   ) as KeyboardDefinition;
 
   if (options.showAllKeys) {
     result.row1.push({
-      legends: new Array<string>(4).fill("BS"),
-      x: 0,
+      legends: buildLegends(["BS"]),
       width: 2,
-      height: 1,
     });
     result.row2.unshift({
-      legends: new Array<string>(4).fill("Tab"),
-      height: 1,
+      legends: buildLegends(["Tab"]),
       width: 1.5,
-      x: 0,
     });
     result.row3.unshift({
-      legends: new Array<string>(4).fill("Caps"),
-      height: 1,
+      legends: buildLegends(["Caps"]),
       width: 1.75,
-      x: 0,
     });
     result.row3.push({
-      legends: new Array<string>(4).fill("Enter"),
-      height: 1,
+      legends: buildLegends(["Enter"]),
       width: 2.25,
-      x: 0,
     });
     result.row4.unshift({
-      legends: new Array<string>(4).fill("Shift"),
-      height: 1,
+      legends: buildLegends(["Shift"]),
       width: 2.25,
-      x: 0,
     });
     result.row4.push({
-      legends: new Array<string>(4).fill("Shift"),
-      height: 1,
+      legends: buildLegends(["Shift"]),
       width: 2.75,
-      x: 0,
     });
 
     result.row5.unshift({
-      legends: new Array<string>(4).fill("Ctrl"),
-      height: 1,
+      legends: buildLegends(["Ctrl"]),
       width: 1.25,
-      x: 0,
     });
     result.row5.unshift({
-      legends: new Array<string>(4).fill("Monke"),
-      height: 1,
+      legends: buildLegends(["Monke"]),
       width: 1.25,
-      x: 0,
     });
     result.row5.unshift({
-      legends: new Array<string>(4).fill("Alt"),
-      height: 1,
+      legends: buildLegends(["Alt"]),
       width: 1.25,
-      x: 0,
     });
 
     result.row5.push({
-      legends: new Array<string>(4).fill("Ctrl"),
-      height: 1,
+      legends: buildLegends(["Ctrl"]),
       width: 1.25,
-      x: 0,
     });
     result.row5.push({
-      legends: new Array<string>(4).fill("Monke"),
-      height: 1,
+      legends: buildLegends(["Monke"]),
       width: 1.25,
-      x: 0,
     });
     result.row5.push({
-      legends: new Array<string>(4).fill("Meta"),
-      height: 1,
+      legends: buildLegends(["Meta"]),
       width: 1.25,
-      x: 0,
     });
     result.row5.push({
-      legends: new Array<string>(4).fill("Ctrl"),
-      height: 1,
+      legends: buildLegends(["Ctrl"]),
       width: 1.25,
-      x: 0,
     });
   }
 
   return result;
 }
 
-function addLayers(legends: KeyLegends): KeyLegends {
-  if (legends.length === 2) return [...legends, ...legends];
-  return legends;
+function buildLegends(legends: KeyLegends): KeyLegends {
+  switch (legends.length) {
+    case 1:
+      return new Array<string>(4).fill(legends.at(0) as string);
+    case 2:
+      return [...legends, ...legends];
+    case 3:
+      return [...legends, ""];
+    default:
+      return legends;
+  }
 }

From 4651c5f18f63b227338757223bc44882c4b71c9d Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Thu, 18 Jun 2026 10:32:23 +0200
Subject: [PATCH 05/61] format test

---
 .../pages/test/keymapConverter.spec.ts        | 677 +++++-------------
 1 file changed, 169 insertions(+), 508 deletions(-)

diff --git a/frontend/__tests__/components/pages/test/keymapConverter.spec.ts b/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
index 10297079fc8a..2a40b1c74235 100644
--- a/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
+++ b/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
@@ -13,162 +13,65 @@ describe("keymap converter", () => {
         showAllKeys: false,
       });
 
-      expect(result.row1).toEqual([
-        {
-          legends: ["1", "!", "1", "!"],
-        },
-        {
-          legends: ["2", "@", "2", "@"],
-        },
-        {
-          legends: ["3", "#", "3", "#"],
-        },
-        {
-          legends: ["4", "$", "4", "$"],
-        },
-        {
-          legends: ["5", "%", "5", "%"],
-        },
-        {
-          legends: ["6", "^", "6", "^"],
-        },
-        {
-          legends: ["7", "&", "7", "&"],
-        },
-        {
-          legends: ["8", "*", "8", "*"],
-        },
-        {
-          legends: ["9", "(", "9", "("],
-        },
-        {
-          legends: ["0", ")", "0", ")"],
-        },
-        {
-          legends: ["-", "_", "-", "_"],
-        },
-        {
-          legends: ["=", "+", "=", "+"],
-        },
+      expect(result.row1, "row1").toEqual([
+        { legends: ["1", "!", "1", "!"] },
+        { legends: ["2", "@", "2", "@"] },
+        { legends: ["3", "#", "3", "#"] },
+        { legends: ["4", "$", "4", "$"] },
+        { legends: ["5", "%", "5", "%"] },
+        { legends: ["6", "^", "6", "^"] },
+        { legends: ["7", "&", "7", "&"] },
+        { legends: ["8", "*", "8", "*"] },
+        { legends: ["9", "(", "9", "("] },
+        { legends: ["0", ")", "0", ")"] },
+        { legends: ["-", "_", "-", "_"] },
+        { legends: ["=", "+", "=", "+"] },
       ]);
 
-      expect(result.row2).toEqual([
-        {
-          legends: ["q", "Q", "q", "Q"],
-          x: 2,
-        },
-        {
-          legends: ["w", "W", "w", "W"],
-        },
-        {
-          legends: ["e", "E", "e", "E"],
-        },
-        {
-          legends: ["r", "R", "r", "R"],
-        },
-        {
-          legends: ["t", "T", "t", "T"],
-        },
-        {
-          legends: ["y", "Y", "y", "Y"],
-        },
-        {
-          legends: ["u", "U", "u", "U"],
-        },
-        {
-          legends: ["i", "I", "i", "I"],
-        },
-        {
-          legends: ["o", "O", "o", "O"],
-        },
-        {
-          legends: ["p", "P", "p", "P"],
-        },
-        {
-          legends: ["[", "{", "[", "{"],
-        },
-        {
-          legends: ["]", "}", "]", "}"],
-        },
+      expect(result.row2, "row2").toEqual([
+        { legends: ["q", "Q", "q", "Q"], x: 2 },
+        { legends: ["w", "W", "w", "W"] },
+        { legends: ["e", "E", "e", "E"] },
+        { legends: ["r", "R", "r", "R"] },
+        { legends: ["t", "T", "t", "T"] },
+        { legends: ["y", "Y", "y", "Y"] },
+        { legends: ["u", "U", "u", "U"] },
+        { legends: ["i", "I", "i", "I"] },
+        { legends: ["o", "O", "o", "O"] },
+        { legends: ["p", "P", "p", "P"] },
+        { legends: ["[", "{", "[", "{"] },
+        { legends: ["]", "}", "]", "}"] },
       ]);
 
-      expect(result.row3).toEqual([
-        {
-          legends: ["a", "A", "a", "A"],
-          x: 4,
-        },
-        {
-          legends: ["s", "S", "s", "S"],
-        },
-        {
-          legends: ["d", "D", "d", "D"],
-        },
-        {
-          legends: ["f", "F", "f", "F"],
-        },
-        {
-          legends: ["g", "G", "g", "G"],
-        },
-        {
-          legends: ["h", "H", "h", "H"],
-        },
-        {
-          legends: ["j", "J", "j", "J"],
-        },
-        {
-          legends: ["k", "K", "k", "K"],
-        },
-        {
-          legends: ["l", "L", "l", "L"],
-        },
-        {
-          legends: [";", ":", ";", ":"],
-        },
-        {
-          legends: ["'", '"', "'", '"'],
-        },
+      expect(result.row3, "row3").toEqual([
+        { legends: ["a", "A", "a", "A"], x: 4 },
+        { legends: ["s", "S", "s", "S"] },
+        { legends: ["d", "D", "d", "D"] },
+        { legends: ["f", "F", "f", "F"] },
+        { legends: ["g", "G", "g", "G"] },
+        { legends: ["h", "H", "h", "H"] },
+        { legends: ["j", "J", "j", "J"] },
+        { legends: ["k", "K", "k", "K"] },
+        { legends: ["l", "L", "l", "L"] },
+        { legends: [";", ":", ";", ":"] },
+        { legends: ["'", '"', "'", '"'] },
       ]);
 
-      expect(result.row4).toEqual([
-        {
-          legends: ["z", "Z", "z", "Z"],
-          x: 6,
-        },
-        {
-          legends: ["x", "X", "x", "X"],
-        },
-        {
-          legends: ["c", "C", "c", "C"],
-        },
-        {
-          legends: ["v", "V", "v", "V"],
-        },
-        {
-          legends: ["b", "B", "b", "B"],
-        },
-        {
-          legends: ["n", "N", "n", "N"],
-        },
-        {
-          legends: ["m", "M", "m", "M"],
-        },
-        {
-          legends: [",", "<", ",", "<"],
-        },
-        {
-          legends: [".", ">", ".", ">"],
-        },
-        {
-          legends: ["/", "?", "/", "?"],
-        },
+      expect(result.row4, "row4").toEqual([
+        { legends: ["z", "Z", "z", "Z"], x: 6 },
+        { legends: ["x", "X", "x", "X"] },
+        { legends: ["c", "C", "c", "C"] },
+        { legends: ["v", "V", "v", "V"] },
+        { legends: ["b", "B", "b", "B"] },
+        { legends: ["n", "N", "n", "N"] },
+        { legends: ["m", "M", "m", "M"] },
+        { legends: [",", "<", ",", "<"] },
+        { legends: [".", ">", ".", ">"] },
+        { legends: ["/", "?", "/", "?"] },
       ]);
 
-      expect(result.row5).toEqual([
-        {
-          legends: ["qwerty", "qwerty", "qwerty", "qwerty"],
-          width: 6,
-          x: 22,
-        },
+      expect(result.row5, "row5").toEqual([
+        { legends: ["qwerty", "qwerty", "qwerty", "qwerty"], width: 6, x: 22 },
       ]);
     });
 
@@ -179,217 +82,80 @@ describe("keymap converter", () => {
         showAllKeys: true,
       });
 
-      expect(result.row1).toEqual([
-        {
-          legends: ["`", "~", "`", "~"],
-        },
-        {
-          legends: ["1", "!", "1", "!"],
-        },
-        {
-          legends: ["2", "@", "2", "@"],
-        },
-        {
-          legends: ["3", "#", "3", "#"],
-        },
-        {
-          legends: ["4", "$", "4", "$"],
-        },
-        {
-          legends: ["5", "%", "5", "%"],
-        },
-        {
-          legends: ["6", "^", "6", "^"],
-        },
-        {
-          legends: ["7", "&", "7", "&"],
-        },
-        {
-          legends: ["8", "*", "8", "*"],
-        },
-        {
-          legends: ["9", "(", "9", "("],
-        },
-        {
-          legends: ["0", ")", "0", ")"],
-        },
-        {
-          legends: ["-", "_", "-", "_"],
-        },
-        {
-          legends: ["=", "+", "=", "+"],
-        },
-        {
-          legends: ["BS", "BS", "BS", "BS"],
-          width: 2,
-        },
+      expect(result.row1, "row1").toEqual([
+        { legends: ["`", "~", "`", "~"] },
+        { legends: ["1", "!", "1", "!"] },
+        { legends: ["2", "@", "2", "@"] },
+        { legends: ["3", "#", "3", "#"] },
+        { legends: ["4", "$", "4", "$"] },
+        { legends: ["5", "%", "5", "%"] },
+        { legends: ["6", "^", "6", "^"] },
+        { legends: ["7", "&", "7", "&"] },
+        { legends: ["8", "*", "8", "*"] },
+        { legends: ["9", "(", "9", "("] },
+        { legends: ["0", ")", "0", ")"] },
+        { legends: ["-", "_", "-", "_"] },
+        { legends: ["=", "+", "=", "+"] },
+        { legends: ["BS", "BS", "BS", "BS"], width: 2 },
       ]);
 
-      expect(result.row2).toEqual([
-        {
-          legends: ["Tab", "Tab", "Tab", "Tab"],
-          width: 1.5,
-        },
-        {
-          legends: ["q", "Q", "q", "Q"],
-        },
-        {
-          legends: ["w", "W", "w", "W"],
-        },
-        {
-          legends: ["e", "E", "e", "E"],
-        },
-        {
-          legends: ["r", "R", "r", "R"],
-        },
-        {
-          legends: ["t", "T", "t", "T"],
-        },
-        {
-          legends: ["y", "Y", "y", "Y"],
-        },
-        {
-          legends: ["u", "U", "u", "U"],
-        },
-        {
-          legends: ["i", "I", "i", "I"],
-        },
-        {
-          legends: ["o", "O", "o", "O"],
-        },
-        {
-          legends: ["p", "P", "p", "P"],
-        },
-        {
-          legends: ["[", "{", "[", "{"],
-        },
-        {
-          legends: ["]", "}", "]", "}"],
-        },
-        {
-          legends: ["\\", "|", "\\", "|"],
-          width: 1.5,
-        },
+      expect(result.row2, "row2").toEqual([
+        { legends: ["Tab", "Tab", "Tab", "Tab"], width: 1.5 },
+        { legends: ["q", "Q", "q", "Q"] },
+        { legends: ["w", "W", "w", "W"] },
+        { legends: ["e", "E", "e", "E"] },
+        { legends: ["r", "R", "r", "R"] },
+        { legends: ["t", "T", "t", "T"] },
+        { legends: ["y", "Y", "y", "Y"] },
+        { legends: ["u", "U", "u", "U"] },
+        { legends: ["i", "I", "i", "I"] },
+        { legends: ["o", "O", "o", "O"] },
+        { legends: ["p", "P", "p", "P"] },
+        { legends: ["[", "{", "[", "{"] },
+        { legends: ["]", "}", "]", "}"] },
+        { legends: ["\\", "|", "\\", "|"], width: 1.5 },
       ]);
 
-      expect(result.row3).toEqual([
-        {
-          legends: ["Caps", "Caps", "Caps", "Caps"],
-          width: 1.75,
-        },
-        {
-          legends: ["a", "A", "a", "A"],
-        },
-        {
-          legends: ["s", "S", "s", "S"],
-        },
-        {
-          legends: ["d", "D", "d", "D"],
-        },
-        {
-          legends: ["f", "F", "f", "F"],
-        },
-        {
-          legends: ["g", "G", "g", "G"],
-        },
-        {
-          legends: ["h", "H", "h", "H"],
-        },
-        {
-          legends: ["j", "J", "j", "J"],
-        },
-        {
-          legends: ["k", "K", "k", "K"],
-        },
-        {
-          legends: ["l", "L", "l", "L"],
-        },
-        {
-          legends: [";", ":", ";", ":"],
-        },
-        {
-          legends: ["'", '"', "'", '"'],
-        },
-        {
-          legends: ["Enter", "Enter", "Enter", "Enter"],
-          width: 2.25,
-        },
+      expect(result.row3, "row3").toEqual([
+        { legends: ["Caps", "Caps", "Caps", "Caps"], width: 1.75 },
+        { legends: ["a", "A", "a", "A"] },
+        { legends: ["s", "S", "s", "S"] },
+        { legends: ["d", "D", "d", "D"] },
+        { legends: ["f", "F", "f", "F"] },
+        { legends: ["g", "G", "g", "G"] },
+        { legends: ["h", "H", "h", "H"] },
+        { legends: ["j", "J", "j", "J"] },
+        { legends: ["k", "K", "k", "K"] },
+        { legends: ["l", "L", "l", "L"] },
+        { legends: [";", ":", ";", ":"] },
+        { legends: ["'", '"', "'", '"'] },
+        { legends: ["Enter", "Enter", "Enter", "Enter"], width: 2.25 },
       ]);
 
-      expect(result.row4).toEqual([
-        {
-          legends: ["Shift", "Shift", "Shift", "Shift"],
-          width: 2.25,
-        },
-        {
-          legends: ["z", "Z", "z", "Z"],
-        },
-        {
-          legends: ["x", "X", "x", "X"],
-        },
-        {
-          legends: ["c", "C", "c", "C"],
-        },
-        {
-          legends: ["v", "V", "v", "V"],
-        },
-        {
-          legends: ["b", "B", "b", "B"],
-        },
-        {
-          legends: ["n", "N", "n", "N"],
-        },
-        {
-          legends: ["m", "M", "m", "M"],
-        },
-        {
-          legends: [",", "<", ",", "<"],
-        },
-        {
-          legends: [".", ">", ".", ">"],
-        },
-        {
-          legends: ["/", "?", "/", "?"],
-        },
-        {
-          legends: ["Shift", "Shift", "Shift", "Shift"],
-          width: 2.75,
-        },
+      expect(result.row4, "row4").toEqual([
+        { legends: ["Shift", "Shift", "Shift", "Shift"], width: 2.25 },
+        { legends: ["z", "Z", "z", "Z"] },
+        { legends: ["x", "X", "x", "X"] },
+        { legends: ["c", "C", "c", "C"] },
+        { legends: ["v", "V", "v", "V"] },
+        { legends: ["b", "B", "b", "B"] },
+        { legends: ["n", "N", "n", "N"] },
+        { legends: ["m", "M", "m", "M"] },
+        { legends: [",", "<", ",", "<"] },
+        { legends: [".", ">", ".", ">"] },
+        { legends: ["/", "?", "/", "?"] },
+        { legends: ["Shift", "Shift", "Shift", "Shift"], width: 2.75 },
       ]);
 
-      expect(result.row5).toEqual([
-        {
-          legends: ["Alt", "Alt", "Alt", "Alt"],
-          width: 1.25,
-        },
-        {
-          legends: ["Monke", "Monke", "Monke", "Monke"],
-          width: 1.25,
-        },
-        {
-          legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"],
-          width: 1.25,
-        },
-        {
-          legends: ["qwerty", "qwerty", "qwerty", "qwerty"],
-          width: 6.25,
-        },
-        {
-          legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"],
-          width: 1.25,
-        },
-        {
-          legends: ["Monke", "Monke", "Monke", "Monke"],
-          width: 1.25,
-        },
-        {
-          legends: ["Meta", "Meta", "Meta", "Meta"],
-          width: 1.25,
-        },
-        {
-          legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"],
-          width: 1.25,
-        },
+      expect(result.row5, "row5").toEqual([
+        { legends: ["Alt", "Alt", "Alt", "Alt"], width: 1.25 },
+        { legends: ["Monke", "Monke", "Monke", "Monke"], width: 1.25 },
+        { legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"], width: 1.25 },
+        { legends: ["qwerty", "qwerty", "qwerty", "qwerty"], width: 6.25 },
+        { legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"], width: 1.25 },
+        { legends: ["Monke", "Monke", "Monke", "Monke"], width: 1.25 },
+        { legends: ["Meta", "Meta", "Meta", "Meta"], width: 1.25 },
+        { legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"], width: 1.25 },
       ]);
     });
 
@@ -400,171 +166,66 @@ describe("keymap converter", () => {
         showAllKeys: false,
       });
 
-      expect(result.row1).toEqual([
-        {
-          legends: ["1", "!", "1", "!"],
-        },
-        {
-          legends: ["2", "@", "2", "@"],
-        },
-        {
-          legends: ["3", "#", "3", "#"],
-        },
-        {
-          legends: ["4", "$", "4", "$"],
-        },
-        {
-          legends: ["5", "%", "5", "%"],
-        },
-        {
-          legends: ["6", "^", "6", "^"],
-        },
-        {
-          legends: ["7", "&", "7", "&"],
-          x: 8,
-        },
-        {
-          legends: ["8", "*", "8", "*"],
-        },
-        {
-          legends: ["9", "(", "9", "("],
-        },
-        {
-          legends: ["0", ")", "0", ")"],
-        },
-        {
-          legends: ["-", "_", "-", "_"],
-        },
-        {
-          legends: ["=", "+", "=", "+"],
-        },
+      expect(result.row1, "row1").toEqual([
+        { legends: ["1", "!", "1", "!"] },
+        { legends: ["2", "@", "2", "@"] },
+        { legends: ["3", "#", "3", "#"] },
+        { legends: ["4", "$", "4", "$"] },
+        { legends: ["5", "%", "5", "%"] },
+        { legends: ["6", "^", "6", "^"] },
+        { legends: ["7", "&", "7", "&"], x: 8 },
+        { legends: ["8", "*", "8", "*"] },
+        { legends: ["9", "(", "9", "("] },
+        { legends: ["0", ")", "0", ")"] },
+        { legends: ["-", "_", "-", "_"] },
+        { legends: ["=", "+", "=", "+"] },
       ]);
 
-      expect(result.row2).toEqual([
-        {
-          legends: ["q", "Q", "q", "Q"],
-          x: 2,
-        },
-        {
-          legends: ["w", "W", "w", "W"],
-        },
-        {
-          legends: ["e", "E", "e", "E"],
-        },
-        {
-          legends: ["r", "R", "r", "R"],
-        },
-        {
-          legends: ["t", "T", "t", "T"],
-        },
-        {
-          legends: ["y", "Y", "y", "Y"],
-          x: 8,
-        },
-        {
-          legends: ["u", "U", "u", "U"],
-        },
-        {
-          legends: ["i", "I", "i", "I"],
-        },
-        {
-          legends: ["o", "O", "o", "O"],
-        },
-        {
-          legends: ["p", "P", "p", "P"],
-        },
-        {
-          legends: ["[", "{", "[", "{"],
-        },
-        {
-          legends: ["]", "}", "]", "}"],
-        },
+      expect(result.row2, "row2").toEqual([
+        { legends: ["q", "Q", "q", "Q"], x: 2 },
+        { legends: ["w", "W", "w", "W"] },
+        { legends: ["e", "E", "e", "E"] },
+        { legends: ["r", "R", "r", "R"] },
+        { legends: ["t", "T", "t", "T"] },
+        { legends: ["y", "Y", "y", "Y"], x: 8 },
+        { legends: ["u", "U", "u", "U"] },
+        { legends: ["i", "I", "i", "I"] },
+        { legends: ["o", "O", "o", "O"] },
+        { legends: ["p", "P", "p", "P"] },
+        { legends: ["[", "{", "[", "{"] },
+        { legends: ["]", "}", "]", "}"] },
       ]);
 
-      expect(result.row3).toEqual([
-        {
-          legends: ["a", "A", "a", "A"],
-          x: 4,
-        },
-        {
-          legends: ["s", "S", "s", "S"],
-        },
-        {
-          legends: ["d", "D", "d", "D"],
-        },
-        {
-          legends: ["f", "F", "f", "F"],
-        },
-        {
-          legends: ["g", "G", "g", "G"],
-        },
-        {
-          legends: ["h", "H", "h", "H"],
-          x: 8,
-        },
-        {
-          legends: ["j", "J", "j", "J"],
-        },
-        {
-          legends: ["k", "K", "k", "K"],
-        },
-        {
-          legends: ["l", "L", "l", "L"],
-        },
-        {
-          legends: [";", ":", ";", ":"],
-        },
-        {
-          legends: ["'", '"', "'", '"'],
-        },
+      expect(result.row3, "row3").toEqual([
+        { legends: ["a", "A", "a", "A"], x: 4 },
+        { legends: ["s", "S", "s", "S"] },
+        { legends: ["d", "D", "d", "D"] },
+        { legends: ["f", "F", "f", "F"] },
+        { legends: ["g", "G", "g", "G"] },
+        { legends: ["h", "H", "h", "H"], x: 8 },
+        { legends: ["j", "J", "j", "J"] },
+        { legends: ["k", "K", "k", "K"] },
+        { legends: ["l", "L", "l", "L"] },
+        { legends: [";", ":", ";", ":"] },
+        { legends: ["'", '"', "'", '"'] },
       ]);
 
-      expect(result.row4).toEqual([
-        {
-          legends: ["z", "Z", "z", "Z"],
-          x: 6,
-        },
-        {
-          legends: ["x", "X", "x", "X"],
-        },
-        {
-          legends: ["c", "C", "c", "C"],
-        },
-        {
-          legends: ["v", "V", "v", "V"],
-        },
-        {
-          legends: ["b", "B", "b", "B"],
-        },
-        {
-          legends: ["n", "N", "n", "N"],
-          x: 8,
-        },
-        {
-          legends: ["m", "M", "m", "M"],
-        },
-        {
-          legends: [",", "<", ",", "<"],
-        },
-        {
-          legends: [".", ">", ".", ">"],
-        },
-        {
-          legends: ["/", "?", "/", "?"],
-        },
+      expect(result.row4, "row4").toEqual([
+        { legends: ["z", "Z", "z", "Z"], x: 6 },
+        { legends: ["x", "X", "x", "X"] },
+        { legends: ["c", "C", "c", "C"] },
+        { legends: ["v", "V", "v", "V"] },
+        { legends: ["b", "B", "b", "B"] },
+        { legends: ["n", "N", "n", "N"], x: 8 },
+        { legends: ["m", "M", "m", "M"] },
+        { legends: [",", "<", ",", "<"] },
+        { legends: [".", ">", ".", ">"] },
+        { legends: ["/", "?", "/", "?"] },
       ]);
 
-      expect(result.row5).toEqual([
-        {
-          legends: ["qwerty", "qwerty", "qwerty", "qwerty"],
-          width: 3,
-          x: 23,
-        },
-        {
-          legends: ["", "", "", ""],
-          width: 3,
-          x: 8,
-        },
+      expect(result.row5, "row5").toEqual([
+        { legends: ["qwerty", "qwerty", "qwerty", "qwerty"], width: 3, x: 23 },
+        { legends: ["", "", "", ""], width: 3, x: 8 },
       ]);
     });
   });

From 31111964b4dccd81550a73cc4552b2520ca0b85c Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Thu, 18 Jun 2026 11:54:15 +0200
Subject: [PATCH 06/61] change keymapShowTopRow to keymapLayoutStyle

---
 frontend/__tests__/root/config-metadata.spec.ts   |  6 +++---
 .../src/ts/commandline/commandline-metadata.ts    |  2 +-
 frontend/src/ts/commandline/lists.ts              |  2 +-
 .../ts/components/pages/settings/SettingsPage.tsx |  2 +-
 frontend/src/ts/components/pages/test/Keymap.tsx  |  7 ++++---
 frontend/src/ts/config/metadata.tsx               |  6 +++---
 frontend/src/ts/config/utils.ts                   | 15 +++++++++++++++
 frontend/src/ts/constants/default-config.ts       |  2 +-
 frontend/src/ts/elements/keymap.ts                |  6 +++---
 packages/contracts/src/index.ts                   |  2 +-
 packages/schemas/src/configs.ts                   | 11 ++++++++---
 11 files changed, 41 insertions(+), 20 deletions(-)

diff --git a/frontend/__tests__/root/config-metadata.spec.ts b/frontend/__tests__/root/config-metadata.spec.ts
index ac227685de5d..eac0365d5c43 100644
--- a/frontend/__tests__/root/config-metadata.spec.ts
+++ b/frontend/__tests__/root/config-metadata.spec.ts
@@ -347,14 +347,14 @@ describe("ConfigMeta", () => {
           expected: { keymapMode: "static" },
         },
       ],
-      keymapShowTopRow: [
+      keymapLayoutStyle: [
         {
-          value: "always",
+          value: "minimal_numrow",
           given: { keymapMode: "react" },
           expected: { keymapMode: "react" },
         },
         {
-          value: "always",
+          value: "minimal_numrow",
           given: { keymapMode: "off" },
           expected: { keymapMode: "static" },
         },
diff --git a/frontend/src/ts/commandline/commandline-metadata.ts b/frontend/src/ts/commandline/commandline-metadata.ts
index 46bcb4ac237c..6a2b8ce83edc 100644
--- a/frontend/src/ts/commandline/commandline-metadata.ts
+++ b/frontend/src/ts/commandline/commandline-metadata.ts
@@ -664,7 +664,7 @@ export const commandlineConfigMetadata: CommandlineConfigMetadataObject = {
       afterExec: () => TestLogic.restart(),
     },
   },
-  keymapShowTopRow: {
+  keymapLayoutStyle: {
     subgroup: {
       options: "fromSchema",
     },
diff --git a/frontend/src/ts/commandline/lists.ts b/frontend/src/ts/commandline/lists.ts
index 14a455c6441e..aaacc5bc0f71 100644
--- a/frontend/src/ts/commandline/lists.ts
+++ b/frontend/src/ts/commandline/lists.ts
@@ -185,7 +185,7 @@ export const commands: CommandsSubgroup = {
       "keymapLegendStyle",
       "keymapSize",
       "keymapLayout",
-      "keymapShowTopRow",
+      "keymapLayoutStyle",
     ),
 
     //theme
diff --git a/frontend/src/ts/components/pages/settings/SettingsPage.tsx b/frontend/src/ts/components/pages/settings/SettingsPage.tsx
index 16da1cc15277..3ac7fb2b09dd 100644
--- a/frontend/src/ts/components/pages/settings/SettingsPage.tsx
+++ b/frontend/src/ts/components/pages/settings/SettingsPage.tsx
@@ -165,7 +165,7 @@ export function SettingsPage(): JSXElement {
               <KeymapLayout />
               <AutoSetting key="keymapStyle" wide />
               <AutoSetting key="keymapLegendStyle" wide />
-              <AutoSetting key="keymapShowTopRow" wide />
+              <AutoSetting key="keymapLayoutStyle" wide />
               <KeymapSize />
             </Show>
           </Section>
diff --git a/frontend/src/ts/components/pages/test/Keymap.tsx b/frontend/src/ts/components/pages/test/Keymap.tsx
index 51e053aeed35..a9c5434d4968 100644
--- a/frontend/src/ts/components/pages/test/Keymap.tsx
+++ b/frontend/src/ts/components/pages/test/Keymap.tsx
@@ -46,8 +46,9 @@ function Keyboard(props: { displayName: string; layoutData: LayoutObject }) {
   });
 
   const showFirstRow =
-    getConfig.keymapShowTopRow === "always" ||
-    (getConfig.keymapShowTopRow === "layout" &&
+    getConfig.keymapLayoutStyle === "full" ||
+    getConfig.keymapLayoutStyle === "minimal_numrow" ||
+    (getConfig.keymapLayoutStyle === "minimal" &&
       keymapLayoutObject()?.keymapShowTopRow);
 
   // Convert layout to KeyboardDefinition format
@@ -55,7 +56,7 @@ function Keyboard(props: { displayName: string; layoutData: LayoutObject }) {
     convertLayoutToKeymap(props.layoutData, {
       displayName: props.displayName,
       keymapStyle: getConfig.keymapStyle,
-      showAllKeys: true,
+      showAllKeys: getConfig.keymapLayoutStyle === "full",
     }),
   );
 
diff --git a/frontend/src/ts/config/metadata.tsx b/frontend/src/ts/config/metadata.tsx
index aaf6f16d0c30..005465ea9a7b 100644
--- a/frontend/src/ts/config/metadata.tsx
+++ b/frontend/src/ts/config/metadata.tsx
@@ -994,10 +994,10 @@ export const configMetadata: ConfigMetadataObject = {
     overrideConfig: ({ currentConfig }) =>
       currentConfig.keymapMode === "off" ? { keymapMode: "static" } : {},
   },
-  keymapShowTopRow: {
-    key: "keymapShowTopRow",
+  keymapLayoutStyle: {
+    key: "keymapLayoutStyle",
     fa: { icon: "fa-keyboard" },
-    displayString: "keymap show top row",
+    displayString: "keymap layout style",
     changeRequiresRestart: false,
     group: "appearance",
     overrideConfig: ({ currentConfig }) =>
diff --git a/frontend/src/ts/config/utils.ts b/frontend/src/ts/config/utils.ts
index 9621b2e717a3..647b0e9866bb 100644
--- a/frontend/src/ts/config/utils.ts
+++ b/frontend/src/ts/config/utils.ts
@@ -219,6 +219,21 @@ function replaceLegacyValues(
     }
   }
 
+  if ("keymapShowTopRow" in configObj) {
+    switch (configObj.keymapShowTopRow) {
+      case "never":
+        configObj.keymapLayoutStyle = "minimal";
+        break;
+      case "always":
+        configObj.keymapLayoutStyle = "minimal_numrow";
+        break;
+      case "layout":
+        configObj.keymapLayoutStyle = "minimal_layout";
+        break;
+    }
+    delete configObj.keymapShowTopRow;
+  }
+
   return configObj;
 }
 
diff --git a/frontend/src/ts/constants/default-config.ts b/frontend/src/ts/constants/default-config.ts
index c2fea2f0d058..7795ded910f5 100644
--- a/frontend/src/ts/constants/default-config.ts
+++ b/frontend/src/ts/constants/default-config.ts
@@ -57,7 +57,7 @@ const obj: Config = {
   keymapStyle: "staggered",
   keymapLegendStyle: "lowercase",
   keymapLayout: "overrideSync",
-  keymapShowTopRow: "layout",
+  keymapLayoutStyle: "minimal_layout",
   keymapSize: 1,
   fontFamily: "Roboto_Mono",
   smoothLineScroll: false,
diff --git a/frontend/src/ts/elements/keymap.ts b/frontend/src/ts/elements/keymap.ts
index b469b344bb86..562b975a0607 100644
--- a/frontend/src/ts/elements/keymap.ts
+++ b/frontend/src/ts/elements/keymap.ts
@@ -432,8 +432,8 @@ export async function refresh(): Promise<void> {
 
     const showTopRow =
       (TestWords.hasNumbers && Config.keymapMode === "next") ||
-      Config.keymapShowTopRow === "always" ||
-      (layoutData.keymapShowTopRow && Config.keymapShowTopRow !== "never");
+      Config.keymapLayoutStyle === "minimal_numrow" ||
+      (layoutData.keymapShowTopRow && Config.keymapLayoutStyle !== "minimal");
 
     const isMatrix =
       Config.keymapStyle === "matrix" || Config.keymapStyle === "split_matrix";
@@ -657,7 +657,7 @@ configEvent.subscribe(({ key }) => {
     (key === "layout" && Config.keymapLayout === "overrideSync") ||
     key === "keymapLayout" ||
     key === "keymapStyle" ||
-    key === "keymapShowTopRow" ||
+    key === "keymapLayoutStyle" ||
     key === "keymapMode"
   ) {
     void refresh();
diff --git a/packages/contracts/src/index.ts b/packages/contracts/src/index.ts
index 4f9920fe79dc..a2b7c2fd1852 100644
--- a/packages/contracts/src/index.ts
+++ b/packages/contracts/src/index.ts
@@ -37,5 +37,5 @@ export const contract = c.router({
  * Whenever there is a breaking change with old frontend clients increase this number.
  * This will inform the frontend to refresh.
  */
-export const COMPATIBILITY_CHECK = 4;
+export const COMPATIBILITY_CHECK = 5;
 export const COMPATIBILITY_CHECK_HEADER = "X-Compatibility-Check";
diff --git a/packages/schemas/src/configs.ts b/packages/schemas/src/configs.ts
index a709029877da..1a754a398544 100644
--- a/packages/schemas/src/configs.ts
+++ b/packages/schemas/src/configs.ts
@@ -114,8 +114,13 @@ export const KeymapLegendStyleSchema = z.enum([
 ]);
 export type KeymapLegendStyle = z.infer<typeof KeymapLegendStyleSchema>;
 
-export const KeymapShowTopRowSchema = z.enum(["always", "layout", "never"]);
-export type KeymapShowTopRow = z.infer<typeof KeymapShowTopRowSchema>;
+export const KeymapLayoutStyleSchema = z.enum([
+  "minimal", //showTopRow=never
+  "minimal_layout", //showTopRow=layout
+  "minimal_numrow", //showTopRow=always
+  "full", //include extra keys
+]);
+export type KeymapLayoutStyle = z.infer<typeof KeymapLayoutStyleSchema>;
 
 export const KeymapSizeSchema = z.number().min(0.5).max(3.5).step(0.1);
 export type KeymapSize = z.infer<typeof KeymapSizeSchema>;
@@ -470,7 +475,7 @@ export const ConfigSchema = z
     keymapLayout: KeymapLayoutSchema,
     keymapStyle: KeymapStyleSchema,
     keymapLegendStyle: KeymapLegendStyleSchema,
-    keymapShowTopRow: KeymapShowTopRowSchema,
+    keymapLayoutStyle: KeymapLayoutStyleSchema,
     keymapSize: KeymapSizeSchema,
 
     // theme

From 8e611ca63b801c710071b6b6d32d5d55d863ae64 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Thu, 18 Jun 2026 11:59:12 +0200
Subject: [PATCH 07/61] fix bottom row

---
 .../pages/test/keymapConverter.spec.ts        |  6 +-
 .../components/pages/test/keymapConverter.ts  | 60 ++++++++++---------
 2 files changed, 35 insertions(+), 31 deletions(-)

diff --git a/frontend/__tests__/components/pages/test/keymapConverter.spec.ts b/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
index 2a40b1c74235..cf5f1decb2d0 100644
--- a/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
+++ b/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
@@ -148,11 +148,11 @@ describe("keymap converter", () => {
       ]);
 
       expect(result.row5, "row5").toEqual([
-        { legends: ["Alt", "Alt", "Alt", "Alt"], width: 1.25 },
-        { legends: ["Monke", "Monke", "Monke", "Monke"], width: 1.25 },
         { legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"], width: 1.25 },
+        { legends: ["Monke", "Monke", "Monke", "Monke"], width: 1.25 },
+        { legends: ["Alt", "Alt", "Alt", "Alt"], width: 1.25 },
         { legends: ["qwerty", "qwerty", "qwerty", "qwerty"], width: 6.25 },
-        { legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"], width: 1.25 },
+        { legends: ["Alt", "Alt", "Alt", "Alt"], width: 1.25 },
         { legends: ["Monke", "Monke", "Monke", "Monke"], width: 1.25 },
         { legends: ["Meta", "Meta", "Meta", "Meta"], width: 1.25 },
         { legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"], width: 1.25 },
diff --git a/frontend/src/ts/components/pages/test/keymapConverter.ts b/frontend/src/ts/components/pages/test/keymapConverter.ts
index 8aeda44f795c..37ad92492212 100644
--- a/frontend/src/ts/components/pages/test/keymapConverter.ts
+++ b/frontend/src/ts/components/pages/test/keymapConverter.ts
@@ -157,35 +157,39 @@ function convertBase(
       width: 2.75,
     });
 
-    result.row5.unshift({
-      legends: buildLegends(["Ctrl"]),
-      width: 1.25,
-    });
-    result.row5.unshift({
-      legends: buildLegends(["Monke"]),
-      width: 1.25,
-    });
-    result.row5.unshift({
-      legends: buildLegends(["Alt"]),
-      width: 1.25,
-    });
+    result.row5.unshift(
+      {
+        legends: buildLegends(["Ctrl"]),
+        width: 1.25,
+      },
+      {
+        legends: buildLegends(["Monke"]),
+        width: 1.25,
+      },
+      {
+        legends: buildLegends(["Alt"]),
+        width: 1.25,
+      },
+    );
 
-    result.row5.push({
-      legends: buildLegends(["Ctrl"]),
-      width: 1.25,
-    });
-    result.row5.push({
-      legends: buildLegends(["Monke"]),
-      width: 1.25,
-    });
-    result.row5.push({
-      legends: buildLegends(["Meta"]),
-      width: 1.25,
-    });
-    result.row5.push({
-      legends: buildLegends(["Ctrl"]),
-      width: 1.25,
-    });
+    result.row5.push(
+      {
+        legends: buildLegends(["Alt"]),
+        width: 1.25,
+      },
+      {
+        legends: buildLegends(["Monke"]),
+        width: 1.25,
+      },
+      {
+        legends: buildLegends(["Meta"]),
+        width: 1.25,
+      },
+      {
+        legends: buildLegends(["Ctrl"]),
+        width: 1.25,
+      },
+    );
   }
 
   return result;

From 731b7bfb3e70c61619c8ffc1dddc3767b91450c5 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Thu, 18 Jun 2026 13:19:16 +0200
Subject: [PATCH 08/61] iso

---
 .../pages/test/keymapConverter.spec.ts        | 236 +++++++++++++++++-
 .../src/ts/components/pages/test/Keymap.tsx   |   4 +-
 .../components/pages/test/keymapConverter.ts  |  23 +-
 frontend/src/ts/states/test.ts                |   2 +-
 frontend/src/ts/utils/json-data.ts            |   5 +-
 5 files changed, 259 insertions(+), 11 deletions(-)

diff --git a/frontend/__tests__/components/pages/test/keymapConverter.spec.ts b/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
index cf5f1decb2d0..cb4054c5ecae 100644
--- a/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
+++ b/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
@@ -2,6 +2,8 @@ import { describe, expect, it } from "vitest";
 import { convertLayoutToKeymap } from "../../../../src/ts/components/pages/test/keymapConverter";
 
 import qwertyLayout from "../../../../static/layouts/qwerty.json";
+import qwertzLayout from "../../../../static/layouts/qwertz.json";
+
 import { LayoutObject } from "@monkeytype/schemas/layouts";
 
 describe("keymap converter", () => {
@@ -75,7 +77,7 @@ describe("keymap converter", () => {
       ]);
     });
 
-    it("converts qwerty staggered", () => {
+    it("converts qwerty staggered all keys", () => {
       const result = convertLayoutToKeymap(qwertyLayout as LayoutObject, {
         displayName: "qwerty",
         keymapStyle: "staggered",
@@ -228,5 +230,237 @@ describe("keymap converter", () => {
         { legends: ["", "", "", ""], width: 3, x: 8 },
       ]);
     });
+
+    it("converts qwertz staggered", () => {
+      const result = convertLayoutToKeymap(qwertzLayout as LayoutObject, {
+        displayName: "qwertz",
+        keymapStyle: "staggered",
+        showAllKeys: false,
+      });
+
+      expect(result.row1, "row1").toEqual([
+        { legends: ["1", "!", "1", "!"] },
+        { legends: ["2", `"`, "2", `"`] },
+        { legends: ["3", "§", "3", "§"] },
+        { legends: ["4", "$", "4", "$"] },
+        { legends: ["5", "%", "5", "%"] },
+        { legends: ["6", "&", "6", "&"] },
+        { legends: ["7", "/", "7", "/"] },
+        { legends: ["8", "(", "8", "("] },
+        { legends: ["9", ")", "9", ")"] },
+        { legends: ["0", "=", "0", "="] },
+        { legends: ["ß", "?", "ß", "?"] },
+        { legends: ["´", "`", "´", "`"] },
+      ]);
+
+      expect(result.row2, "row2").toEqual([
+        { legends: ["q", "Q", "q", "Q"], x: 2 },
+        { legends: ["w", "W", "w", "W"] },
+        { legends: ["e", "E", "e", "E"] },
+        { legends: ["r", "R", "r", "R"] },
+        { legends: ["t", "T", "t", "T"] },
+        { legends: ["z", "Z", "z", "Z"] },
+        { legends: ["u", "U", "u", "U"] },
+        { legends: ["i", "I", "i", "I"] },
+        { legends: ["o", "O", "o", "O"] },
+        { legends: ["p", "P", "p", "P"] },
+        { legends: ["ü", "Ü", "ü", "Ü"] },
+        { legends: ["+", "*", "+", "*"] },
+      ]);
+
+      expect(result.row3, "row3").toEqual([
+        { legends: ["a", "A", "a", "A"], x: 4 },
+        { legends: ["s", "S", "s", "S"] },
+        { legends: ["d", "D", "d", "D"] },
+        { legends: ["f", "F", "f", "F"] },
+        { legends: ["g", "G", "g", "G"] },
+        { legends: ["h", "H", "h", "H"] },
+        { legends: ["j", "J", "j", "J"] },
+        { legends: ["k", "K", "k", "K"] },
+        { legends: ["l", "L", "l", "L"] },
+        { legends: ["ö", "Ö", "ö", "Ö"] },
+        { legends: ["ä", "Ä", "ä", "Ä"] },
+        { legends: ["#", "'", "#", "'"] },
+      ]);
+
+      expect(result.row4, "row4").toEqual([
+        { legends: ["<", ">", "<", ">"], x: 1 },
+        { legends: ["y", "Y", "y", "Y"] },
+        { legends: ["x", "X", "x", "X"] },
+        { legends: ["c", "C", "c", "C"] },
+        { legends: ["v", "V", "v", "V"] },
+        { legends: ["b", "B", "b", "B"] },
+        { legends: ["n", "N", "n", "N"] },
+        { legends: ["m", "M", "m", "M"] },
+        { legends: [",", ";", ",", ";"] },
+        { legends: [".", ":", ".", ":"] },
+        { legends: ["-", "_", "-", "_"] },
+      ]);
+
+      expect(result.row5, "row5").toEqual([
+        { legends: ["qwertz", "qwertz", "qwertz", "qwertz"], width: 6, x: 22 },
+      ]);
+    });
+
+    it("converts qwertz staggered all keys", () => {
+      const result = convertLayoutToKeymap(qwertzLayout as LayoutObject, {
+        displayName: "qwertz",
+        keymapStyle: "staggered",
+        showAllKeys: true,
+      });
+
+      expect(result.row1, "row1").toEqual([
+        { legends: ["^", "°", "^", "°"] },
+        { legends: ["1", "!", "1", "!"] },
+        { legends: ["2", `"`, "2", `"`] },
+        { legends: ["3", "§", "3", "§"] },
+        { legends: ["4", "$", "4", "$"] },
+        { legends: ["5", "%", "5", "%"] },
+        { legends: ["6", "&", "6", "&"] },
+        { legends: ["7", "/", "7", "/"] },
+        { legends: ["8", "(", "8", "("] },
+        { legends: ["9", ")", "9", ")"] },
+        { legends: ["0", "=", "0", "="] },
+        { legends: ["ß", "?", "ß", "?"] },
+        { legends: ["´", "`", "´", "`"] },
+        { legends: ["BS", "BS", "BS", "BS"], width: 2 },
+      ]);
+
+      expect(result.row2, "row2").toEqual([
+        { legends: ["Tab", "Tab", "Tab", "Tab"], width: 1.5 },
+        { legends: ["q", "Q", "q", "Q"] },
+        { legends: ["w", "W", "w", "W"] },
+        { legends: ["e", "E", "e", "E"] },
+        { legends: ["r", "R", "r", "R"] },
+        { legends: ["t", "T", "t", "T"] },
+        { legends: ["z", "Z", "z", "Z"] },
+        { legends: ["u", "U", "u", "U"] },
+        { legends: ["i", "I", "i", "I"] },
+        { legends: ["o", "O", "o", "O"] },
+        { legends: ["p", "P", "p", "P"] },
+        { legends: ["ü", "Ü", "ü", "Ü"] },
+        { legends: ["+", "*", "+", "*"] },
+        {
+          legends: ["Enter", "Enter", "Enter", "Enter"],
+          height: 2,
+          width: 1.5,
+        },
+      ]);
+
+      expect(result.row3, "row3").toEqual([
+        { legends: ["Caps", "Caps", "Caps", "Caps"], width: 1.75 },
+        { legends: ["a", "A", "a", "A"] },
+        { legends: ["s", "S", "s", "S"] },
+        { legends: ["d", "D", "d", "D"] },
+        { legends: ["f", "F", "f", "F"] },
+        { legends: ["g", "G", "g", "G"] },
+        { legends: ["h", "H", "h", "H"] },
+        { legends: ["j", "J", "j", "J"] },
+        { legends: ["k", "K", "k", "K"] },
+        { legends: ["l", "L", "l", "L"] },
+        { legends: ["ö", "Ö", "ö", "Ö"] },
+        { legends: ["ä", "Ä", "ä", "Ä"] },
+        { legends: ["#", "'", "#", "'"] },
+      ]);
+
+      expect(result.row4, "row4").toEqual([
+        { legends: ["Shift", "Shift", "Shift", "Shift"], width: 1.25 },
+        { legends: ["<", ">", "<", ">"] },
+        { legends: ["y", "Y", "y", "Y"] },
+        { legends: ["x", "X", "x", "X"] },
+        { legends: ["c", "C", "c", "C"] },
+        { legends: ["v", "V", "v", "V"] },
+        { legends: ["b", "B", "b", "B"] },
+        { legends: ["n", "N", "n", "N"] },
+        { legends: ["m", "M", "m", "M"] },
+        { legends: [",", ";", ",", ";"] },
+        { legends: [".", ":", ".", ":"] },
+        { legends: ["-", "_", "-", "_"] },
+        { legends: ["Shift", "Shift", "Shift", "Shift"], width: 2.75 },
+      ]);
+
+      expect(result.row5, "row5").toEqual([
+        { legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"], width: 1.25 },
+        { legends: ["Monke", "Monke", "Monke", "Monke"], width: 1.25 },
+        { legends: ["Alt", "Alt", "Alt", "Alt"], width: 1.25 },
+        { legends: ["qwertz", "qwertz", "qwertz", "qwertz"], width: 6.25 },
+        { legends: ["Alt", "Alt", "Alt", "Alt"], width: 1.25 },
+        { legends: ["Monke", "Monke", "Monke", "Monke"], width: 1.25 },
+        { legends: ["Meta", "Meta", "Meta", "Meta"], width: 1.25 },
+        { legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"], width: 1.25 },
+      ]);
+    });
+
+    it("converts qwertz split", () => {
+      const result = convertLayoutToKeymap(qwertzLayout as LayoutObject, {
+        displayName: "qwertz",
+        keymapStyle: "split",
+        showAllKeys: false,
+      });
+
+      expect(result.row1, "row1").toEqual([
+        { legends: ["1", "!", "1", "!"] },
+        { legends: ["2", `"`, "2", `"`] },
+        { legends: ["3", "§", "3", "§"] },
+        { legends: ["4", "$", "4", "$"] },
+        { legends: ["5", "%", "5", "%"] },
+        { legends: ["6", "&", "6", "&"] },
+        { legends: ["7", "/", "7", "/"], x: 8 },
+        { legends: ["8", "(", "8", "("] },
+        { legends: ["9", ")", "9", ")"] },
+        { legends: ["0", "=", "0", "="] },
+        { legends: ["ß", "?", "ß", "?"] },
+        { legends: ["´", "`", "´", "`"] },
+      ]);
+
+      expect(result.row2, "row2").toEqual([
+        { legends: ["q", "Q", "q", "Q"], x: 2 },
+        { legends: ["w", "W", "w", "W"] },
+        { legends: ["e", "E", "e", "E"] },
+        { legends: ["r", "R", "r", "R"] },
+        { legends: ["t", "T", "t", "T"] },
+        { legends: ["z", "Z", "z", "Z"], x: 8 },
+        { legends: ["u", "U", "u", "U"] },
+        { legends: ["i", "I", "i", "I"] },
+        { legends: ["o", "O", "o", "O"] },
+        { legends: ["p", "P", "p", "P"] },
+        { legends: ["ü", "Ü", "ü", "Ü"] },
+        { legends: ["+", "*", "+", "*"] },
+      ]);
+
+      expect(result.row3, "row3").toEqual([
+        { legends: ["a", "A", "a", "A"], x: 4 },
+        { legends: ["s", "S", "s", "S"] },
+        { legends: ["d", "D", "d", "D"] },
+        { legends: ["f", "F", "f", "F"] },
+        { legends: ["g", "G", "g", "G"] },
+        { legends: ["h", "H", "h", "H"], x: 8 },
+        { legends: ["j", "J", "j", "J"] },
+        { legends: ["k", "K", "k", "K"] },
+        { legends: ["l", "L", "l", "L"] },
+        { legends: ["ö", "Ö", "ö", "Ö"] },
+        { legends: ["ä", "Ä", "ä", "Ä"] },
+        { legends: ["#", "'", "#", "'"] },
+      ]);
+
+      expect(result.row4, "row4").toEqual([
+        { legends: ["<", ">", "<", ">"], x: 1 },
+        { legends: ["y", "Y", "y", "Y"] },
+        { legends: ["x", "X", "x", "X"] },
+        { legends: ["c", "C", "c", "C"] },
+        { legends: ["v", "V", "v", "V"] },
+        { legends: ["b", "B", "b", "B"], x: 8 },
+        { legends: ["n", "N", "n", "N"] },
+        { legends: ["m", "M", "m", "M"] },
+        { legends: [",", ";", ",", ";"] },
+        { legends: [".", ":", ".", ":"] },
+        { legends: ["-", "_", "-", "_"] },
+      ]);
+
+      expect(result.row5, "row5").toEqual([
+        { legends: ["qwertz", "qwertz", "qwertz", "qwertz"], width: 3, x: 23 },
+        { legends: ["", "", "", ""], width: 3, x: 8 },
+      ]);
+    });
   });
 });
diff --git a/frontend/src/ts/components/pages/test/Keymap.tsx b/frontend/src/ts/components/pages/test/Keymap.tsx
index a9c5434d4968..06075de981dd 100644
--- a/frontend/src/ts/components/pages/test/Keymap.tsx
+++ b/frontend/src/ts/components/pages/test/Keymap.tsx
@@ -61,7 +61,7 @@ function Keyboard(props: { displayName: string; layoutData: LayoutObject }) {
   );
 
   return (
-    <div data-ui-element="keymap" class="flex flex-col gap-2 text-sm text-sub">
+    <div data-ui-element="keymap" class="flex flex-col text-sm text-sub">
       <Show when={keyboardDef()} fallback={<div>Loading...</div>}>
         <KeyboardDefinitionRenderer
           keyboardDef={keyboardDef()}
@@ -82,7 +82,7 @@ function KeyboardDefinitionRenderer(props: {
     <For each={typedEntries(props.keyboardDef)}>
       {([rowId, keys]) => (
         <Show when={rowId !== "row1" || props.showFirstRow}>
-          <div class="flex flex-row">
+          <div class="flex h-8 flex-row">
             <For each={keys}>
               {(key) => <Key {...key} layer={props.layer} />}
             </For>
diff --git a/frontend/src/ts/components/pages/test/keymapConverter.ts b/frontend/src/ts/components/pages/test/keymapConverter.ts
index 37ad92492212..b8b565a6cc74 100644
--- a/frontend/src/ts/components/pages/test/keymapConverter.ts
+++ b/frontend/src/ts/components/pages/test/keymapConverter.ts
@@ -42,10 +42,12 @@ function convertStaggered(
   options: ConvertOptions,
 ): KeyboardDefinition {
   const split = options.keymapStyle === "split";
+  const isIso = layout.type === "iso";
 
   if (split && layout.keys.row5.length === 1) {
     layout.keys.row5.push(buildLegends([""]));
   }
+
   const calcGap =
     ({ col1Gap, splitCol }: { col1Gap: number; splitCol?: number }) =>
     ({ col }: { col: number }) => {
@@ -65,7 +67,7 @@ function convertStaggered(
       width: ({ col }) => (col === 12 ? 1.5 : undefined),
     },
     row3: { x: calcGap({ col1Gap: 4 }) },
-    row4: { x: calcGap({ col1Gap: 6 }) },
+    row4: { x: calcGap({ col1Gap: isIso ? 1 : 6 }) },
     row5: {
       x: calcGap({ col1Gap: split ? 3 + 5 * 4 : 22, splitCol: 1 }),
       width: ({ col }) => {
@@ -101,6 +103,7 @@ function convertBase(
     >
   >,
 ): KeyboardDefinition {
+  const isIso = layout.type === "iso";
   const result = Object.fromEntries(
     typedEntries(layout.keys).map(([row, keys]) => [
       row,
@@ -144,13 +147,21 @@ function convertBase(
       legends: buildLegends(["Caps"]),
       width: 1.75,
     });
-    result.row3.push({
-      legends: buildLegends(["Enter"]),
-      width: 2.25,
-    });
+    if (isIso) {
+      result.row2.push({
+        legends: buildLegends(["Enter"]),
+        width: 1.5,
+        height: 2,
+      });
+    } else {
+      result.row3.push({
+        legends: buildLegends(["Enter"]),
+        width: 2.25,
+      });
+    }
     result.row4.unshift({
       legends: buildLegends(["Shift"]),
-      width: 2.25,
+      width: isIso ? 1.25 : 2.25,
     });
     result.row4.push({
       legends: buildLegends(["Shift"]),
diff --git a/frontend/src/ts/states/test.ts b/frontend/src/ts/states/test.ts
index ea1143f25950..14eb4e9573dc 100644
--- a/frontend/src/ts/states/test.ts
+++ b/frontend/src/ts/states/test.ts
@@ -77,5 +77,5 @@ export const getKeymapLayout = createMemo<{
 
 export const [keymapLayoutObject] = createResource(
   getKeymapLayout,
-  async (layout) => structuredClone(await getLayout(layout.layout)),
+  async (layout) => await getLayout(layout.layout),
 );
diff --git a/frontend/src/ts/utils/json-data.ts b/frontend/src/ts/utils/json-data.ts
index 7b773eb19a20..221524f31c5b 100644
--- a/frontend/src/ts/utils/json-data.ts
+++ b/frontend/src/ts/utils/json-data.ts
@@ -76,7 +76,10 @@ export const cachedFetchJson = memoizeAsync(fetchJson);
  * @throws {Error} If the layout list or layout doesn't exist.
  */
 export async function getLayout(layoutName: string): Promise<LayoutObject> {
-  return await cachedFetchJson<LayoutObject>(`/layouts/${layoutName}.json`);
+  //TODO remove structuredClone, should not be needed with the new keymap implementation
+  return structuredClone(
+    await cachedFetchJson<LayoutObject>(`/layouts/${layoutName}.json`),
+  );
 }
 
 // used for polyglot wordset language-specific properties

From 55ff0a6e4848479dc64e62d889d011aaf50b7459 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Thu, 18 Jun 2026 13:57:02 +0200
Subject: [PATCH 09/61] simplify test

---
 .../pages/test/keymapConverter.spec.ts        | 462 ++++++++----------
 1 file changed, 199 insertions(+), 263 deletions(-)

diff --git a/frontend/__tests__/components/pages/test/keymapConverter.spec.ts b/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
index cb4054c5ecae..4579ad3883d5 100644
--- a/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
+++ b/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
@@ -84,81 +84,74 @@ describe("keymap converter", () => {
         showAllKeys: true,
       });
 
-      expect(result.row1, "row1").toEqual([
-        { legends: ["`", "~", "`", "~"] },
-        { legends: ["1", "!", "1", "!"] },
-        { legends: ["2", "@", "2", "@"] },
-        { legends: ["3", "#", "3", "#"] },
-        { legends: ["4", "$", "4", "$"] },
-        { legends: ["5", "%", "5", "%"] },
-        { legends: ["6", "^", "6", "^"] },
-        { legends: ["7", "&", "7", "&"] },
-        { legends: ["8", "*", "8", "*"] },
-        { legends: ["9", "(", "9", "("] },
-        { legends: ["0", ")", "0", ")"] },
-        { legends: ["-", "_", "-", "_"] },
-        { legends: ["=", "+", "=", "+"] },
-        { legends: ["BS", "BS", "BS", "BS"], width: 2 },
-      ]);
+      // Test only keys added when showAllKeys is true (not covered by basic staggered test)
+      // Row1: BS added at end
+      expect(result.row1[result.row1.length - 1], "row1 last").toEqual({
+        legends: ["BS", "BS", "BS", "BS"],
+        width: 2,
+      });
 
-      expect(result.row2, "row2").toEqual([
-        { legends: ["Tab", "Tab", "Tab", "Tab"], width: 1.5 },
-        { legends: ["q", "Q", "q", "Q"] },
-        { legends: ["w", "W", "w", "W"] },
-        { legends: ["e", "E", "e", "E"] },
-        { legends: ["r", "R", "r", "R"] },
-        { legends: ["t", "T", "t", "T"] },
-        { legends: ["y", "Y", "y", "Y"] },
-        { legends: ["u", "U", "u", "U"] },
-        { legends: ["i", "I", "i", "I"] },
-        { legends: ["o", "O", "o", "O"] },
-        { legends: ["p", "P", "p", "P"] },
-        { legends: ["[", "{", "[", "{"] },
-        { legends: ["]", "}", "]", "}"] },
-        { legends: ["\\", "|", "\\", "|"], width: 1.5 },
-      ]);
+      // Row2: Tab added at start
+      expect(result.row2[0], "row2 first").toEqual({
+        legends: ["Tab", "Tab", "Tab", "Tab"],
+        width: 1.5,
+      });
 
-      expect(result.row3, "row3").toEqual([
-        { legends: ["Caps", "Caps", "Caps", "Caps"], width: 1.75 },
-        { legends: ["a", "A", "a", "A"] },
-        { legends: ["s", "S", "s", "S"] },
-        { legends: ["d", "D", "d", "D"] },
-        { legends: ["f", "F", "f", "F"] },
-        { legends: ["g", "G", "g", "G"] },
-        { legends: ["h", "H", "h", "H"] },
-        { legends: ["j", "J", "j", "J"] },
-        { legends: ["k", "K", "k", "K"] },
-        { legends: ["l", "L", "l", "L"] },
-        { legends: [";", ":", ";", ":"] },
-        { legends: ["'", '"', "'", '"'] },
-        { legends: ["Enter", "Enter", "Enter", "Enter"], width: 2.25 },
-      ]);
+      // Row3: Caps added at start, Enter added at end
+      expect(result.row3[0], "row3 first").toEqual({
+        legends: ["Caps", "Caps", "Caps", "Caps"],
+        width: 1.75,
+      });
+      expect(result.row3[result.row3.length - 1], "row3 last").toEqual({
+        legends: ["Enter", "Enter", "Enter", "Enter"],
+        width: 2.25,
+      });
 
-      expect(result.row4, "row4").toEqual([
-        { legends: ["Shift", "Shift", "Shift", "Shift"], width: 2.25 },
-        { legends: ["z", "Z", "z", "Z"] },
-        { legends: ["x", "X", "x", "X"] },
-        { legends: ["c", "C", "c", "C"] },
-        { legends: ["v", "V", "v", "V"] },
-        { legends: ["b", "B", "b", "B"] },
-        { legends: ["n", "N", "n", "N"] },
-        { legends: ["m", "M", "m", "M"] },
-        { legends: [",", "<", ",", "<"] },
-        { legends: [".", ">", ".", ">"] },
-        { legends: ["/", "?", "/", "?"] },
-        { legends: ["Shift", "Shift", "Shift", "Shift"], width: 2.75 },
-      ]);
+      // Row4: Shift added at start and end
+      expect(result.row4[0], "row4 first").toEqual({
+        legends: ["Shift", "Shift", "Shift", "Shift"],
+        width: 2.25,
+      });
+      expect(result.row4[result.row4.length - 1], "row4 last").toEqual({
+        legends: ["Shift", "Shift", "Shift", "Shift"],
+        width: 2.75,
+      });
 
-      expect(result.row5, "row5").toEqual([
-        { legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"], width: 1.25 },
-        { legends: ["Monke", "Monke", "Monke", "Monke"], width: 1.25 },
-        { legends: ["Alt", "Alt", "Alt", "Alt"], width: 1.25 },
-        { legends: ["qwerty", "qwerty", "qwerty", "qwerty"], width: 6.25 },
-        { legends: ["Alt", "Alt", "Alt", "Alt"], width: 1.25 },
-        { legends: ["Monke", "Monke", "Monke", "Monke"], width: 1.25 },
-        { legends: ["Meta", "Meta", "Meta", "Meta"], width: 1.25 },
-        { legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"], width: 1.25 },
-      ]);
+      // Row5: Ctrl, Monke, Alt at start; Alt, Monke, Meta, Ctrl at end
+      expect(result.row5[0], "row5 first").toEqual({
+        legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"],
+        width: 1.25,
+      });
+      expect(result.row5[1], "row5 second").toEqual({
+        legends: ["Monke", "Monke", "Monke", "Monke"],
+        width: 1.25,
+      });
+      expect(result.row5[2], "row5 third").toEqual({
+        legends: ["Alt", "Alt", "Alt", "Alt"],
+        width: 1.25,
+      });
+      expect(result.row5[result.row5.length - 4], "row5 Alt right").toEqual({
+        legends: ["Alt", "Alt", "Alt", "Alt"],
+        width: 1.25,
+      });
+      expect(result.row5[result.row5.length - 3], "row5 Monke right").toEqual({
+        legends: ["Monke", "Monke", "Monke", "Monke"],
+        width: 1.25,
+      });
+      expect(result.row5[result.row5.length - 2], "row5 Meta").toEqual({
+        legends: ["Meta", "Meta", "Meta", "Meta"],
+        width: 1.25,
+      });
+      expect(result.row5[result.row5.length - 1], "row5 last").toEqual({
+        legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"],
+        width: 1.25,
+      });
+
+      // Also verify total counts are as expected with extra keys
+      expect(result.row1.length, "row1 length").toBe(14);
+      expect(result.row2.length, "row2 length").toBe(14);
+      expect(result.row3.length, "row3 length").toBe(13);
+      expect(result.row4.length, "row4 length").toBe(12);
     });
 
     it("converts qwerty split", () => {
@@ -168,67 +161,45 @@ describe("keymap converter", () => {
         showAllKeys: false,
       });
 
-      expect(result.row1, "row1").toEqual([
-        { legends: ["1", "!", "1", "!"] },
-        { legends: ["2", "@", "2", "@"] },
-        { legends: ["3", "#", "3", "#"] },
-        { legends: ["4", "$", "4", "$"] },
-        { legends: ["5", "%", "5", "%"] },
-        { legends: ["6", "^", "6", "^"] },
-        { legends: ["7", "&", "7", "&"], x: 8 },
-        { legends: ["8", "*", "8", "*"] },
-        { legends: ["9", "(", "9", "("] },
-        { legends: ["0", ")", "0", ")"] },
-        { legends: ["-", "_", "-", "_"] },
-        { legends: ["=", "+", "=", "+"] },
-      ]);
+      // Test split-specific differences from staggered (not covered by basic test)
+      // Split adds x=8 gap after column 7 for rows 1-4, and row5 has 2 keys with gap
 
-      expect(result.row2, "row2").toEqual([
-        { legends: ["q", "Q", "q", "Q"], x: 2 },
-        { legends: ["w", "W", "w", "W"] },
-        { legends: ["e", "E", "e", "E"] },
-        { legends: ["r", "R", "r", "R"] },
-        { legends: ["t", "T", "t", "T"] },
-        { legends: ["y", "Y", "y", "Y"], x: 8 },
-        { legends: ["u", "U", "u", "U"] },
-        { legends: ["i", "I", "i", "I"] },
-        { legends: ["o", "O", "o", "O"] },
-        { legends: ["p", "P", "p", "P"] },
-        { legends: ["[", "{", "[", "{"] },
-        { legends: ["]", "}", "]", "}"] },
-      ]);
+      // Row 1: col7 (index 6) = '7' gets x=8
+      expect(result.row1[6], "row1 key 7").toEqual({
+        legends: ["7", "&", "7", "&"],
+        x: 8,
+      });
 
-      expect(result.row3, "row3").toEqual([
-        { legends: ["a", "A", "a", "A"], x: 4 },
-        { legends: ["s", "S", "s", "S"] },
-        { legends: ["d", "D", "d", "D"] },
-        { legends: ["f", "F", "f", "F"] },
-        { legends: ["g", "G", "g", "G"] },
-        { legends: ["h", "H", "h", "H"], x: 8 },
-        { legends: ["j", "J", "j", "J"] },
-        { legends: ["k", "K", "k", "K"] },
-        { legends: ["l", "L", "l", "L"] },
-        { legends: [";", ":", ";", ":"] },
-        { legends: ["'", '"', "'", '"'] },
-      ]);
+      // Row 2: col6 (index 5) = 'y' gets x=8
+      expect(result.row2[5], "row2 key y").toEqual({
+        legends: ["y", "Y", "y", "Y"],
+        x: 8,
+      });
 
-      expect(result.row4, "row4").toEqual([
-        { legends: ["z", "Z", "z", "Z"], x: 6 },
-        { legends: ["x", "X", "x", "X"] },
-        { legends: ["c", "C", "c", "C"] },
-        { legends: ["v", "V", "v", "V"] },
-        { legends: ["b", "B", "b", "B"] },
-        { legends: ["n", "N", "n", "N"], x: 8 },
-        { legends: ["m", "M", "m", "M"] },
-        { legends: [",", "<", ",", "<"] },
-        { legends: [".", ">", ".", ">"] },
-        { legends: ["/", "?", "/", "?"] },
-      ]);
+      // Row 3: col6 (index 5) = 'h' gets x=8
+      expect(result.row3[5], "row3 key h").toEqual({
+        legends: ["h", "H", "h", "H"],
+        x: 8,
+      });
 
-      expect(result.row5, "row5").toEqual([
-        { legends: ["qwerty", "qwerty", "qwerty", "qwerty"], width: 3, x: 23 },
-        { legends: ["", "", "", ""], width: 3, x: 8 },
-      ]);
+      // Row 4: col6 (index 5) = 'n' gets x=8
+      expect(result.row4[5], "row4 key n").toEqual({
+        legends: ["n", "N", "n", "N"],
+        x: 8,
+      });
+
+      // Row 5: split has two keys with gap in middle
+      expect(result.row5.length, "row5 length").toBe(2);
+      expect(result.row5[0], "row5 left").toEqual({
+        legends: ["qwerty", "qwerty", "qwerty", "qwerty"],
+        width: 3,
+        x: 23,
+      });
+      expect(result.row5[1], "row5 right").toEqual({
+        legends: ["", "", "", ""],
+        width: 3,
+        x: 8,
+      });
     });
 
     it("converts qwertz staggered", () => {
@@ -309,86 +280,76 @@ describe("keymap converter", () => {
         showAllKeys: true,
       });
 
-      expect(result.row1, "row1").toEqual([
-        { legends: ["^", "°", "^", "°"] },
-        { legends: ["1", "!", "1", "!"] },
-        { legends: ["2", `"`, "2", `"`] },
-        { legends: ["3", "§", "3", "§"] },
-        { legends: ["4", "$", "4", "$"] },
-        { legends: ["5", "%", "5", "%"] },
-        { legends: ["6", "&", "6", "&"] },
-        { legends: ["7", "/", "7", "/"] },
-        { legends: ["8", "(", "8", "("] },
-        { legends: ["9", ")", "9", ")"] },
-        { legends: ["0", "=", "0", "="] },
-        { legends: ["ß", "?", "ß", "?"] },
-        { legends: ["´", "`", "´", "`"] },
-        { legends: ["BS", "BS", "BS", "BS"], width: 2 },
-      ]);
+      // Test only keys added when showAllKeys is true (not covered by basic staggered test)
 
-      expect(result.row2, "row2").toEqual([
-        { legends: ["Tab", "Tab", "Tab", "Tab"], width: 1.5 },
-        { legends: ["q", "Q", "q", "Q"] },
-        { legends: ["w", "W", "w", "W"] },
-        { legends: ["e", "E", "e", "E"] },
-        { legends: ["r", "R", "r", "R"] },
-        { legends: ["t", "T", "t", "T"] },
-        { legends: ["z", "Z", "z", "Z"] },
-        { legends: ["u", "U", "u", "U"] },
-        { legends: ["i", "I", "i", "I"] },
-        { legends: ["o", "O", "o", "O"] },
-        { legends: ["p", "P", "p", "P"] },
-        { legends: ["ü", "Ü", "ü", "Ü"] },
-        { legends: ["+", "*", "+", "*"] },
-        {
-          legends: ["Enter", "Enter", "Enter", "Enter"],
-          height: 2,
-          width: 1.5,
-        },
-      ]);
+      // Row1: BS added at end
+      expect(result.row1[result.row1.length - 1], "row1 last").toEqual({
+        legends: ["BS", "BS", "BS", "BS"],
+        width: 2,
+      });
 
-      expect(result.row3, "row3").toEqual([
-        { legends: ["Caps", "Caps", "Caps", "Caps"], width: 1.75 },
-        { legends: ["a", "A", "a", "A"] },
-        { legends: ["s", "S", "s", "S"] },
-        { legends: ["d", "D", "d", "D"] },
-        { legends: ["f", "F", "f", "F"] },
-        { legends: ["g", "G", "g", "G"] },
-        { legends: ["h", "H", "h", "H"] },
-        { legends: ["j", "J", "j", "J"] },
-        { legends: ["k", "K", "k", "K"] },
-        { legends: ["l", "L", "l", "L"] },
-        { legends: ["ö", "Ö", "ö", "Ö"] },
-        { legends: ["ä", "Ä", "ä", "Ä"] },
-        { legends: ["#", "'", "#", "'"] },
-      ]);
+      // Row2: Tab added at start, Enter (with height) added at end
+      expect(result.row2[0], "row2 first").toEqual({
+        legends: ["Tab", "Tab", "Tab", "Tab"],
+        width: 1.5,
+      });
+      expect(result.row2[result.row2.length - 1], "row2 last").toEqual({
+        legends: ["Enter", "Enter", "Enter", "Enter"],
+        height: 2,
+        width: 1.5,
+      });
 
-      expect(result.row4, "row4").toEqual([
-        { legends: ["Shift", "Shift", "Shift", "Shift"], width: 1.25 },
-        { legends: ["<", ">", "<", ">"] },
-        { legends: ["y", "Y", "y", "Y"] },
-        { legends: ["x", "X", "x", "X"] },
-        { legends: ["c", "C", "c", "C"] },
-        { legends: ["v", "V", "v", "V"] },
-        { legends: ["b", "B", "b", "B"] },
-        { legends: ["n", "N", "n", "N"] },
-        { legends: ["m", "M", "m", "M"] },
-        { legends: [",", ";", ",", ";"] },
-        { legends: [".", ":", ".", ":"] },
-        { legends: ["-", "_", "-", "_"] },
-        { legends: ["Shift", "Shift", "Shift", "Shift"], width: 2.75 },
-      ]);
+      // Row3: Caps added at start
+      expect(result.row3[0], "row3 first").toEqual({
+        legends: ["Caps", "Caps", "Caps", "Caps"],
+        width: 1.75,
+      });
 
-      expect(result.row5, "row5").toEqual([
-        { legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"], width: 1.25 },
-        { legends: ["Monke", "Monke", "Monke", "Monke"], width: 1.25 },
-        { legends: ["Alt", "Alt", "Alt", "Alt"], width: 1.25 },
-        { legends: ["qwertz", "qwertz", "qwertz", "qwertz"], width: 6.25 },
-        { legends: ["Alt", "Alt", "Alt", "Alt"], width: 1.25 },
-        { legends: ["Monke", "Monke", "Monke", "Monke"], width: 1.25 },
-        { legends: ["Meta", "Meta", "Meta", "Meta"], width: 1.25 },
-        { legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"], width: 1.25 },
-      ]);
+      // Row4: Shift added at start and end
+      expect(result.row4[0], "row4 first").toEqual({
+        legends: ["Shift", "Shift", "Shift", "Shift"],
+        width: 1.25,
+      });
+      expect(result.row4[result.row4.length - 1], "row4 last").toEqual({
+        legends: ["Shift", "Shift", "Shift", "Shift"],
+        width: 2.75,
+      });
+
+      // Row5: Ctrl, Monke, Alt at start; Alt, Monke, Meta, Ctrl at end
+      expect(result.row5[0], "row5 first").toEqual({
+        legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"],
+        width: 1.25,
+      });
+      expect(result.row5[1], "row5 second").toEqual({
+        legends: ["Monke", "Monke", "Monke", "Monke"],
+        width: 1.25,
+      });
+      expect(result.row5[2], "row5 third").toEqual({
+        legends: ["Alt", "Alt", "Alt", "Alt"],
+        width: 1.25,
+      });
+      expect(result.row5[result.row5.length - 4], "row5 Alt right").toEqual({
+        legends: ["Alt", "Alt", "Alt", "Alt"],
+        width: 1.25,
+      });
+      expect(result.row5[result.row5.length - 3], "row5 Monke right").toEqual({
+        legends: ["Monke", "Monke", "Monke", "Monke"],
+        width: 1.25,
+      });
+      expect(result.row5[result.row5.length - 2], "row5 Meta").toEqual({
+        legends: ["Meta", "Meta", "Meta", "Meta"],
+        width: 1.25,
+      });
+      expect(result.row5[result.row5.length - 1], "row5 last").toEqual({
+        legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"],
+        width: 1.25,
+      });
+
+      // Also verify total counts are as expected with extra keys
+      expect(result.row1.length, "row1 length").toBe(14);
+      expect(result.row2.length, "row2 length").toBe(14);
+      expect(result.row3.length, "row3 length").toBe(13);
+      expect(result.row4.length, "row4 length").toBe(13);
     });
 
     it("converts qwertz split", () => {
@@ -398,69 +359,44 @@ describe("keymap converter", () => {
         showAllKeys: false,
       });
 
-      expect(result.row1, "row1").toEqual([
-        { legends: ["1", "!", "1", "!"] },
-        { legends: ["2", `"`, "2", `"`] },
-        { legends: ["3", "§", "3", "§"] },
-        { legends: ["4", "$", "4", "$"] },
-        { legends: ["5", "%", "5", "%"] },
-        { legends: ["6", "&", "6", "&"] },
-        { legends: ["7", "/", "7", "/"], x: 8 },
-        { legends: ["8", "(", "8", "("] },
-        { legends: ["9", ")", "9", ")"] },
-        { legends: ["0", "=", "0", "="] },
-        { legends: ["ß", "?", "ß", "?"] },
-        { legends: ["´", "`", "´", "`"] },
-      ]);
+      // Test split-specific differences from staggered (not covered by basic test)
 
-      expect(result.row2, "row2").toEqual([
-        { legends: ["q", "Q", "q", "Q"], x: 2 },
-        { legends: ["w", "W", "w", "W"] },
-        { legends: ["e", "E", "e", "E"] },
-        { legends: ["r", "R", "r", "R"] },
-        { legends: ["t", "T", "t", "T"] },
-        { legends: ["z", "Z", "z", "Z"], x: 8 },
-        { legends: ["u", "U", "u", "U"] },
-        { legends: ["i", "I", "i", "I"] },
-        { legends: ["o", "O", "o", "O"] },
-        { legends: ["p", "P", "p", "P"] },
-        { legends: ["ü", "Ü", "ü", "Ü"] },
-        { legends: ["+", "*", "+", "*"] },
-      ]);
+      // Row 1: col7 (index 6) = '7' gets x=8
+      expect(result.row1[6], "row1 key 7").toEqual({
+        legends: ["7", "/", "7", "/"],
+        x: 8,
+      });
 
-      expect(result.row3, "row3").toEqual([
-        { legends: ["a", "A", "a", "A"], x: 4 },
-        { legends: ["s", "S", "s", "S"] },
-        { legends: ["d", "D", "d", "D"] },
-        { legends: ["f", "F", "f", "F"] },
-        { legends: ["g", "G", "g", "G"] },
-        { legends: ["h", "H", "h", "H"], x: 8 },
-        { legends: ["j", "J", "j", "J"] },
-        { legends: ["k", "K", "k", "K"] },
-        { legends: ["l", "L", "l", "L"] },
-        { legends: ["ö", "Ö", "ö", "Ö"] },
-        { legends: ["ä", "Ä", "ä", "Ä"] },
-        { legends: ["#", "'", "#", "'"] },
-      ]);
+      // Row 2: col6 (index 5) = 'z' gets x=8
+      expect(result.row2[5], "row2 key z").toEqual({
+        legends: ["z", "Z", "z", "Z"],
+        x: 8,
+      });
 
-      expect(result.row4, "row4").toEqual([
-        { legends: ["<", ">", "<", ">"], x: 1 },
-        { legends: ["y", "Y", "y", "Y"] },
-        { legends: ["x", "X", "x", "X"] },
-        { legends: ["c", "C", "c", "C"] },
-        { legends: ["v", "V", "v", "V"] },
-        { legends: ["b", "B", "b", "B"], x: 8 },
-        { legends: ["n", "N", "n", "N"] },
-        { legends: ["m", "M", "m", "M"] },
-        { legends: [",", ";", ",", ";"] },
-        { legends: [".", ":", ".", ":"] },
-        { legends: ["-", "_", "-", "_"] },
-      ]);
+      // Row 3: col6 (index 5) = 'h' gets x=8
+      expect(result.row3[5], "row3 key h").toEqual({
+        legends: ["h", "H", "h", "H"],
+        x: 8,
+      });
 
-      expect(result.row5, "row5").toEqual([
-        { legends: ["qwertz", "qwertz", "qwertz", "qwertz"], width: 3, x: 23 },
-        { legends: ["", "", "", ""], width: 3, x: 8 },
-      ]);
+      // Row 4: col5 (index 5) = 'b' gets x=8
+      expect(result.row4[5], "row4 key b").toEqual({
+        legends: ["b", "B", "b", "B"],
+        x: 8,
+      });
+
+      // Row 5: split has two keys with gap in middle
+      expect(result.row5.length, "row5 length").toBe(2);
+      expect(result.row5[0], "row5 left").toEqual({
+        legends: ["qwertz", "qwertz", "qwertz", "qwertz"],
+        width: 3,
+        x: 23,
+      });
+      expect(result.row5[1], "row5 right").toEqual({
+        legends: ["", "", "", ""],
+        width: 3,
+        x: 8,
+      });
     });
   });
 });

From 08a52d3f4d6727b9f73eaf22435bcefca3e0160f Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Thu, 18 Jun 2026 16:57:40 +0200
Subject: [PATCH 10/61] matrix

---
 .../components/pages/test/keymapConverter.ts  | 104 ++++++++++++++----
 1 file changed, 83 insertions(+), 21 deletions(-)

diff --git a/frontend/src/ts/components/pages/test/keymapConverter.ts b/frontend/src/ts/components/pages/test/keymapConverter.ts
index b8b565a6cc74..6a407f7fd8d0 100644
--- a/frontend/src/ts/components/pages/test/keymapConverter.ts
+++ b/frontend/src/ts/components/pages/test/keymapConverter.ts
@@ -32,6 +32,9 @@ export function convertLayoutToKeymap(
     case "staggered":
     case "split":
       return convertStaggered(layout, options);
+    case "matrix":
+    case "split_matrix":
+      return convertMatrix(layout, options);
   }
 
   throw new Error("not supported");
@@ -59,11 +62,11 @@ function convertStaggered(
   const base = convertBase(layout, options, {
     row1: {
       x: calcGap({ col1Gap: 0, splitCol: 7 }),
-      skip: ({ col }) => col === 0,
+      skip: ({ col }) => (options.showAllKeys ? false : col === 0),
     },
     row2: {
       x: calcGap({ col1Gap: 2 }),
-      skip: ({ col }) => col === 12,
+      skip: ({ col }) => (options.showAllKeys ? false : col === 12),
       width: ({ col }) => (col === 12 ? 1.5 : undefined),
     },
     row3: { x: calcGap({ col1Gap: 4 }) },
@@ -87,9 +90,68 @@ function convertStaggered(
   return base;
 }
 
-function convertBase(
+function convertMatrix(
   layout: LayoutObject,
   options: ConvertOptions,
+): KeyboardDefinition {
+  const split = options.keymapStyle === "split_matrix";
+
+  if (split && layout.keys.row5.length === 1) {
+    layout.keys.row5.push(buildLegends([""]));
+  }
+
+  const calcGap =
+    ({ col1Gap, splitCol }: { col1Gap?: number; splitCol?: number }) =>
+    ({ col }: { col: number }) => {
+      if (col === 0) return options.showAllKeys ? undefined : col1Gap;
+      if (split && col === (splitCol ?? 5)) return 8;
+      return undefined;
+    };
+
+  const base = convertBase(
+    layout,
+    { ...options, isMatrix: true },
+    {
+      row1: {
+        skip: ({ col }) => col === 0 || col > 10,
+        x: calcGap({ splitCol: 6 }),
+      },
+      row2: {
+        skip: ({ col }) => col > 9,
+        x: calcGap({}),
+      },
+      row3: {
+        skip: ({ col }) => col > 9,
+        x: calcGap({}),
+      },
+      row4: {
+        skip: ({ col }) => col > 9,
+        x: calcGap({}),
+      },
+      row5: {
+        x: calcGap({ col1Gap: split ? 4 * 4 : 6 * 4, splitCol: 1 }),
+        width: ({ col }) => {
+          if (split) {
+            // oxlint-disable-next-line typescript/no-unsafe-return
+            return (
+              (options.showAllKeys ? { 0: 2.75, 1: 2 } : { 0: 3, 1: 3 })[col] ??
+              undefined
+            );
+          }
+          return options.showAllKeys ? 4.75 : 4;
+        },
+        legend: ({ col }) =>
+          col === 0 ? buildLegends([options.displayName]) : undefined,
+      },
+    },
+  );
+
+  return base;
+}
+
+function convertBase(
+  layout: LayoutObject,
+  options: ConvertOptions & { isMatrix?: boolean },
   cols?: Partial<
     Record<
       keyof LayoutObject["keys"],
@@ -109,10 +171,7 @@ function convertBase(
       row,
       keys
         .map((key, colNum) => {
-          if (
-            !options.showAllKeys &&
-            (cols?.[row]?.skip?.({ col: colNum }) ?? false)
-          ) {
+          if (cols?.[row]?.skip?.({ col: colNum }) ?? false) {
             return undefined;
           }
 
@@ -134,71 +193,74 @@ function convertBase(
     ]),
   ) as KeyboardDefinition;
 
+  const matrixWidth = (width: number): number | undefined =>
+    options.isMatrix ? undefined : width;
+
   if (options.showAllKeys) {
     result.row1.push({
       legends: buildLegends(["BS"]),
-      width: 2,
+      width: matrixWidth(2),
     });
     result.row2.unshift({
       legends: buildLegends(["Tab"]),
-      width: 1.5,
+      width: matrixWidth(1.5),
     });
     result.row3.unshift({
       legends: buildLegends(["Caps"]),
-      width: 1.75,
+      width: matrixWidth(1.75),
     });
     if (isIso) {
       result.row2.push({
         legends: buildLegends(["Enter"]),
-        width: 1.5,
+        width: matrixWidth(1.5),
         height: 2,
       });
     } else {
       result.row3.push({
         legends: buildLegends(["Enter"]),
-        width: 2.25,
+        width: matrixWidth(2.25),
       });
     }
     result.row4.unshift({
       legends: buildLegends(["Shift"]),
-      width: isIso ? 1.25 : 2.25,
+      width: matrixWidth(isIso ? 1.25 : 2.25),
     });
     result.row4.push({
       legends: buildLegends(["Shift"]),
-      width: 2.75,
+      width: matrixWidth(2.75),
     });
 
     result.row5.unshift(
       {
         legends: buildLegends(["Ctrl"]),
-        width: 1.25,
+        width: matrixWidth(1.25),
       },
       {
         legends: buildLegends(["Monke"]),
-        width: 1.25,
+        width: matrixWidth(1.25),
       },
       {
         legends: buildLegends(["Alt"]),
-        width: 1.25,
+        width: matrixWidth(1.25),
       },
     );
 
     result.row5.push(
       {
         legends: buildLegends(["Alt"]),
-        width: 1.25,
+        width: matrixWidth(1.25),
       },
       {
         legends: buildLegends(["Monke"]),
-        width: 1.25,
+        width: matrixWidth(1.25),
       },
       {
         legends: buildLegends(["Meta"]),
-        width: 1.25,
+        width: matrixWidth(1.25),
       },
       {
         legends: buildLegends(["Ctrl"]),
-        width: 1.25,
+        width: matrixWidth(1.25),
       },
     );
   }

From 6e9ae083925a27c8cb140157c4fcde767364c3d5 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Thu, 18 Jun 2026 22:47:37 +0200
Subject: [PATCH 11/61] fix reactivity, matrix tests

---
 .../pages/test/keymapConverter.spec.ts        | 186 ++++++++++++++++++
 .../src/ts/components/pages/test/Keymap.tsx   |  17 +-
 2 files changed, 197 insertions(+), 6 deletions(-)

diff --git a/frontend/__tests__/components/pages/test/keymapConverter.spec.ts b/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
index 4579ad3883d5..a185b7e23b28 100644
--- a/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
+++ b/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
@@ -399,4 +399,190 @@ describe("keymap converter", () => {
       });
     });
   });
+
+  it("converts qwerty matrix", () => {
+    const result = convertLayoutToKeymap(qwertyLayout as LayoutObject, {
+      displayName: "qwerty",
+      keymapStyle: "matrix",
+      showAllKeys: false,
+    });
+
+    expect(result.row1, "row1").toEqual([
+      { legends: ["1", "!", "1", "!"] },
+      { legends: ["2", "@", "2", "@"] },
+      { legends: ["3", "#", "3", "#"] },
+      { legends: ["4", "$", "4", "$"] },
+      { legends: ["5", "%", "5", "%"] },
+      { legends: ["6", "^", "6", "^"] },
+      { legends: ["7", "&", "7", "&"] },
+      { legends: ["8", "*", "8", "*"] },
+      { legends: ["9", "(", "9", "("] },
+      { legends: ["0", ")", "0", ")"] },
+    ]);
+
+    expect(result.row2, "row2").toEqual([
+      { legends: ["q", "Q", "q", "Q"] },
+      { legends: ["w", "W", "w", "W"] },
+      { legends: ["e", "E", "e", "E"] },
+      { legends: ["r", "R", "r", "R"] },
+      { legends: ["t", "T", "t", "T"] },
+      { legends: ["y", "Y", "y", "Y"] },
+      { legends: ["u", "U", "u", "U"] },
+      { legends: ["i", "I", "i", "I"] },
+      { legends: ["o", "O", "o", "O"] },
+      { legends: ["p", "P", "p", "P"] },
+    ]);
+
+    expect(result.row3, "row3").toEqual([
+      { legends: ["a", "A", "a", "A"] },
+      { legends: ["s", "S", "s", "S"] },
+      { legends: ["d", "D", "d", "D"] },
+      { legends: ["f", "F", "f", "F"] },
+      { legends: ["g", "G", "g", "G"] },
+      { legends: ["h", "H", "h", "H"] },
+      { legends: ["j", "J", "j", "J"] },
+      { legends: ["k", "K", "k", "K"] },
+      { legends: ["l", "L", "l", "L"] },
+      { legends: [";", ":", ";", ":"] },
+    ]);
+
+    expect(result.row4, "row4").toEqual([
+      { legends: ["z", "Z", "z", "Z"] },
+      { legends: ["x", "X", "x", "X"] },
+      { legends: ["c", "C", "c", "C"] },
+      { legends: ["v", "V", "v", "V"] },
+      { legends: ["b", "B", "b", "B"] },
+      { legends: ["n", "N", "n", "N"] },
+      { legends: ["m", "M", "m", "M"] },
+      { legends: [",", "<", ",", "<"] },
+      { legends: [".", ">", ".", ">"] },
+      { legends: ["/", "?", "/", "?"] },
+    ]);
+
+    expect(result.row5, "row5").toEqual([
+      { legends: ["qwerty", "qwerty", "qwerty", "qwerty"], width: 4, x: 24 },
+    ]);
+  });
+
+  it.skip("converts qwerty matrix all keys", () => {
+    const result = convertLayoutToKeymap(qwertyLayout as LayoutObject, {
+      displayName: "qwerty",
+      keymapStyle: "matrix",
+      showAllKeys: true,
+    });
+
+    // Test only keys added when showAllKeys is true (not covered by basic staggered test)
+    // Row1: BS added at end
+    expect(result.row1[result.row1.length - 1], "row1 last").toEqual({
+      legends: ["BS", "BS", "BS", "BS"],
+      width: 2,
+    });
+
+    // Row2: Tab added at start
+    expect(result.row2[0], "row2 first").toEqual({
+      legends: ["Tab", "Tab", "Tab", "Tab"],
+      width: 1.5,
+    });
+
+    // Row3: Caps added at start, Enter added at end
+    expect(result.row3[0], "row3 first").toEqual({
+      legends: ["Caps", "Caps", "Caps", "Caps"],
+      width: 1.75,
+    });
+    expect(result.row3[result.row3.length - 1], "row3 last").toEqual({
+      legends: ["Enter", "Enter", "Enter", "Enter"],
+      width: 2.25,
+    });
+
+    // Row4: Shift added at start and end
+    expect(result.row4[0], "row4 first").toEqual({
+      legends: ["Shift", "Shift", "Shift", "Shift"],
+      width: 2.25,
+    });
+    expect(result.row4[result.row4.length - 1], "row4 last").toEqual({
+      legends: ["Shift", "Shift", "Shift", "Shift"],
+      width: 2.75,
+    });
+
+    // Row5: Ctrl, Monke, Alt at start; Alt, Monke, Meta, Ctrl at end
+    expect(result.row5[0], "row5 first").toEqual({
+      legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"],
+      width: 1.25,
+    });
+    expect(result.row5[1], "row5 second").toEqual({
+      legends: ["Monke", "Monke", "Monke", "Monke"],
+      width: 1.25,
+    });
+    expect(result.row5[2], "row5 third").toEqual({
+      legends: ["Alt", "Alt", "Alt", "Alt"],
+      width: 1.25,
+    });
+    expect(result.row5[result.row5.length - 4], "row5 Alt right").toEqual({
+      legends: ["Alt", "Alt", "Alt", "Alt"],
+      width: 1.25,
+    });
+    expect(result.row5[result.row5.length - 3], "row5 Monke right").toEqual({
+      legends: ["Monke", "Monke", "Monke", "Monke"],
+      width: 1.25,
+    });
+    expect(result.row5[result.row5.length - 2], "row5 Meta").toEqual({
+      legends: ["Meta", "Meta", "Meta", "Meta"],
+      width: 1.25,
+    });
+    expect(result.row5[result.row5.length - 1], "row5 last").toEqual({
+      legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"],
+      width: 1.25,
+    });
+
+    // Also verify total counts are as expected with extra keys
+    expect(result.row1.length, "row1 length").toBe(14);
+    expect(result.row2.length, "row2 length").toBe(14);
+    expect(result.row3.length, "row3 length").toBe(13);
+    expect(result.row4.length, "row4 length").toBe(12);
+  });
+
+  it("converts qwerty split  matrix", () => {
+    const result = convertLayoutToKeymap(qwertyLayout as LayoutObject, {
+      displayName: "qwerty",
+      keymapStyle: "split_matrix",
+      showAllKeys: false,
+    });
+
+    // Row 1: col6 (index 5) = '6' gets x=8
+    expect(result.row1[5], "row1 key 7").toEqual({
+      legends: ["6", "^", "6", "^"],
+      x: 8,
+    });
+
+    // Row 2: col6 (index 5) = 'y' gets x=8
+    expect(result.row2[5], "row2 key y").toEqual({
+      legends: ["y", "Y", "y", "Y"],
+      x: 8,
+    });
+
+    // Row 3: col6 (index 5) = 'h' gets x=8
+    expect(result.row3[5], "row3 key h").toEqual({
+      legends: ["h", "H", "h", "H"],
+      x: 8,
+    });
+
+    // Row 4: col6 (index 5) = 'n' gets x=8
+    expect(result.row4[5], "row4 key n").toEqual({
+      legends: ["n", "N", "n", "N"],
+      x: 8,
+    });
+
+    // Row 5: split has two keys with gap in middle
+    expect(result.row5.length, "row5 length").toBe(2);
+    expect(result.row5[0], "row5 left").toEqual({
+      legends: ["qwerty", "qwerty", "qwerty", "qwerty"],
+      width: 3,
+      x: 16,
+    });
+    expect(result.row5[1], "row5 right").toEqual({
+      legends: ["", "", "", ""],
+      width: 3,
+      x: 8,
+    });
+  });
 });
diff --git a/frontend/src/ts/components/pages/test/Keymap.tsx b/frontend/src/ts/components/pages/test/Keymap.tsx
index 06075de981dd..ec9faa3f7dcb 100644
--- a/frontend/src/ts/components/pages/test/Keymap.tsx
+++ b/frontend/src/ts/components/pages/test/Keymap.tsx
@@ -42,14 +42,19 @@ function Keyboard(props: { displayName: string; layoutData: LayoutObject }) {
         }
         return 0;
       }
+      default:
+        return 0;
     }
   });
 
-  const showFirstRow =
-    getConfig.keymapLayoutStyle === "full" ||
-    getConfig.keymapLayoutStyle === "minimal_numrow" ||
-    (getConfig.keymapLayoutStyle === "minimal" &&
-      keymapLayoutObject()?.keymapShowTopRow);
+  const showFirstRow = createMemo(
+    () =>
+      (getConfig.keymapLayoutStyle === "full" ||
+        getConfig.keymapLayoutStyle === "minimal_numrow" ||
+        (getConfig.keymapLayoutStyle === "minimal_layout" &&
+          props.layoutData.keymapShowTopRow)) ??
+      false,
+  );
 
   // Convert layout to KeyboardDefinition format
   const keyboardDef = createMemo(() =>
@@ -66,7 +71,7 @@ function Keyboard(props: { displayName: string; layoutData: LayoutObject }) {
         <KeyboardDefinitionRenderer
           keyboardDef={keyboardDef()}
           layer={layer()}
-          showFirstRow={showFirstRow ?? false}
+          showFirstRow={showFirstRow()}
         />
       </Show>
     </div>

From dab0856fec95e15a7b0505c288ee528c9e4cef40 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Fri, 19 Jun 2026 10:29:24 +0200
Subject: [PATCH 12/61] wip

---
 .../pages/test/keymapConverter.spec.ts        |  92 +++---
 .../ts/commandline/commandline-metadata.ts    |   6 +-
 .../src/ts/components/pages/test/Keymap.tsx   |   2 +-
 .../components/pages/test/keymapConverter.ts  | 269 ++++++++++--------
 4 files changed, 197 insertions(+), 172 deletions(-)

diff --git a/frontend/__tests__/components/pages/test/keymapConverter.spec.ts b/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
index a185b7e23b28..595d8577ff46 100644
--- a/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
+++ b/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
@@ -73,7 +73,7 @@ describe("keymap converter", () => {
       ]);
 
       expect(result.row5, "row5").toEqual([
-        { legends: ["qwerty", "qwerty", "qwerty", "qwerty"], width: 6, x: 22 },
+        { legends: ["qwerty", "qwerty", "qwerty", "qwerty"], width: 6, x: 14 },
       ]);
     });
 
@@ -167,25 +167,25 @@ describe("keymap converter", () => {
       // Row 1: col7 (index 6) = '7' gets x=8
       expect(result.row1[6], "row1 key 7").toEqual({
         legends: ["7", "&", "7", "&"],
-        x: 8,
+        x: 4,
       });
 
       // Row 2: col6 (index 5) = 'y' gets x=8
       expect(result.row2[5], "row2 key y").toEqual({
         legends: ["y", "Y", "y", "Y"],
-        x: 8,
+        x: 4,
       });
 
       // Row 3: col6 (index 5) = 'h' gets x=8
       expect(result.row3[5], "row3 key h").toEqual({
         legends: ["h", "H", "h", "H"],
-        x: 8,
+        x: 4,
       });
 
       // Row 4: col6 (index 5) = 'n' gets x=8
       expect(result.row4[5], "row4 key n").toEqual({
         legends: ["n", "N", "n", "N"],
-        x: 8,
+        x: 4,
       });
 
       // Row 5: split has two keys with gap in middle
@@ -193,12 +193,12 @@ describe("keymap converter", () => {
       expect(result.row5[0], "row5 left").toEqual({
         legends: ["qwerty", "qwerty", "qwerty", "qwerty"],
         width: 3,
-        x: 23,
+        x: 14,
       });
       expect(result.row5[1], "row5 right").toEqual({
         legends: ["", "", "", ""],
         width: 3,
-        x: 8,
+        x: 4,
       });
     });
 
@@ -269,7 +269,7 @@ describe("keymap converter", () => {
       ]);
 
       expect(result.row5, "row5").toEqual([
-        { legends: ["qwertz", "qwertz", "qwertz", "qwertz"], width: 6, x: 22 },
+        { legends: ["qwertz", "qwertz", "qwertz", "qwertz"], width: 6, x: 14 },
       ]);
     });
 
@@ -364,25 +364,25 @@ describe("keymap converter", () => {
       // Row 1: col7 (index 6) = '7' gets x=8
       expect(result.row1[6], "row1 key 7").toEqual({
         legends: ["7", "/", "7", "/"],
-        x: 8,
+        x: 4,
       });
 
       // Row 2: col6 (index 5) = 'z' gets x=8
       expect(result.row2[5], "row2 key z").toEqual({
         legends: ["z", "Z", "z", "Z"],
-        x: 8,
+        x: 4,
       });
 
       // Row 3: col6 (index 5) = 'h' gets x=8
       expect(result.row3[5], "row3 key h").toEqual({
         legends: ["h", "H", "h", "H"],
-        x: 8,
+        x: 4,
       });
 
       // Row 4: col5 (index 5) = 'b' gets x=8
       expect(result.row4[5], "row4 key b").toEqual({
         legends: ["b", "B", "b", "B"],
-        x: 8,
+        x: 4,
       });
 
       // Row 5: split has two keys with gap in middle
@@ -390,12 +390,12 @@ describe("keymap converter", () => {
       expect(result.row5[0], "row5 left").toEqual({
         legends: ["qwertz", "qwertz", "qwertz", "qwertz"],
         width: 3,
-        x: 23,
+        x: 14,
       });
       expect(result.row5[1], "row5 right").toEqual({
         legends: ["", "", "", ""],
         width: 3,
-        x: 8,
+        x: 4,
       });
     });
   });
@@ -460,84 +460,80 @@ describe("keymap converter", () => {
     ]);
 
     expect(result.row5, "row5").toEqual([
-      { legends: ["qwerty", "qwerty", "qwerty", "qwerty"], width: 4, x: 24 },
+      { legends: ["qwerty", "qwerty", "qwerty", "qwerty"], width: 4, x: 12 },
     ]);
   });
 
-  it.skip("converts qwerty matrix all keys", () => {
+  it("converts qwerty matrix all keys", () => {
     const result = convertLayoutToKeymap(qwertyLayout as LayoutObject, {
       displayName: "qwerty",
       keymapStyle: "matrix",
       showAllKeys: true,
     });
 
-    // Test only keys added when showAllKeys is true (not covered by basic staggered test)
+    // Test only keys added when showAllKeys is true (not covered by basic matrix test)
+    //Row1: starting with `
+    expect(result.row1[0], "row1 first").toEqual({
+      legends: ["`", "~", "`", "~"],
+    });
+
     // Row1: BS added at end
     expect(result.row1[result.row1.length - 1], "row1 last").toEqual({
       legends: ["BS", "BS", "BS", "BS"],
-      width: 2,
     });
 
     // Row2: Tab added at start
     expect(result.row2[0], "row2 first").toEqual({
       legends: ["Tab", "Tab", "Tab", "Tab"],
-      width: 1.5,
     });
 
-    // Row3: Caps added at start, Enter added at end
+    // Row2: Del added at end
+    expect(result.row2[result.row2.length - 1], "row2 last").toEqual({
+      legends: ["Del", "Del", "Del", "Del"],
+    });
+
+    // Row3: Esc added at start
     expect(result.row3[0], "row3 first").toEqual({
-      legends: ["Caps", "Caps", "Caps", "Caps"],
-      width: 1.75,
+      legends: ["Esc", "Esc", "Esc", "Esc"],
     });
+
+    // Row3: ends with '
     expect(result.row3[result.row3.length - 1], "row3 last").toEqual({
-      legends: ["Enter", "Enter", "Enter", "Enter"],
-      width: 2.25,
+      legends: ["'", '"', "'", '"'],
     });
 
     // Row4: Shift added at start and end
     expect(result.row4[0], "row4 first").toEqual({
       legends: ["Shift", "Shift", "Shift", "Shift"],
-      width: 2.25,
     });
     expect(result.row4[result.row4.length - 1], "row4 last").toEqual({
-      legends: ["Shift", "Shift", "Shift", "Shift"],
-      width: 2.75,
+      legends: ["Enter", "Enter", "Enter", "Enter"],
     });
 
-    // Row5: Ctrl, Monke, Alt at start; Alt, Monke, Meta, Ctrl at end
+    // Row5: Ctrl, Monke, Alt at start; Alt,  Meta, Ctrl at end
     expect(result.row5[0], "row5 first").toEqual({
       legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"],
-      width: 1.25,
     });
     expect(result.row5[1], "row5 second").toEqual({
       legends: ["Monke", "Monke", "Monke", "Monke"],
-      width: 1.25,
     });
     expect(result.row5[2], "row5 third").toEqual({
       legends: ["Alt", "Alt", "Alt", "Alt"],
-      width: 1.25,
     });
-    expect(result.row5[result.row5.length - 4], "row5 Alt right").toEqual({
+    expect(result.row5[result.row5.length - 3], "row5 Alt right").toEqual({
       legends: ["Alt", "Alt", "Alt", "Alt"],
-      width: 1.25,
-    });
-    expect(result.row5[result.row5.length - 3], "row5 Monke right").toEqual({
-      legends: ["Monke", "Monke", "Monke", "Monke"],
-      width: 1.25,
     });
     expect(result.row5[result.row5.length - 2], "row5 Meta").toEqual({
       legends: ["Meta", "Meta", "Meta", "Meta"],
-      width: 1.25,
     });
     expect(result.row5[result.row5.length - 1], "row5 last").toEqual({
       legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"],
-      width: 1.25,
     });
 
     // Also verify total counts are as expected with extra keys
-    expect(result.row1.length, "row1 length").toBe(14);
-    expect(result.row2.length, "row2 length").toBe(14);
-    expect(result.row3.length, "row3 length").toBe(13);
+    expect(result.row1.length, "row1 length").toBe(12);
+    expect(result.row2.length, "row2 length").toBe(12);
+    expect(result.row3.length, "row3 length").toBe(12);
     expect(result.row4.length, "row4 length").toBe(12);
   });
 
@@ -551,25 +547,25 @@ describe("keymap converter", () => {
     // Row 1: col6 (index 5) = '6' gets x=8
     expect(result.row1[5], "row1 key 7").toEqual({
       legends: ["6", "^", "6", "^"],
-      x: 8,
+      x: 4,
     });
 
     // Row 2: col6 (index 5) = 'y' gets x=8
     expect(result.row2[5], "row2 key y").toEqual({
       legends: ["y", "Y", "y", "Y"],
-      x: 8,
+      x: 4,
     });
 
     // Row 3: col6 (index 5) = 'h' gets x=8
     expect(result.row3[5], "row3 key h").toEqual({
       legends: ["h", "H", "h", "H"],
-      x: 8,
+      x: 4,
     });
 
     // Row 4: col6 (index 5) = 'n' gets x=8
     expect(result.row4[5], "row4 key n").toEqual({
       legends: ["n", "N", "n", "N"],
-      x: 8,
+      x: 4,
     });
 
     // Row 5: split has two keys with gap in middle
@@ -577,12 +573,12 @@ describe("keymap converter", () => {
     expect(result.row5[0], "row5 left").toEqual({
       legends: ["qwerty", "qwerty", "qwerty", "qwerty"],
       width: 3,
-      x: 16,
+      x: 8,
     });
     expect(result.row5[1], "row5 right").toEqual({
       legends: ["", "", "", ""],
       width: 3,
-      x: 8,
+      x: 4,
     });
   });
 });
diff --git a/frontend/src/ts/commandline/commandline-metadata.ts b/frontend/src/ts/commandline/commandline-metadata.ts
index 6a2b8ce83edc..9f36857e9b5a 100644
--- a/frontend/src/ts/commandline/commandline-metadata.ts
+++ b/frontend/src/ts/commandline/commandline-metadata.ts
@@ -1,7 +1,10 @@
 import * as ConfigSchemas from "@monkeytype/schemas/configs";
 import * as SoundController from "../controllers/sound-controller";
 import * as TestLogic from "../test/test-logic";
-import { getLanguageDisplayString } from "../utils/strings";
+import {
+  getLanguageDisplayString,
+  replaceUnderscoresWithSpaces,
+} from "../utils/strings";
 
 import { areUnsortedArraysEqual } from "../utils/arrays";
 import { Config } from "../config/store";
@@ -667,6 +670,7 @@ export const commandlineConfigMetadata: CommandlineConfigMetadataObject = {
   keymapLayoutStyle: {
     subgroup: {
       options: "fromSchema",
+      display: replaceUnderscoresWithSpaces,
     },
     alias: "keyboard",
   },
diff --git a/frontend/src/ts/components/pages/test/Keymap.tsx b/frontend/src/ts/components/pages/test/Keymap.tsx
index ec9faa3f7dcb..d05d5ba69fa7 100644
--- a/frontend/src/ts/components/pages/test/Keymap.tsx
+++ b/frontend/src/ts/components/pages/test/Keymap.tsx
@@ -112,7 +112,7 @@ function Key(
       style={{
         height: `${(props.height ?? 1) * 2}rem`,
         width: `${(props.width ?? 1) * 2}rem`,
-        "margin-left": `${(props.x ?? 0) * 0.25}rem`,
+        "margin-left": `${(props.x ?? 0) * 0.5}rem`,
       }}
     >
       {props.legends[props.layer]}
diff --git a/frontend/src/ts/components/pages/test/keymapConverter.ts b/frontend/src/ts/components/pages/test/keymapConverter.ts
index 6a407f7fd8d0..0cb30d439e16 100644
--- a/frontend/src/ts/components/pages/test/keymapConverter.ts
+++ b/frontend/src/ts/components/pages/test/keymapConverter.ts
@@ -4,8 +4,11 @@ import { typedEntries } from "../../../utils/misc";
 
 export type KeyDefinition = {
   legends: KeyLegends;
+  /** width in u  */
   width?: number;
+  /** height in u  */
   height?: number;
+  /** x-offset in 1/4 u  */
   x?: number;
 };
 export type KeyboardDefinition = Record<
@@ -44,10 +47,10 @@ function convertStaggered(
   layout: LayoutObject,
   options: ConvertOptions,
 ): KeyboardDefinition {
-  const split = options.keymapStyle === "split";
+  const isSplit = options.keymapStyle === "split";
   const isIso = layout.type === "iso";
 
-  if (split && layout.keys.row5.length === 1) {
+  if (isSplit && layout.keys.row5.length === 1) {
     layout.keys.row5.push(buildLegends([""]));
   }
 
@@ -55,11 +58,11 @@ function convertStaggered(
     ({ col1Gap, splitCol }: { col1Gap: number; splitCol?: number }) =>
     ({ col }: { col: number }) => {
       if (col === 0) return options.showAllKeys ? undefined : col1Gap;
-      if (split && col === (splitCol ?? 5)) return 8;
+      if (isSplit && col === (splitCol ?? 5)) return 4;
       return undefined;
     };
 
-  const base = convertBase(layout, options, {
+  const result = convertBase(layout, options, {
     row1: {
       x: calcGap({ col1Gap: 0, splitCol: 7 }),
       skip: ({ col }) => (options.showAllKeys ? false : col === 0),
@@ -72,11 +75,11 @@ function convertStaggered(
     row3: { x: calcGap({ col1Gap: 4 }) },
     row4: { x: calcGap({ col1Gap: isIso ? 1 : 6 }) },
     row5: {
-      x: calcGap({ col1Gap: split ? 3 + 5 * 4 : 22, splitCol: 1 }),
+      x: calcGap({ col1Gap: 6 + 2 * 4, splitCol: 1 }),
       width: ({ col }) => {
-        if (split) {
+        if (isSplit) {
           return (
-            (options.showAllKeys ? { 0: 3.25, 1: 3 } : { 0: 3, 1: 3 })[col] ??
+            (options.showAllKeys ? { 0: 3.5, 1: 3 } : { 0: 3, 1: 3 })[col] ??
             undefined
           );
         }
@@ -87,16 +90,88 @@ function convertStaggered(
     },
   });
 
-  return base;
+  if (!options.showAllKeys) return result;
+
+  //extra keys
+  if (options.showAllKeys) {
+    result.row1.push({
+      legends: buildLegends(["BS"]),
+      width: 2,
+    });
+    result.row2.unshift({
+      legends: buildLegends(["Tab"]),
+      width: 1.5,
+    });
+    result.row3.unshift({
+      legends: buildLegends(["Caps"]),
+      width: 1.75,
+    });
+    if (isIso) {
+      result.row2.push({
+        legends: buildLegends(["Enter"]),
+        width: 1.5,
+        height: 2,
+      });
+    } else {
+      result.row3.push({
+        legends: buildLegends(["Enter"]),
+        width: 2.25,
+      });
+    }
+    result.row4.unshift({
+      legends: buildLegends(["Shift"]),
+      width: isIso ? 1.25 : 2.25,
+    });
+    result.row4.push({
+      legends: buildLegends(["Shift"]),
+      width: 2.75,
+    });
+
+    result.row5.unshift(
+      {
+        legends: buildLegends(["Ctrl"]),
+        width: 1.25,
+      },
+      {
+        legends: buildLegends(["Monke"]),
+        width: 1.25,
+      },
+      {
+        legends: buildLegends(["Alt"]),
+        width: 1.25,
+      },
+    );
+
+    result.row5.push(
+      {
+        legends: buildLegends(["Alt"]),
+        width: 1.25,
+      },
+      {
+        legends: buildLegends(["Monke"]),
+        width: 1.25,
+      },
+      {
+        legends: buildLegends(["Meta"]),
+        width: 1.25,
+      },
+      {
+        legends: buildLegends(["Ctrl"]),
+        width: 1.25,
+      },
+    );
+  }
+
+  return result;
 }
 
 function convertMatrix(
   layout: LayoutObject,
   options: ConvertOptions,
 ): KeyboardDefinition {
-  const split = options.keymapStyle === "split_matrix";
+  const isSplit = options.keymapStyle === "split_matrix";
 
-  if (split && layout.keys.row5.length === 1) {
+  if (isSplit && layout.keys.row5.length === 1) {
     layout.keys.row5.push(buildLegends([""]));
   }
 
@@ -104,54 +179,77 @@ function convertMatrix(
     ({ col1Gap, splitCol }: { col1Gap?: number; splitCol?: number }) =>
     ({ col }: { col: number }) => {
       if (col === 0) return options.showAllKeys ? undefined : col1Gap;
-      if (split && col === (splitCol ?? 5)) return 8;
+      if (isSplit && col === (splitCol ?? 5)) return 4;
       return undefined;
     };
 
-  const base = convertBase(
-    layout,
-    { ...options, isMatrix: true },
-    {
-      row1: {
-        skip: ({ col }) => col === 0 || col > 10,
-        x: calcGap({ splitCol: 6 }),
-      },
-      row2: {
-        skip: ({ col }) => col > 9,
-        x: calcGap({}),
-      },
-      row3: {
-        skip: ({ col }) => col > 9,
-        x: calcGap({}),
-      },
-      row4: {
-        skip: ({ col }) => col > 9,
-        x: calcGap({}),
-      },
-      row5: {
-        x: calcGap({ col1Gap: split ? 4 * 4 : 6 * 4, splitCol: 1 }),
-        width: ({ col }) => {
-          if (split) {
-            // oxlint-disable-next-line typescript/no-unsafe-return
-            return (
-              (options.showAllKeys ? { 0: 2.75, 1: 2 } : { 0: 3, 1: 3 })[col] ??
-              undefined
-            );
-          }
-          return options.showAllKeys ? 4.75 : 4;
-        },
-        legend: ({ col }) =>
-          col === 0 ? buildLegends([options.displayName]) : undefined,
-      },
+  const result = convertBase(layout, options, {
+    row1: {
+      skip: ({ col }) => (!options.showAllKeys && col === 0) || col > 10,
+      x: calcGap({ splitCol: 6 }),
+    },
+    row2: {
+      skip: ({ col }) => col > 9,
+      x: calcGap({}),
+    },
+    row3: {
+      skip: ({ col }) => col > (options.showAllKeys ? 10 : 9),
+      x: calcGap({}),
+    },
+    row4: {
+      skip: ({ col }) => col > 9,
+      x: calcGap({}),
     },
-  );
+    row5: {
+      x: calcGap({ col1Gap: isSplit ? 2 * 4 : 3 * 4, splitCol: 1 }),
+      width: () => (isSplit ? 3 : options.showAllKeys ? 6 : 4),
+      legend: ({ col }) =>
+        col === 0 ? buildLegends([options.displayName]) : undefined,
+    },
+  });
 
-  return base;
+  //extra keys
+  if (options.showAllKeys) {
+    result.row1.push({
+      legends: buildLegends(["BS"]),
+    });
+
+    result.row2.unshift({
+      legends: buildLegends(["Tab"]),
+    });
+    result.row2.push({
+      legends: buildLegends(["Del"]),
+    });
+
+    result.row3.unshift({
+      legends: buildLegends(["Esc"]),
+    });
+
+    result.row4.unshift({
+      legends: buildLegends(["Shift"]),
+    });
+    result.row4.push({
+      legends: buildLegends(["Enter"]),
+    });
+
+    result.row5.unshift(
+      { legends: buildLegends(["Ctrl"]) },
+      { legends: buildLegends(["Monke"]) },
+      { legends: buildLegends(["Alt"]) },
+    );
+
+    result.row5.push(
+      { legends: buildLegends(["Alt"]) },
+      { legends: buildLegends(["Meta"]) },
+      { legends: buildLegends(["Ctrl"]) },
+    );
+  }
+  return result;
 }
 
 function convertBase(
   layout: LayoutObject,
-  options: ConvertOptions & { isMatrix?: boolean },
+  options: ConvertOptions,
   cols?: Partial<
     Record<
       keyof LayoutObject["keys"],
@@ -165,7 +263,6 @@ function convertBase(
     >
   >,
 ): KeyboardDefinition {
-  const isIso = layout.type === "iso";
   const result = Object.fromEntries(
     typedEntries(layout.keys).map(([row, keys]) => [
       row,
@@ -193,78 +290,6 @@ function convertBase(
     ]),
   ) as KeyboardDefinition;
 
-  const matrixWidth = (width: number): number | undefined =>
-    options.isMatrix ? undefined : width;
-
-  if (options.showAllKeys) {
-    result.row1.push({
-      legends: buildLegends(["BS"]),
-      width: matrixWidth(2),
-    });
-    result.row2.unshift({
-      legends: buildLegends(["Tab"]),
-      width: matrixWidth(1.5),
-    });
-    result.row3.unshift({
-      legends: buildLegends(["Caps"]),
-      width: matrixWidth(1.75),
-    });
-    if (isIso) {
-      result.row2.push({
-        legends: buildLegends(["Enter"]),
-        width: matrixWidth(1.5),
-        height: 2,
-      });
-    } else {
-      result.row3.push({
-        legends: buildLegends(["Enter"]),
-        width: matrixWidth(2.25),
-      });
-    }
-    result.row4.unshift({
-      legends: buildLegends(["Shift"]),
-      width: matrixWidth(isIso ? 1.25 : 2.25),
-    });
-    result.row4.push({
-      legends: buildLegends(["Shift"]),
-      width: matrixWidth(2.75),
-    });
-
-    result.row5.unshift(
-      {
-        legends: buildLegends(["Ctrl"]),
-        width: matrixWidth(1.25),
-      },
-      {
-        legends: buildLegends(["Monke"]),
-        width: matrixWidth(1.25),
-      },
-      {
-        legends: buildLegends(["Alt"]),
-        width: matrixWidth(1.25),
-      },
-    );
-
-    result.row5.push(
-      {
-        legends: buildLegends(["Alt"]),
-        width: matrixWidth(1.25),
-      },
-      {
-        legends: buildLegends(["Monke"]),
-        width: matrixWidth(1.25),
-      },
-      {
-        legends: buildLegends(["Meta"]),
-        width: matrixWidth(1.25),
-      },
-      {
-        legends: buildLegends(["Ctrl"]),
-        width: matrixWidth(1.25),
-      },
-    );
-  }
-
   return result;
 }
 

From c2b035f7ed8c2b772bccce88abeff0a6006edf9d Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Fri, 19 Jun 2026 10:36:55 +0200
Subject: [PATCH 13/61] update x-offset to be in u instead of 1/4 u

---
 .../pages/test/keymapConverter.spec.ts        | 54 +++++++++----------
 .../src/ts/components/pages/test/Keymap.tsx   |  2 +-
 .../components/pages/test/keymapConverter.ts  | 16 +++---
 3 files changed, 36 insertions(+), 36 deletions(-)

diff --git a/frontend/__tests__/components/pages/test/keymapConverter.spec.ts b/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
index 595d8577ff46..8d90d9a2ffe8 100644
--- a/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
+++ b/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
@@ -31,7 +31,7 @@ describe("keymap converter", () => {
       ]);
 
       expect(result.row2, "row2").toEqual([
-        { legends: ["q", "Q", "q", "Q"], x: 2 },
+        { legends: ["q", "Q", "q", "Q"], x: 0.5 },
         { legends: ["w", "W", "w", "W"] },
         { legends: ["e", "E", "e", "E"] },
         { legends: ["r", "R", "r", "R"] },
@@ -46,7 +46,7 @@ describe("keymap converter", () => {
       ]);
 
       expect(result.row3, "row3").toEqual([
-        { legends: ["a", "A", "a", "A"], x: 4 },
+        { legends: ["a", "A", "a", "A"], x: 1 },
         { legends: ["s", "S", "s", "S"] },
         { legends: ["d", "D", "d", "D"] },
         { legends: ["f", "F", "f", "F"] },
@@ -60,7 +60,7 @@ describe("keymap converter", () => {
       ]);
 
       expect(result.row4, "row4").toEqual([
-        { legends: ["z", "Z", "z", "Z"], x: 6 },
+        { legends: ["z", "Z", "z", "Z"], x: 1.5 },
         { legends: ["x", "X", "x", "X"] },
         { legends: ["c", "C", "c", "C"] },
         { legends: ["v", "V", "v", "V"] },
@@ -73,7 +73,7 @@ describe("keymap converter", () => {
       ]);
 
       expect(result.row5, "row5").toEqual([
-        { legends: ["qwerty", "qwerty", "qwerty", "qwerty"], width: 6, x: 14 },
+        { legends: ["qwerty", "qwerty", "qwerty", "qwerty"], width: 6, x: 3.5 },
       ]);
     });
 
@@ -167,25 +167,25 @@ describe("keymap converter", () => {
       // Row 1: col7 (index 6) = '7' gets x=8
       expect(result.row1[6], "row1 key 7").toEqual({
         legends: ["7", "&", "7", "&"],
-        x: 4,
+        x: 1,
       });
 
       // Row 2: col6 (index 5) = 'y' gets x=8
       expect(result.row2[5], "row2 key y").toEqual({
         legends: ["y", "Y", "y", "Y"],
-        x: 4,
+        x: 1,
       });
 
       // Row 3: col6 (index 5) = 'h' gets x=8
       expect(result.row3[5], "row3 key h").toEqual({
         legends: ["h", "H", "h", "H"],
-        x: 4,
+        x: 1,
       });
 
       // Row 4: col6 (index 5) = 'n' gets x=8
       expect(result.row4[5], "row4 key n").toEqual({
         legends: ["n", "N", "n", "N"],
-        x: 4,
+        x: 1,
       });
 
       // Row 5: split has two keys with gap in middle
@@ -193,12 +193,12 @@ describe("keymap converter", () => {
       expect(result.row5[0], "row5 left").toEqual({
         legends: ["qwerty", "qwerty", "qwerty", "qwerty"],
         width: 3,
-        x: 14,
+        x: 3.5,
       });
       expect(result.row5[1], "row5 right").toEqual({
         legends: ["", "", "", ""],
         width: 3,
-        x: 4,
+        x: 1,
       });
     });
 
@@ -225,7 +225,7 @@ describe("keymap converter", () => {
       ]);
 
       expect(result.row2, "row2").toEqual([
-        { legends: ["q", "Q", "q", "Q"], x: 2 },
+        { legends: ["q", "Q", "q", "Q"], x: 0.5 },
         { legends: ["w", "W", "w", "W"] },
         { legends: ["e", "E", "e", "E"] },
         { legends: ["r", "R", "r", "R"] },
@@ -240,7 +240,7 @@ describe("keymap converter", () => {
       ]);
 
       expect(result.row3, "row3").toEqual([
-        { legends: ["a", "A", "a", "A"], x: 4 },
+        { legends: ["a", "A", "a", "A"], x: 1 },
         { legends: ["s", "S", "s", "S"] },
         { legends: ["d", "D", "d", "D"] },
         { legends: ["f", "F", "f", "F"] },
@@ -255,7 +255,7 @@ describe("keymap converter", () => {
       ]);
 
       expect(result.row4, "row4").toEqual([
-        { legends: ["<", ">", "<", ">"], x: 1 },
+        { legends: ["<", ">", "<", ">"], x: 0.25 },
         { legends: ["y", "Y", "y", "Y"] },
         { legends: ["x", "X", "x", "X"] },
         { legends: ["c", "C", "c", "C"] },
@@ -269,7 +269,7 @@ describe("keymap converter", () => {
       ]);
 
       expect(result.row5, "row5").toEqual([
-        { legends: ["qwertz", "qwertz", "qwertz", "qwertz"], width: 6, x: 14 },
+        { legends: ["qwertz", "qwertz", "qwertz", "qwertz"], width: 6, x: 3.5 },
       ]);
     });
 
@@ -364,25 +364,25 @@ describe("keymap converter", () => {
       // Row 1: col7 (index 6) = '7' gets x=8
       expect(result.row1[6], "row1 key 7").toEqual({
         legends: ["7", "/", "7", "/"],
-        x: 4,
+        x: 1,
       });
 
       // Row 2: col6 (index 5) = 'z' gets x=8
       expect(result.row2[5], "row2 key z").toEqual({
         legends: ["z", "Z", "z", "Z"],
-        x: 4,
+        x: 1,
       });
 
       // Row 3: col6 (index 5) = 'h' gets x=8
       expect(result.row3[5], "row3 key h").toEqual({
         legends: ["h", "H", "h", "H"],
-        x: 4,
+        x: 1,
       });
 
       // Row 4: col5 (index 5) = 'b' gets x=8
       expect(result.row4[5], "row4 key b").toEqual({
         legends: ["b", "B", "b", "B"],
-        x: 4,
+        x: 1,
       });
 
       // Row 5: split has two keys with gap in middle
@@ -390,12 +390,12 @@ describe("keymap converter", () => {
       expect(result.row5[0], "row5 left").toEqual({
         legends: ["qwertz", "qwertz", "qwertz", "qwertz"],
         width: 3,
-        x: 14,
+        x: 3.5,
       });
       expect(result.row5[1], "row5 right").toEqual({
         legends: ["", "", "", ""],
         width: 3,
-        x: 4,
+        x: 1,
       });
     });
   });
@@ -460,7 +460,7 @@ describe("keymap converter", () => {
     ]);
 
     expect(result.row5, "row5").toEqual([
-      { legends: ["qwerty", "qwerty", "qwerty", "qwerty"], width: 4, x: 12 },
+      { legends: ["qwerty", "qwerty", "qwerty", "qwerty"], width: 4, x: 3 },
     ]);
   });
 
@@ -547,25 +547,25 @@ describe("keymap converter", () => {
     // Row 1: col6 (index 5) = '6' gets x=8
     expect(result.row1[5], "row1 key 7").toEqual({
       legends: ["6", "^", "6", "^"],
-      x: 4,
+      x: 1,
     });
 
     // Row 2: col6 (index 5) = 'y' gets x=8
     expect(result.row2[5], "row2 key y").toEqual({
       legends: ["y", "Y", "y", "Y"],
-      x: 4,
+      x: 1,
     });
 
     // Row 3: col6 (index 5) = 'h' gets x=8
     expect(result.row3[5], "row3 key h").toEqual({
       legends: ["h", "H", "h", "H"],
-      x: 4,
+      x: 1,
     });
 
     // Row 4: col6 (index 5) = 'n' gets x=8
     expect(result.row4[5], "row4 key n").toEqual({
       legends: ["n", "N", "n", "N"],
-      x: 4,
+      x: 1,
     });
 
     // Row 5: split has two keys with gap in middle
@@ -573,12 +573,12 @@ describe("keymap converter", () => {
     expect(result.row5[0], "row5 left").toEqual({
       legends: ["qwerty", "qwerty", "qwerty", "qwerty"],
       width: 3,
-      x: 8,
+      x: 2,
     });
     expect(result.row5[1], "row5 right").toEqual({
       legends: ["", "", "", ""],
       width: 3,
-      x: 4,
+      x: 1,
     });
   });
 });
diff --git a/frontend/src/ts/components/pages/test/Keymap.tsx b/frontend/src/ts/components/pages/test/Keymap.tsx
index d05d5ba69fa7..ad90d9b1f3f5 100644
--- a/frontend/src/ts/components/pages/test/Keymap.tsx
+++ b/frontend/src/ts/components/pages/test/Keymap.tsx
@@ -112,7 +112,7 @@ function Key(
       style={{
         height: `${(props.height ?? 1) * 2}rem`,
         width: `${(props.width ?? 1) * 2}rem`,
-        "margin-left": `${(props.x ?? 0) * 0.5}rem`,
+        "margin-left": `${(props.x ?? 0) * 2}rem`,
       }}
     >
       {props.legends[props.layer]}
diff --git a/frontend/src/ts/components/pages/test/keymapConverter.ts b/frontend/src/ts/components/pages/test/keymapConverter.ts
index 0cb30d439e16..a0dee9740b78 100644
--- a/frontend/src/ts/components/pages/test/keymapConverter.ts
+++ b/frontend/src/ts/components/pages/test/keymapConverter.ts
@@ -8,7 +8,7 @@ export type KeyDefinition = {
   width?: number;
   /** height in u  */
   height?: number;
-  /** x-offset in 1/4 u  */
+  /** x-offset in u  */
   x?: number;
 };
 export type KeyboardDefinition = Record<
@@ -58,7 +58,7 @@ function convertStaggered(
     ({ col1Gap, splitCol }: { col1Gap: number; splitCol?: number }) =>
     ({ col }: { col: number }) => {
       if (col === 0) return options.showAllKeys ? undefined : col1Gap;
-      if (isSplit && col === (splitCol ?? 5)) return 4;
+      if (isSplit && col === (splitCol ?? 5)) return 1;
       return undefined;
     };
 
@@ -68,14 +68,14 @@ function convertStaggered(
       skip: ({ col }) => (options.showAllKeys ? false : col === 0),
     },
     row2: {
-      x: calcGap({ col1Gap: 2 }),
+      x: calcGap({ col1Gap: 0.5 }),
       skip: ({ col }) => (options.showAllKeys ? false : col === 12),
       width: ({ col }) => (col === 12 ? 1.5 : undefined),
     },
-    row3: { x: calcGap({ col1Gap: 4 }) },
-    row4: { x: calcGap({ col1Gap: isIso ? 1 : 6 }) },
+    row3: { x: calcGap({ col1Gap: 1 }) },
+    row4: { x: calcGap({ col1Gap: isIso ? 0.25 : 1.5 }) },
     row5: {
-      x: calcGap({ col1Gap: 6 + 2 * 4, splitCol: 1 }),
+      x: calcGap({ col1Gap: 3.5, splitCol: 1 }),
       width: ({ col }) => {
         if (isSplit) {
           return (
@@ -179,7 +179,7 @@ function convertMatrix(
     ({ col1Gap, splitCol }: { col1Gap?: number; splitCol?: number }) =>
     ({ col }: { col: number }) => {
       if (col === 0) return options.showAllKeys ? undefined : col1Gap;
-      if (isSplit && col === (splitCol ?? 5)) return 4;
+      if (isSplit && col === (splitCol ?? 5)) return 1;
       return undefined;
     };
 
@@ -201,7 +201,7 @@ function convertMatrix(
       x: calcGap({}),
     },
     row5: {
-      x: calcGap({ col1Gap: isSplit ? 2 * 4 : 3 * 4, splitCol: 1 }),
+      x: calcGap({ col1Gap: isSplit ? 2 : 3, splitCol: 1 }),
       width: () => (isSplit ? 3 : options.showAllKeys ? 6 : 4),
       legend: ({ col }) =>
         col === 0 ? buildLegends([options.displayName]) : undefined,

From ed863360f20cdfeb55e21e592e3dfeade183b406 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Fri, 19 Jun 2026 11:42:58 +0200
Subject: [PATCH 14/61] highlight next key, add homing, fix layoutIndicator

---
 .../pages/test/keymapConverter.spec.ts        | 48 +++++++++++++------
 .../src/ts/components/pages/test/Keymap.tsx   | 41 ++++++++++++++--
 .../components/pages/test/keymapConverter.ts  | 27 ++++++++---
 frontend/src/ts/states/modifiers.ts           | 10 ++++
 frontend/src/ts/states/test.ts                | 12 +++++
 5 files changed, 111 insertions(+), 27 deletions(-)

diff --git a/frontend/__tests__/components/pages/test/keymapConverter.spec.ts b/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
index 8d90d9a2ffe8..5d0bdcbc4fc1 100644
--- a/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
+++ b/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
@@ -49,10 +49,10 @@ describe("keymap converter", () => {
         { legends: ["a", "A", "a", "A"], x: 1 },
         { legends: ["s", "S", "s", "S"] },
         { legends: ["d", "D", "d", "D"] },
-        { legends: ["f", "F", "f", "F"] },
+        { legends: ["f", "F", "f", "F"], isHoming: true },
         { legends: ["g", "G", "g", "G"] },
         { legends: ["h", "H", "h", "H"] },
-        { legends: ["j", "J", "j", "J"] },
+        { legends: ["j", "J", "j", "J"], isHoming: true },
         { legends: ["k", "K", "k", "K"] },
         { legends: ["l", "L", "l", "L"] },
         { legends: [";", ":", ";", ":"] },
@@ -73,7 +73,12 @@ describe("keymap converter", () => {
       ]);
 
       expect(result.row5, "row5").toEqual([
-        { legends: ["qwerty", "qwerty", "qwerty", "qwerty"], width: 6, x: 3.5 },
+        {
+          legends: [" ", " ", " ", " "],
+          width: 6,
+          x: 3.5,
+          isLayoutIndicator: true,
+        },
       ]);
     });
 
@@ -191,12 +196,13 @@ describe("keymap converter", () => {
       // Row 5: split has two keys with gap in middle
       expect(result.row5.length, "row5 length").toBe(2);
       expect(result.row5[0], "row5 left").toEqual({
-        legends: ["qwerty", "qwerty", "qwerty", "qwerty"],
+        legends: [" ", " ", " ", " "],
         width: 3,
         x: 3.5,
+        isLayoutIndicator: true,
       });
       expect(result.row5[1], "row5 right").toEqual({
-        legends: ["", "", "", ""],
+        legends: [" ", " ", " ", " "],
         width: 3,
         x: 1,
       });
@@ -243,10 +249,10 @@ describe("keymap converter", () => {
         { legends: ["a", "A", "a", "A"], x: 1 },
         { legends: ["s", "S", "s", "S"] },
         { legends: ["d", "D", "d", "D"] },
-        { legends: ["f", "F", "f", "F"] },
+        { legends: ["f", "F", "f", "F"], isHoming: true },
         { legends: ["g", "G", "g", "G"] },
         { legends: ["h", "H", "h", "H"] },
-        { legends: ["j", "J", "j", "J"] },
+        { legends: ["j", "J", "j", "J"], isHoming: true },
         { legends: ["k", "K", "k", "K"] },
         { legends: ["l", "L", "l", "L"] },
         { legends: ["ö", "Ö", "ö", "Ö"] },
@@ -269,7 +275,12 @@ describe("keymap converter", () => {
       ]);
 
       expect(result.row5, "row5").toEqual([
-        { legends: ["qwertz", "qwertz", "qwertz", "qwertz"], width: 6, x: 3.5 },
+        {
+          legends: [" ", " ", " ", " "],
+          width: 6,
+          x: 3.5,
+          isLayoutIndicator: true,
+        },
       ]);
     });
 
@@ -388,12 +399,13 @@ describe("keymap converter", () => {
       // Row 5: split has two keys with gap in middle
       expect(result.row5.length, "row5 length").toBe(2);
       expect(result.row5[0], "row5 left").toEqual({
-        legends: ["qwertz", "qwertz", "qwertz", "qwertz"],
+        legends: [" ", " ", " ", " "],
         width: 3,
         x: 3.5,
+        isLayoutIndicator: true,
       });
       expect(result.row5[1], "row5 right").toEqual({
-        legends: ["", "", "", ""],
+        legends: [" ", " ", " ", " "],
         width: 3,
         x: 1,
       });
@@ -437,10 +449,10 @@ describe("keymap converter", () => {
       { legends: ["a", "A", "a", "A"] },
       { legends: ["s", "S", "s", "S"] },
       { legends: ["d", "D", "d", "D"] },
-      { legends: ["f", "F", "f", "F"] },
+      { legends: ["f", "F", "f", "F"], isHoming: true },
       { legends: ["g", "G", "g", "G"] },
       { legends: ["h", "H", "h", "H"] },
-      { legends: ["j", "J", "j", "J"] },
+      { legends: ["j", "J", "j", "J"], isHoming: true },
       { legends: ["k", "K", "k", "K"] },
       { legends: ["l", "L", "l", "L"] },
       { legends: [";", ":", ";", ":"] },
@@ -460,7 +472,12 @@ describe("keymap converter", () => {
     ]);
 
     expect(result.row5, "row5").toEqual([
-      { legends: ["qwerty", "qwerty", "qwerty", "qwerty"], width: 4, x: 3 },
+      {
+        legends: [" ", " ", " ", " "],
+        width: 4,
+        x: 3,
+        isLayoutIndicator: true,
+      },
     ]);
   });
 
@@ -571,12 +588,13 @@ describe("keymap converter", () => {
     // Row 5: split has two keys with gap in middle
     expect(result.row5.length, "row5 length").toBe(2);
     expect(result.row5[0], "row5 left").toEqual({
-      legends: ["qwerty", "qwerty", "qwerty", "qwerty"],
+      legends: [" ", " ", " ", " "],
       width: 3,
       x: 2,
+      isLayoutIndicator: true,
     });
     expect(result.row5[1], "row5 right").toEqual({
-      legends: ["", "", "", ""],
+      legends: [" ", " ", " ", " "],
       width: 3,
       x: 1,
     });
diff --git a/frontend/src/ts/components/pages/test/Keymap.tsx b/frontend/src/ts/components/pages/test/Keymap.tsx
index ad90d9b1f3f5..31809b667354 100644
--- a/frontend/src/ts/components/pages/test/Keymap.tsx
+++ b/frontend/src/ts/components/pages/test/Keymap.tsx
@@ -2,10 +2,16 @@ import { LayoutObject } from "@monkeytype/schemas/layouts";
 import { createMemo, For, Show } from "solid-js";
 
 import { getConfig } from "../../../config/store";
-import { getModifierState } from "../../../states/modifiers";
-import { getKeymapLayout, keymapLayoutObject } from "../../../states/test";
+import { showCommandLineForConfig } from "../../../states/core";
+import { getModifierState, isCapsLockOn } from "../../../states/modifiers";
+import {
+  getKeymapHighlightKey,
+  getKeymapLayout,
+  keymapLayoutObject,
+} from "../../../states/test";
 import { cn } from "../../../utils/cn";
 import { typedEntries } from "../../../utils/misc";
+import { Button } from "../../common/Button";
 import {
   convertLayoutToKeymap,
   KeyboardDefinition,
@@ -24,6 +30,7 @@ export function Keymap() {
 }
 
 function Keyboard(props: { displayName: string; layoutData: LayoutObject }) {
+  //TODO check for mac specific shift+capslock
   const layer = createMemo(() => {
     switch (getConfig.keymapLegendStyle) {
       case "blank":
@@ -37,7 +44,7 @@ function Keyboard(props: { displayName: string; layoutData: LayoutObject }) {
           return 3;
         } else if (getModifierState().altGr) {
           return 2;
-        } else if (getModifierState().shift) {
+        } else if (getModifierState().shift || isCapsLockOn()) {
           return 1;
         }
         return 0;
@@ -47,6 +54,7 @@ function Keyboard(props: { displayName: string; layoutData: LayoutObject }) {
     }
   });
 
+  //TODO show if test has numbers and keymapMode is next
   const showFirstRow = createMemo(
     () =>
       (getConfig.keymapLayoutStyle === "full" ||
@@ -57,6 +65,7 @@ function Keyboard(props: { displayName: string; layoutData: LayoutObject }) {
   );
 
   // Convert layout to KeyboardDefinition format
+  //TODO handle funbox layout_mirror
   const keyboardDef = createMemo(() =>
     convertLayoutToKeymap(props.layoutData, {
       displayName: props.displayName,
@@ -103,11 +112,15 @@ function Key(
     layer: number;
   } & KeyDefinition,
 ) {
+  const isActive = () =>
+    props.legends.some((it) => it === getKeymapHighlightKey());
+
   return (
     <div
       class={cn(
-        "flex items-center justify-center rounded border-2 border-bg bg-sub-alt",
+        "relative flex items-center justify-center rounded border-2 border-bg bg-sub-alt",
         (props.legends[props.layer] ?? "").length >= 3 && "text-em-xs",
+        isActive() && "bg-main",
       )}
       style={{
         height: `${(props.height ?? 1) * 2}rem`,
@@ -115,7 +128,25 @@ function Key(
         "margin-left": `${(props.x ?? 0) * 2}rem`,
       }}
     >
-      {props.legends[props.layer]}
+      <Show
+        when={props.isLayoutIndicator}
+        fallback={
+          <>
+            {props.legends[props.layer]}
+            <Show when={props.isHoming}>
+              <div class="bg-em-xs absolute bottom-1 left-auto h-px w-2 rounded bg-sub"></div>
+            </Show>
+          </>
+        }
+      >
+        <Button
+          variant="text"
+          active={isActive()}
+          class="text-xs text-sub [--themable-button-active:var(--bg-color)]"
+          text={getKeymapLayout().layoutNameDisplayString}
+          onClick={() => showCommandLineForConfig("keymapLayout")}
+        />
+      </Show>
     </div>
   );
 }
diff --git a/frontend/src/ts/components/pages/test/keymapConverter.ts b/frontend/src/ts/components/pages/test/keymapConverter.ts
index a0dee9740b78..c248f1b1a6bd 100644
--- a/frontend/src/ts/components/pages/test/keymapConverter.ts
+++ b/frontend/src/ts/components/pages/test/keymapConverter.ts
@@ -10,6 +10,9 @@ export type KeyDefinition = {
   height?: number;
   /** x-offset in u  */
   x?: number;
+
+  isLayoutIndicator?: boolean;
+  isHoming?: boolean;
 };
 export type KeyboardDefinition = Record<
   keyof LayoutObject["keys"],
@@ -51,7 +54,7 @@ function convertStaggered(
   const isIso = layout.type === "iso";
 
   if (isSplit && layout.keys.row5.length === 1) {
-    layout.keys.row5.push(buildLegends([""]));
+    layout.keys.row5.push(buildLegends([" "]));
   }
 
   const calcGap =
@@ -72,7 +75,10 @@ function convertStaggered(
       skip: ({ col }) => (options.showAllKeys ? false : col === 12),
       width: ({ col }) => (col === 12 ? 1.5 : undefined),
     },
-    row3: { x: calcGap({ col1Gap: 1 }) },
+    row3: {
+      x: calcGap({ col1Gap: 1 }),
+      isHoming: ({ col }) => col === 3 || col === 6,
+    },
     row4: { x: calcGap({ col1Gap: isIso ? 0.25 : 1.5 }) },
     row5: {
       x: calcGap({ col1Gap: 3.5, splitCol: 1 }),
@@ -85,8 +91,7 @@ function convertStaggered(
         }
         return options.showAllKeys ? 6.25 : 6;
       },
-      legend: ({ col }) =>
-        col === 0 ? buildLegends([options.displayName]) : undefined,
+      isLayoutIndicator: ({ col }) => col === 0,
     },
   });
 
@@ -172,7 +177,7 @@ function convertMatrix(
   const isSplit = options.keymapStyle === "split_matrix";
 
   if (isSplit && layout.keys.row5.length === 1) {
-    layout.keys.row5.push(buildLegends([""]));
+    layout.keys.row5.push(buildLegends([" "]));
   }
 
   const calcGap =
@@ -195,6 +200,7 @@ function convertMatrix(
     row3: {
       skip: ({ col }) => col > (options.showAllKeys ? 10 : 9),
       x: calcGap({}),
+      isHoming: ({ col }) => col === 3 || col === 6,
     },
     row4: {
       skip: ({ col }) => col > 9,
@@ -203,8 +209,7 @@ function convertMatrix(
     row5: {
       x: calcGap({ col1Gap: isSplit ? 2 : 3, splitCol: 1 }),
       width: () => (isSplit ? 3 : options.showAllKeys ? 6 : 4),
-      legend: ({ col }) =>
-        col === 0 ? buildLegends([options.displayName]) : undefined,
+      isLayoutIndicator: ({ col }) => col === 0,
     },
   });
 
@@ -259,6 +264,8 @@ function convertBase(
         width?: (options: RuleParams) => number | undefined;
         x?: (options: RuleParams) => number | undefined;
         skip?: (options: RuleParams) => boolean;
+        isLayoutIndicator?: (options: RuleParams) => boolean;
+        isHoming?: (options: RuleParams) => boolean;
       }
     >
   >,
@@ -278,12 +285,18 @@ function convertBase(
           const height = cols?.[row]?.height?.({ col: colNum });
           const width = cols?.[row]?.width?.({ col: colNum });
           const x = cols?.[row]?.x?.({ col: colNum });
+          const isLayoutIndicator = cols?.[row]?.isLayoutIndicator?.({
+            col: colNum,
+          });
+          const isHoming = cols?.[row]?.isHoming?.({ col: colNum });
 
           return {
             legends,
             ...(height !== undefined ? { height } : {}),
             ...(width !== undefined ? { width } : {}),
             ...(x !== undefined ? { x } : {}),
+            ...(isLayoutIndicator === true ? { isLayoutIndicator: true } : {}),
+            ...(isHoming === true ? { isHoming: true } : {}),
           } satisfies KeyDefinition;
         })
         .filter((it) => it !== undefined),
diff --git a/frontend/src/ts/states/modifiers.ts b/frontend/src/ts/states/modifiers.ts
index 5facc8bdb3c8..080c4093e7ce 100644
--- a/frontend/src/ts/states/modifiers.ts
+++ b/frontend/src/ts/states/modifiers.ts
@@ -1,4 +1,9 @@
+import {
+  isCapsLockOn as checkCapsLockOn,
+  onCapsLockChange,
+} from "@leonabcd123/modern-caps-lock";
 import { createSignalWithSetters } from "../hooks/createSignalWithSetters";
+import { createSignal } from "solid-js";
 
 type ModifierState = {
   shift: boolean;
@@ -21,3 +26,8 @@ export const [getModifierState, { updateModifierState }] =
         shift: val.leftShift ?? val.rightShift ?? prev.shift,
       })),
   });
+
+const [isCapsLockOn, setCapsLockOn] = createSignal<boolean>(checkCapsLockOn());
+export { isCapsLockOn };
+
+onCapsLockChange((state) => setCapsLockOn(state));
diff --git a/frontend/src/ts/states/test.ts b/frontend/src/ts/states/test.ts
index 14eb4e9573dc..cf7ca890e7d3 100644
--- a/frontend/src/ts/states/test.ts
+++ b/frontend/src/ts/states/test.ts
@@ -15,6 +15,7 @@ import { CompletedEvent, IncompleteTest } from "@monkeytype/schemas/results";
 import { createSignalWithSetters } from "../hooks/createSignalWithSetters";
 import { getLayout } from "../utils/json-data";
 import { replaceUnderscoresWithSpaces } from "../utils/strings";
+import { keymapEvent } from "../events/keymap";
 
 export const [wordsHaveNewline, setWordsHaveNewline] = createSignal(false);
 export const [wordsHaveTab, setWordsHaveTab] = createSignal(false);
@@ -79,3 +80,14 @@ export const [keymapLayoutObject] = createResource(
   getKeymapLayout,
   async (layout) => await getLayout(layout.layout),
 );
+
+const [getKeymapHighlightKey, setKeymapHighlightKey] = createSignal<
+  string | undefined
+>(undefined);
+
+export { getKeymapHighlightKey };
+
+keymapEvent.subscribe(({ mode, key }) => {
+  const mappedKey = key === "" ? " " : key;
+  setKeymapHighlightKey(mode === "highlight" ? mappedKey : undefined);
+});

From 07d8c68a9b432c40c508d439ddbc6616fd020954 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Fri, 19 Jun 2026 11:51:25 +0200
Subject: [PATCH 15/61] fix indicator text color

---
 frontend/src/ts/components/pages/test/Keymap.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/frontend/src/ts/components/pages/test/Keymap.tsx b/frontend/src/ts/components/pages/test/Keymap.tsx
index 31809b667354..8bf03d5b5e51 100644
--- a/frontend/src/ts/components/pages/test/Keymap.tsx
+++ b/frontend/src/ts/components/pages/test/Keymap.tsx
@@ -120,7 +120,7 @@ function Key(
       class={cn(
         "relative flex items-center justify-center rounded border-2 border-bg bg-sub-alt",
         (props.legends[props.layer] ?? "").length >= 3 && "text-em-xs",
-        isActive() && "bg-main",
+        isActive() && "bg-main text-bg",
       )}
       style={{
         height: `${(props.height ?? 1) * 2}rem`,
@@ -134,7 +134,12 @@ function Key(
           <>
             {props.legends[props.layer]}
             <Show when={props.isHoming}>
-              <div class="bg-em-xs absolute bottom-1 left-auto h-px w-2 rounded bg-sub"></div>
+              <div
+                class={cn(
+                  "bg-em-xs absolute bottom-1 left-auto h-px w-2 rounded",
+                  isActive() ? "bg-bg" : "bg-sub",
+                )}
+              ></div>
             </Show>
           </>
         }
@@ -142,7 +147,7 @@ function Key(
         <Button
           variant="text"
           active={isActive()}
-          class="text-xs text-sub [--themable-button-active:var(--bg-color)]"
+          class="text-xs [--themable-button-active:var(--bg-color)]"
           text={getKeymapLayout().layoutNameDisplayString}
           onClick={() => showCommandLineForConfig("keymapLayout")}
         />

From b88156f895db554cb60f77507b4752307916bfa9 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Fri, 19 Jun 2026 12:32:18 +0200
Subject: [PATCH 16/61] fix tab navigation

---
 frontend/src/ts/components/common/Button.tsx     | 2 ++
 frontend/src/ts/components/pages/test/Keymap.tsx | 1 +
 2 files changed, 3 insertions(+)

diff --git a/frontend/src/ts/components/common/Button.tsx b/frontend/src/ts/components/common/Button.tsx
index b7611ff3b20d..dafd7f7f7e5a 100644
--- a/frontend/src/ts/components/common/Button.tsx
+++ b/frontend/src/ts/components/common/Button.tsx
@@ -18,6 +18,7 @@ type BaseProps = {
   onMouseLeave?: (e: MouseEvent) => void;
   dataset?: Record<string, string>;
   active?: boolean;
+  tabIndex?: number;
 };
 
 export type ButtonProps = BaseProps & {
@@ -98,6 +99,7 @@ export function Button(props: ButtonProps | AnchorProps): JSXElement {
           disabled={props.disabled ?? false}
           data-ui-variant={variant()}
           data-ui-element="button"
+          tabIndex={props.tabIndex ?? 0}
           {...props.dataset}
         >
           {content}
diff --git a/frontend/src/ts/components/pages/test/Keymap.tsx b/frontend/src/ts/components/pages/test/Keymap.tsx
index 8bf03d5b5e51..31076f03d7e4 100644
--- a/frontend/src/ts/components/pages/test/Keymap.tsx
+++ b/frontend/src/ts/components/pages/test/Keymap.tsx
@@ -150,6 +150,7 @@ function Key(
           class="text-xs [--themable-button-active:var(--bg-color)]"
           text={getKeymapLayout().layoutNameDisplayString}
           onClick={() => showCommandLineForConfig("keymapLayout")}
+          tabIndex={-1}
         />
       </Show>
     </div>

From f076ec746e3fb072beb0d3f36b960cc211b93518 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Fri, 19 Jun 2026 13:10:52 +0200
Subject: [PATCH 17/61] add animations

---
 .../src/ts/components/pages/test/Keymap.tsx   | 45 +++++++++++++++----
 1 file changed, 36 insertions(+), 9 deletions(-)

diff --git a/frontend/src/ts/components/pages/test/Keymap.tsx b/frontend/src/ts/components/pages/test/Keymap.tsx
index 31076f03d7e4..b7d201aecdc4 100644
--- a/frontend/src/ts/components/pages/test/Keymap.tsx
+++ b/frontend/src/ts/components/pages/test/Keymap.tsx
@@ -1,7 +1,8 @@
 import { LayoutObject } from "@monkeytype/schemas/layouts";
-import { createMemo, For, Show } from "solid-js";
+import { createMemo, createSignal, For, Show } from "solid-js";
 
 import { getConfig } from "../../../config/store";
+import { keymapEvent } from "../../../events/keymap";
 import { showCommandLineForConfig } from "../../../states/core";
 import { getModifierState, isCapsLockOn } from "../../../states/modifiers";
 import {
@@ -9,8 +10,10 @@ import {
   getKeymapLayout,
   keymapLayoutObject,
 } from "../../../states/test";
+import { getTheme } from "../../../states/theme";
 import { cn } from "../../../utils/cn";
 import { typedEntries } from "../../../utils/misc";
+import { Anime } from "../../common/anime";
 import { Button } from "../../common/Button";
 import {
   convertLayoutToKeymap,
@@ -112,20 +115,43 @@ function Key(
     layer: number;
   } & KeyDefinition,
 ) {
-  const isActive = () =>
-    props.legends.some((it) => it === getKeymapHighlightKey());
+  const [flashTick, setFlashTick] = createSignal(0);
+  const [flashCorrect, setFlashCorrect] = createSignal(true);
+  const isNext = () => getKeymapHighlightKey() === props.legends[props.layer];
+
+  keymapEvent.useListener((event) => {
+    if (event.mode !== "flash") return;
+    if (event.key !== props.legends[props.layer]) return;
+    setFlashCorrect(event.correct ?? true);
+    setFlashTick((t) => t + 1);
+  });
 
   return (
-    <div
+    <Anime
       class={cn(
         "relative flex items-center justify-center rounded border-2 border-bg bg-sub-alt",
         (props.legends[props.layer] ?? "").length >= 3 && "text-em-xs",
-        isActive() && "bg-main text-bg",
       )}
       style={{
         height: `${(props.height ?? 1) * 2}rem`,
         width: `${(props.width ?? 1) * 2}rem`,
         "margin-left": `${(props.x ?? 0) * 2}rem`,
+        "background-color": "var(--keybgcolor)",
+        color: "var(--keycolor)",
+      }}
+      animation={{
+        "--keybgcolor":
+          flashTick() === 0
+            ? [isNext() ? getTheme().main : getTheme().subAlt]
+            : [
+                flashCorrect() ? getTheme().main : getTheme().error,
+                isNext() ? getTheme().main : getTheme().subAlt,
+              ],
+        "--keycolor":
+          flashTick() === 0
+            ? [isNext() ? getTheme().bg : getTheme().sub]
+            : [getTheme().bg, isNext() ? getTheme().bg : getTheme().sub],
+        duration: isNext() ? 0 : 250,
       }}
     >
       <Show
@@ -137,8 +163,10 @@ function Key(
               <div
                 class={cn(
                   "bg-em-xs absolute bottom-1 left-auto h-px w-2 rounded",
-                  isActive() ? "bg-bg" : "bg-sub",
                 )}
+                style={{
+                  "background-color": "var(--keycolor)",
+                }}
               ></div>
             </Show>
           </>
@@ -146,13 +174,12 @@ function Key(
       >
         <Button
           variant="text"
-          active={isActive()}
-          class="text-xs [--themable-button-active:var(--bg-color)]"
+          class="text-xs [--themable-button-bg:transparent] [--themable-button-text:var(--keycolor)]"
           text={getKeymapLayout().layoutNameDisplayString}
           onClick={() => showCommandLineForConfig("keymapLayout")}
           tabIndex={-1}
         />
       </Show>
-    </div>
+    </Anime>
   );
 }

From 507f998eda6f8da0cbdd27737b256999ce18cc56 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Fri, 19 Jun 2026 13:39:05 +0200
Subject: [PATCH 18/61] add steno

---
 .../pages/test/keymapConverter.spec.ts        | 80 +++++++++++++++++++
 .../src/ts/components/pages/test/Keymap.tsx   |  9 ++-
 .../components/pages/test/keymapConverter.ts  | 71 ++++++++++++++++
 3 files changed, 158 insertions(+), 2 deletions(-)

diff --git a/frontend/__tests__/components/pages/test/keymapConverter.spec.ts b/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
index 5d0bdcbc4fc1..4e04df318bcd 100644
--- a/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
+++ b/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
@@ -599,4 +599,84 @@ describe("keymap converter", () => {
       x: 1,
     });
   });
+
+  it("converts steno", () => {
+    const result = convertLayoutToKeymap({} as any, {
+      displayName: "steno",
+      keymapStyle: "steno",
+      showAllKeys: false,
+    });
+
+    expect(result.row1, "row1").toEqual([]);
+    expect(result.row2, "row2").toEqual([
+      { legends: ["s", "S", "s", "S"], height: 2 },
+      { legends: ["t", "T", "t", "T"] },
+      { legends: ["p", "P", "p", "P"] },
+      { legends: ["h", "H", "h", "H"] },
+      { legends: ["*", "*", "*", "*"], height: 2 },
+      { legends: ["f", "F", "f", "F"] },
+      { legends: ["p", "P", "p", "P"] },
+      { legends: ["l", "L", "l", "L"] },
+      { legends: ["t", "T", "t", "T"] },
+      { legends: ["d", "D", "d", "D"] },
+    ]);
+    expect(result.row3, "row3").toEqual([
+      { legends: ["k", "K", "k", "K"], x: 1 },
+      { legends: ["w", "W", "w", "W"] },
+      { legends: ["r", "R", "r", "R"] },
+      { legends: ["r", "R", "r", "R"], x: 1 },
+      { legends: ["b", "B", "b", "B"] },
+      { legends: ["g", "G", "g", "G"] },
+      { legends: ["s", "S", "s", "S"] },
+      { legends: ["z", "Z", "z", "Z"] },
+    ]);
+    expect(result.row4, "row4").toEqual([
+      { legends: ["a", "A", "a", "A"], x: 2.25 },
+      { legends: ["o", "O", "o", "O"] },
+      { legends: ["e", "E", "e", "E"], x: 0.5 },
+      { legends: ["u", "U", "u", "U"] },
+    ]);
+    expect(result.row5, "row5").toEqual([]);
+  });
+
+  it("converts steno matrix", () => {
+    const result = convertLayoutToKeymap({} as any, {
+      displayName: "steno matrix",
+      keymapStyle: "steno_matrix",
+      showAllKeys: false,
+    });
+
+    expect(result.row1, "row1").toEqual([]);
+    expect(result.row2, "row2").toEqual([
+      { legends: ["s", "S", "s", "S"] },
+      { legends: ["t", "T", "t", "T"] },
+      { legends: ["p", "P", "p", "P"] },
+      { legends: ["h", "H", "h", "H"] },
+      { legends: ["*", "*", "*", "*"] },
+      { legends: ["f", "F", "f", "F"], x: 1 },
+      { legends: ["p", "P", "p", "P"] },
+      { legends: ["l", "L", "l", "L"] },
+      { legends: ["t", "T", "t", "T"] },
+      { legends: ["d", "D", "d", "D"] },
+    ]);
+    expect(result.row3, "row3").toEqual([
+      { legends: ["s", "S", "s", "S"] },
+      { legends: ["k", "K", "k", "K"] },
+      { legends: ["w", "W", "w", "W"] },
+      { legends: ["r", "R", "r", "R"] },
+      { legends: ["*", "*", "*", "*"] },
+      { legends: ["r", "R", "r", "R"], x: 1 },
+      { legends: ["b", "B", "b", "B"] },
+      { legends: ["g", "G", "g", "G"] },
+      { legends: ["s", "S", "s", "S"] },
+      { legends: ["z", "Z", "z", "Z"] },
+    ]);
+    expect(result.row4, "row4").toEqual([
+      { legends: ["a", "A", "a", "A"], x: 3 },
+      { legends: ["o", "O", "o", "O"] },
+      { legends: ["e", "E", "e", "E"], x: 1 },
+      { legends: ["u", "U", "u", "U"] },
+    ]);
+    expect(result.row5, "row5").toEqual([]);
+  });
 });
diff --git a/frontend/src/ts/components/pages/test/Keymap.tsx b/frontend/src/ts/components/pages/test/Keymap.tsx
index b7d201aecdc4..45d2ba17ffc5 100644
--- a/frontend/src/ts/components/pages/test/Keymap.tsx
+++ b/frontend/src/ts/components/pages/test/Keymap.tsx
@@ -115,12 +115,17 @@ function Key(
     layer: number;
   } & KeyDefinition,
 ) {
+  const isSteno = () =>
+    getConfig.keymapStyle === "steno" ||
+    getConfig.keymapStyle === "steno_matrix";
+
   const [flashTick, setFlashTick] = createSignal(0);
   const [flashCorrect, setFlashCorrect] = createSignal(true);
-  const isNext = () => getKeymapHighlightKey() === props.legends[props.layer];
+  const isNext = () =>
+    !isSteno() && getKeymapHighlightKey() === props.legends[props.layer];
 
   keymapEvent.useListener((event) => {
-    if (event.mode !== "flash") return;
+    if (event.mode !== "flash" || isSteno()) return;
     if (event.key !== props.legends[props.layer]) return;
     setFlashCorrect(event.correct ?? true);
     setFlashTick((t) => t + 1);
diff --git a/frontend/src/ts/components/pages/test/keymapConverter.ts b/frontend/src/ts/components/pages/test/keymapConverter.ts
index c248f1b1a6bd..08f884cfe826 100644
--- a/frontend/src/ts/components/pages/test/keymapConverter.ts
+++ b/frontend/src/ts/components/pages/test/keymapConverter.ts
@@ -41,6 +41,9 @@ export function convertLayoutToKeymap(
     case "matrix":
     case "split_matrix":
       return convertMatrix(layout, options);
+    case "steno":
+    case "steno_matrix":
+      return convertSteno(options);
   }
 
   throw new Error("not supported");
@@ -252,6 +255,74 @@ function convertMatrix(
   return result;
 }
 
+function convertSteno(options: ConvertOptions): KeyboardDefinition {
+  const isSplit = options.keymapStyle === "steno_matrix";
+
+  const layout: LayoutObject = {
+    keymapShowTopRow: true,
+    type: "matrix",
+    keys: {
+      row1: [],
+      row2: [
+        ["s", "S"],
+        ["t", "T"],
+        ["p", "P"],
+        ["h", "H"],
+        ["*", "*"],
+        ["f", "F"],
+        ["p", "P"],
+        ["l", "L"],
+        ["t", "T"],
+        ["d", "D"],
+      ],
+      row3: [
+        ["s", "S"],
+        ["k", "K"],
+        ["w", "W"],
+        ["r", "R"],
+        ["*", "*"],
+        ["r", "R"],
+        ["b", "B"],
+        ["g", "G"],
+        ["s", "S"],
+        ["z", "Z"],
+      ],
+      row4: [
+        ["a", "A"],
+        ["o", "O"],
+        ["e", "E"],
+        ["u", "U"],
+      ],
+      row5: [],
+    },
+  };
+
+  const calcGap =
+    (options: { colGap?: Record<number, number> }) =>
+    ({ col }: { col: number }) => {
+      const gap = options?.colGap?.[col];
+      if (!isSplit && gap !== undefined) return gap;
+      return isSplit && col === 5 ? 1 : undefined;
+    };
+
+  const isLargeKey = (col: number): boolean => !isSplit && [0, 4].includes(col);
+
+  const base = convertBase(layout, options, {
+    row2: {
+      height: ({ col }) => (isLargeKey(col) ? 2 : undefined),
+      x: calcGap({}),
+    },
+    row3: {
+      skip: ({ col }) => isLargeKey(col),
+      x: calcGap({ colGap: { 1: 1, 5: 1 } }),
+    },
+    row4: {
+      x: ({ col }) => (isSplit ? { 0: 3, 2: 1 } : { 0: 2.25, 2: 0.5 })[col],
+    },
+  });
+  return base;
+}
+
 function convertBase(
   layout: LayoutObject,
   options: ConvertOptions,

From 46015f69be30f9792a12419d71a505d2edc47d42 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sat, 20 Jun 2026 12:11:28 +0200
Subject: [PATCH 19/61] extract wordsHaveNumbers signal. show numrow if test
 has numbers on next mode

---
 frontend/src/ts/components/pages/test/Keymap.tsx | 12 ++++++------
 frontend/src/ts/elements/keymap.ts               |  4 ++--
 frontend/src/ts/states/test.ts                   |  1 +
 frontend/src/ts/test/test-logic.ts               |  3 ++-
 frontend/src/ts/test/test-words.ts               |  5 -----
 5 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/frontend/src/ts/components/pages/test/Keymap.tsx b/frontend/src/ts/components/pages/test/Keymap.tsx
index 45d2ba17ffc5..938b3a1b0ed9 100644
--- a/frontend/src/ts/components/pages/test/Keymap.tsx
+++ b/frontend/src/ts/components/pages/test/Keymap.tsx
@@ -9,6 +9,7 @@ import {
   getKeymapHighlightKey,
   getKeymapLayout,
   keymapLayoutObject,
+  wordsHaveNumbers,
 } from "../../../states/test";
 import { getTheme } from "../../../states/theme";
 import { cn } from "../../../utils/cn";
@@ -57,14 +58,13 @@ function Keyboard(props: { displayName: string; layoutData: LayoutObject }) {
     }
   });
 
-  //TODO show if test has numbers and keymapMode is next
   const showFirstRow = createMemo(
     () =>
-      (getConfig.keymapLayoutStyle === "full" ||
-        getConfig.keymapLayoutStyle === "minimal_numrow" ||
-        (getConfig.keymapLayoutStyle === "minimal_layout" &&
-          props.layoutData.keymapShowTopRow)) ??
-      false,
+      (wordsHaveNumbers() && getConfig.keymapMode === "next") ||
+      getConfig.keymapLayoutStyle === "full" ||
+      getConfig.keymapLayoutStyle === "minimal_numrow" ||
+      (getConfig.keymapLayoutStyle === "minimal_layout" &&
+        props.layoutData.keymapShowTopRow),
   );
 
   // Convert layout to KeyboardDefinition format
diff --git a/frontend/src/ts/elements/keymap.ts b/frontend/src/ts/elements/keymap.ts
index 562b975a0607..f6c52c68a228 100644
--- a/frontend/src/ts/elements/keymap.ts
+++ b/frontend/src/ts/elements/keymap.ts
@@ -6,7 +6,6 @@ import * as JSONData from "../utils/json-data";
 import * as Hangul from "hangul-js";
 import { showErrorNotification } from "../states/notifications";
 import { getActivePage } from "../states/core";
-import * as TestWords from "../test/test-words";
 import { onCapsLockChange, isCapsLockOn } from "@leonabcd123/modern-caps-lock";
 import * as ShiftTracker from "../test/shift-tracker";
 import * as AltTracker from "../test/alt-tracker";
@@ -20,6 +19,7 @@ import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-fra
 import { getTheme } from "../states/theme";
 
 import { createEffectOn } from "../hooks/effects";
+import { wordsHaveNumbers } from "../states/test";
 
 export const keyDataDelimiter = "\uE000";
 const keymap = qsr("#keymap");
@@ -431,7 +431,7 @@ export async function refresh(): Promise<void> {
     }
 
     const showTopRow =
-      (TestWords.hasNumbers && Config.keymapMode === "next") ||
+      (wordsHaveNumbers() && Config.keymapMode === "next") ||
       Config.keymapLayoutStyle === "minimal_numrow" ||
       (layoutData.keymapShowTopRow && Config.keymapLayoutStyle !== "minimal");
 
diff --git a/frontend/src/ts/states/test.ts b/frontend/src/ts/states/test.ts
index cf7ca890e7d3..d2421db7f614 100644
--- a/frontend/src/ts/states/test.ts
+++ b/frontend/src/ts/states/test.ts
@@ -19,6 +19,7 @@ import { keymapEvent } from "../events/keymap";
 
 export const [wordsHaveNewline, setWordsHaveNewline] = createSignal(false);
 export const [wordsHaveTab, setWordsHaveTab] = createSignal(false);
+export const [wordsHaveNumbers, setWordsHaveNumbers] = createSignal(false);
 
 export const [getLoadedChallenge, setLoadedChallenge] =
   createSignal<Challenge | null>(null);
diff --git a/frontend/src/ts/test/test-logic.ts b/frontend/src/ts/test/test-logic.ts
index 25bede817bfe..778df2ed89e2 100644
--- a/frontend/src/ts/test/test-logic.ts
+++ b/frontend/src/ts/test/test-logic.ts
@@ -46,6 +46,7 @@ import {
   setLastResult,
   setResultVisible,
   setWordsHaveNewline,
+  setWordsHaveNumbers,
   setWordsHaveTab,
 } from "../states/test";
 import { restartTestEvent } from "../events/test";
@@ -603,7 +604,7 @@ async function init(): Promise<boolean> {
     }
   }
 
-  TestWords.setHasNumbers(hasNumbers);
+  setWordsHaveNumbers(hasNumbers);
   setWordsHaveTab(wordsHaveTab);
   setWordsHaveNewline(wordsHaveNewline);
 
diff --git a/frontend/src/ts/test/test-words.ts b/frontend/src/ts/test/test-words.ts
index b8ddae67d6ff..252639a05301 100644
--- a/frontend/src/ts/test/test-words.ts
+++ b/frontend/src/ts/test/test-words.ts
@@ -56,8 +56,3 @@ class Words {
 }
 
 export const words = new Words();
-export let hasNumbers = false;
-
-export function setHasNumbers(tf: boolean): void {
-  hasNumbers = tf;
-}

From 0da7483fd48796af234ccc8cf4d56e3c2cfc6e49 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sat, 20 Jun 2026 12:36:17 +0200
Subject: [PATCH 20/61] fix next, restructure tests

---
 .../pages/test/keymapConverter.spec.ts        | 1318 +++++++++--------
 .../src/ts/components/pages/test/Keymap.tsx   |    3 +-
 2 files changed, 668 insertions(+), 653 deletions(-)

diff --git a/frontend/__tests__/components/pages/test/keymapConverter.spec.ts b/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
index 4e04df318bcd..27c6bc400a97 100644
--- a/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
+++ b/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
@@ -8,675 +8,689 @@ import { LayoutObject } from "@monkeytype/schemas/layouts";
 
 describe("keymap converter", () => {
   describe("convertLayoutToKeymap", () => {
-    it("converts qwerty staggered", () => {
-      const result = convertLayoutToKeymap(qwertyLayout as LayoutObject, {
-        displayName: "qwerty",
-        keymapStyle: "staggered",
-        showAllKeys: false,
+    describe("staggered", () => {
+      it("converts qwerty staggered", () => {
+        const result = convertLayoutToKeymap(qwertyLayout as LayoutObject, {
+          displayName: "qwerty",
+          keymapStyle: "staggered",
+          showAllKeys: false,
+        });
+
+        expect(result.row1, "row1").toEqual([
+          { legends: ["1", "!", "1", "!"] },
+          { legends: ["2", "@", "2", "@"] },
+          { legends: ["3", "#", "3", "#"] },
+          { legends: ["4", "$", "4", "$"] },
+          { legends: ["5", "%", "5", "%"] },
+          { legends: ["6", "^", "6", "^"] },
+          { legends: ["7", "&", "7", "&"] },
+          { legends: ["8", "*", "8", "*"] },
+          { legends: ["9", "(", "9", "("] },
+          { legends: ["0", ")", "0", ")"] },
+          { legends: ["-", "_", "-", "_"] },
+          { legends: ["=", "+", "=", "+"] },
+        ]);
+
+        expect(result.row2, "row2").toEqual([
+          { legends: ["q", "Q", "q", "Q"], x: 0.5 },
+          { legends: ["w", "W", "w", "W"] },
+          { legends: ["e", "E", "e", "E"] },
+          { legends: ["r", "R", "r", "R"] },
+          { legends: ["t", "T", "t", "T"] },
+          { legends: ["y", "Y", "y", "Y"] },
+          { legends: ["u", "U", "u", "U"] },
+          { legends: ["i", "I", "i", "I"] },
+          { legends: ["o", "O", "o", "O"] },
+          { legends: ["p", "P", "p", "P"] },
+          { legends: ["[", "{", "[", "{"] },
+          { legends: ["]", "}", "]", "}"] },
+        ]);
+
+        expect(result.row3, "row3").toEqual([
+          { legends: ["a", "A", "a", "A"], x: 1 },
+          { legends: ["s", "S", "s", "S"] },
+          { legends: ["d", "D", "d", "D"] },
+          { legends: ["f", "F", "f", "F"], isHoming: true },
+          { legends: ["g", "G", "g", "G"] },
+          { legends: ["h", "H", "h", "H"] },
+          { legends: ["j", "J", "j", "J"], isHoming: true },
+          { legends: ["k", "K", "k", "K"] },
+          { legends: ["l", "L", "l", "L"] },
+          { legends: [";", ":", ";", ":"] },
+          { legends: ["'", '"', "'", '"'] },
+        ]);
+
+        expect(result.row4, "row4").toEqual([
+          { legends: ["z", "Z", "z", "Z"], x: 1.5 },
+          { legends: ["x", "X", "x", "X"] },
+          { legends: ["c", "C", "c", "C"] },
+          { legends: ["v", "V", "v", "V"] },
+          { legends: ["b", "B", "b", "B"] },
+          { legends: ["n", "N", "n", "N"] },
+          { legends: ["m", "M", "m", "M"] },
+          { legends: [",", "<", ",", "<"] },
+          { legends: [".", ">", ".", ">"] },
+          { legends: ["/", "?", "/", "?"] },
+        ]);
+
+        expect(result.row5, "row5").toEqual([
+          {
+            legends: [" ", " ", " ", " "],
+            width: 6,
+            x: 3.5,
+            isLayoutIndicator: true,
+          },
+        ]);
+      });
+
+      it("converts qwerty staggered all keys", () => {
+        const result = convertLayoutToKeymap(qwertyLayout as LayoutObject, {
+          displayName: "qwerty",
+          keymapStyle: "staggered",
+          showAllKeys: true,
+        });
+
+        // Test only keys added when showAllKeys is true (not covered by basic staggered test)
+        // Row1: BS added at end
+        expect(result.row1[result.row1.length - 1], "row1 last").toEqual({
+          legends: ["BS", "BS", "BS", "BS"],
+          width: 2,
+        });
+
+        // Row2: Tab added at start
+        expect(result.row2[0], "row2 first").toEqual({
+          legends: ["Tab", "Tab", "Tab", "Tab"],
+          width: 1.5,
+        });
+
+        // Row3: Caps added at start, Enter added at end
+        expect(result.row3[0], "row3 first").toEqual({
+          legends: ["Caps", "Caps", "Caps", "Caps"],
+          width: 1.75,
+        });
+        expect(result.row3[result.row3.length - 1], "row3 last").toEqual({
+          legends: ["Enter", "Enter", "Enter", "Enter"],
+          width: 2.25,
+        });
+
+        // Row4: Shift added at start and end
+        expect(result.row4[0], "row4 first").toEqual({
+          legends: ["Shift", "Shift", "Shift", "Shift"],
+          width: 2.25,
+        });
+        expect(result.row4[result.row4.length - 1], "row4 last").toEqual({
+          legends: ["Shift", "Shift", "Shift", "Shift"],
+          width: 2.75,
+        });
+
+        // Row5: Ctrl, Monke, Alt at start; Alt, Monke, Meta, Ctrl at end
+        expect(result.row5[0], "row5 first").toEqual({
+          legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"],
+          width: 1.25,
+        });
+        expect(result.row5[1], "row5 second").toEqual({
+          legends: ["Monke", "Monke", "Monke", "Monke"],
+          width: 1.25,
+        });
+        expect(result.row5[2], "row5 third").toEqual({
+          legends: ["Alt", "Alt", "Alt", "Alt"],
+          width: 1.25,
+        });
+        expect(result.row5[result.row5.length - 4], "row5 Alt right").toEqual({
+          legends: ["Alt", "Alt", "Alt", "Alt"],
+          width: 1.25,
+        });
+        expect(result.row5[result.row5.length - 3], "row5 Monke right").toEqual(
+          {
+            legends: ["Monke", "Monke", "Monke", "Monke"],
+            width: 1.25,
+          },
+        );
+        expect(result.row5[result.row5.length - 2], "row5 Meta").toEqual({
+          legends: ["Meta", "Meta", "Meta", "Meta"],
+          width: 1.25,
+        });
+        expect(result.row5[result.row5.length - 1], "row5 last").toEqual({
+          legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"],
+          width: 1.25,
+        });
+
+        // Also verify total counts are as expected with extra keys
+        expect(result.row1.length, "row1 length").toBe(14);
+        expect(result.row2.length, "row2 length").toBe(14);
+        expect(result.row3.length, "row3 length").toBe(13);
+        expect(result.row4.length, "row4 length").toBe(12);
+      });
+
+      it("converts qwertz staggered", () => {
+        const result = convertLayoutToKeymap(qwertzLayout as LayoutObject, {
+          displayName: "qwertz",
+          keymapStyle: "staggered",
+          showAllKeys: false,
+        });
+
+        expect(result.row1, "row1").toEqual([
+          { legends: ["1", "!", "1", "!"] },
+          { legends: ["2", `"`, "2", `"`] },
+          { legends: ["3", "§", "3", "§"] },
+          { legends: ["4", "$", "4", "$"] },
+          { legends: ["5", "%", "5", "%"] },
+          { legends: ["6", "&", "6", "&"] },
+          { legends: ["7", "/", "7", "/"] },
+          { legends: ["8", "(", "8", "("] },
+          { legends: ["9", ")", "9", ")"] },
+          { legends: ["0", "=", "0", "="] },
+          { legends: ["ß", "?", "ß", "?"] },
+          { legends: ["´", "`", "´", "`"] },
+        ]);
+
+        expect(result.row2, "row2").toEqual([
+          { legends: ["q", "Q", "q", "Q"], x: 0.5 },
+          { legends: ["w", "W", "w", "W"] },
+          { legends: ["e", "E", "e", "E"] },
+          { legends: ["r", "R", "r", "R"] },
+          { legends: ["t", "T", "t", "T"] },
+          { legends: ["z", "Z", "z", "Z"] },
+          { legends: ["u", "U", "u", "U"] },
+          { legends: ["i", "I", "i", "I"] },
+          { legends: ["o", "O", "o", "O"] },
+          { legends: ["p", "P", "p", "P"] },
+          { legends: ["ü", "Ü", "ü", "Ü"] },
+          { legends: ["+", "*", "+", "*"] },
+        ]);
+
+        expect(result.row3, "row3").toEqual([
+          { legends: ["a", "A", "a", "A"], x: 1 },
+          { legends: ["s", "S", "s", "S"] },
+          { legends: ["d", "D", "d", "D"] },
+          { legends: ["f", "F", "f", "F"], isHoming: true },
+          { legends: ["g", "G", "g", "G"] },
+          { legends: ["h", "H", "h", "H"] },
+          { legends: ["j", "J", "j", "J"], isHoming: true },
+          { legends: ["k", "K", "k", "K"] },
+          { legends: ["l", "L", "l", "L"] },
+          { legends: ["ö", "Ö", "ö", "Ö"] },
+          { legends: ["ä", "Ä", "ä", "Ä"] },
+          { legends: ["#", "'", "#", "'"] },
+        ]);
+
+        expect(result.row4, "row4").toEqual([
+          { legends: ["<", ">", "<", ">"], x: 0.25 },
+          { legends: ["y", "Y", "y", "Y"] },
+          { legends: ["x", "X", "x", "X"] },
+          { legends: ["c", "C", "c", "C"] },
+          { legends: ["v", "V", "v", "V"] },
+          { legends: ["b", "B", "b", "B"] },
+          { legends: ["n", "N", "n", "N"] },
+          { legends: ["m", "M", "m", "M"] },
+          { legends: [",", ";", ",", ";"] },
+          { legends: [".", ":", ".", ":"] },
+          { legends: ["-", "_", "-", "_"] },
+        ]);
+
+        expect(result.row5, "row5").toEqual([
+          {
+            legends: [" ", " ", " ", " "],
+            width: 6,
+            x: 3.5,
+            isLayoutIndicator: true,
+          },
+        ]);
+      });
+
+      it("converts qwertz staggered all keys", () => {
+        const result = convertLayoutToKeymap(qwertzLayout as LayoutObject, {
+          displayName: "qwertz",
+          keymapStyle: "staggered",
+          showAllKeys: true,
+        });
+
+        // Test only keys added when showAllKeys is true (not covered by basic staggered test)
+
+        // Row1: BS added at end
+        expect(result.row1[result.row1.length - 1], "row1 last").toEqual({
+          legends: ["BS", "BS", "BS", "BS"],
+          width: 2,
+        });
+
+        // Row2: Tab added at start, Enter (with height) added at end
+        expect(result.row2[0], "row2 first").toEqual({
+          legends: ["Tab", "Tab", "Tab", "Tab"],
+          width: 1.5,
+        });
+        expect(result.row2[result.row2.length - 1], "row2 last").toEqual({
+          legends: ["Enter", "Enter", "Enter", "Enter"],
+          height: 2,
+          width: 1.5,
+        });
+
+        // Row3: Caps added at start
+        expect(result.row3[0], "row3 first").toEqual({
+          legends: ["Caps", "Caps", "Caps", "Caps"],
+          width: 1.75,
+        });
+
+        // Row4: Shift added at start and end
+        expect(result.row4[0], "row4 first").toEqual({
+          legends: ["Shift", "Shift", "Shift", "Shift"],
+          width: 1.25,
+        });
+        expect(result.row4[result.row4.length - 1], "row4 last").toEqual({
+          legends: ["Shift", "Shift", "Shift", "Shift"],
+          width: 2.75,
+        });
+
+        // Row5: Ctrl, Monke, Alt at start; Alt, Monke, Meta, Ctrl at end
+        expect(result.row5[0], "row5 first").toEqual({
+          legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"],
+          width: 1.25,
+        });
+        expect(result.row5[1], "row5 second").toEqual({
+          legends: ["Monke", "Monke", "Monke", "Monke"],
+          width: 1.25,
+        });
+        expect(result.row5[2], "row5 third").toEqual({
+          legends: ["Alt", "Alt", "Alt", "Alt"],
+          width: 1.25,
+        });
+        expect(result.row5[result.row5.length - 4], "row5 Alt right").toEqual({
+          legends: ["Alt", "Alt", "Alt", "Alt"],
+          width: 1.25,
+        });
+        expect(result.row5[result.row5.length - 3], "row5 Monke right").toEqual(
+          {
+            legends: ["Monke", "Monke", "Monke", "Monke"],
+            width: 1.25,
+          },
+        );
+        expect(result.row5[result.row5.length - 2], "row5 Meta").toEqual({
+          legends: ["Meta", "Meta", "Meta", "Meta"],
+          width: 1.25,
+        });
+        expect(result.row5[result.row5.length - 1], "row5 last").toEqual({
+          legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"],
+          width: 1.25,
+        });
+
+        // Also verify total counts are as expected with extra keys
+        expect(result.row1.length, "row1 length").toBe(14);
+        expect(result.row2.length, "row2 length").toBe(14);
+        expect(result.row3.length, "row3 length").toBe(13);
+        expect(result.row4.length, "row4 length").toBe(13);
       });
+    });
 
-      expect(result.row1, "row1").toEqual([
-        { legends: ["1", "!", "1", "!"] },
-        { legends: ["2", "@", "2", "@"] },
-        { legends: ["3", "#", "3", "#"] },
-        { legends: ["4", "$", "4", "$"] },
-        { legends: ["5", "%", "5", "%"] },
-        { legends: ["6", "^", "6", "^"] },
-        { legends: ["7", "&", "7", "&"] },
-        { legends: ["8", "*", "8", "*"] },
-        { legends: ["9", "(", "9", "("] },
-        { legends: ["0", ")", "0", ")"] },
-        { legends: ["-", "_", "-", "_"] },
-        { legends: ["=", "+", "=", "+"] },
-      ]);
-
-      expect(result.row2, "row2").toEqual([
-        { legends: ["q", "Q", "q", "Q"], x: 0.5 },
-        { legends: ["w", "W", "w", "W"] },
-        { legends: ["e", "E", "e", "E"] },
-        { legends: ["r", "R", "r", "R"] },
-        { legends: ["t", "T", "t", "T"] },
-        { legends: ["y", "Y", "y", "Y"] },
-        { legends: ["u", "U", "u", "U"] },
-        { legends: ["i", "I", "i", "I"] },
-        { legends: ["o", "O", "o", "O"] },
-        { legends: ["p", "P", "p", "P"] },
-        { legends: ["[", "{", "[", "{"] },
-        { legends: ["]", "}", "]", "}"] },
-      ]);
-
-      expect(result.row3, "row3").toEqual([
-        { legends: ["a", "A", "a", "A"], x: 1 },
-        { legends: ["s", "S", "s", "S"] },
-        { legends: ["d", "D", "d", "D"] },
-        { legends: ["f", "F", "f", "F"], isHoming: true },
-        { legends: ["g", "G", "g", "G"] },
-        { legends: ["h", "H", "h", "H"] },
-        { legends: ["j", "J", "j", "J"], isHoming: true },
-        { legends: ["k", "K", "k", "K"] },
-        { legends: ["l", "L", "l", "L"] },
-        { legends: [";", ":", ";", ":"] },
-        { legends: ["'", '"', "'", '"'] },
-      ]);
-
-      expect(result.row4, "row4").toEqual([
-        { legends: ["z", "Z", "z", "Z"], x: 1.5 },
-        { legends: ["x", "X", "x", "X"] },
-        { legends: ["c", "C", "c", "C"] },
-        { legends: ["v", "V", "v", "V"] },
-        { legends: ["b", "B", "b", "B"] },
-        { legends: ["n", "N", "n", "N"] },
-        { legends: ["m", "M", "m", "M"] },
-        { legends: [",", "<", ",", "<"] },
-        { legends: [".", ">", ".", ">"] },
-        { legends: ["/", "?", "/", "?"] },
-      ]);
-
-      expect(result.row5, "row5").toEqual([
-        {
+    describe("split", () => {
+      it("converts qwerty split", () => {
+        const result = convertLayoutToKeymap(qwertyLayout as LayoutObject, {
+          displayName: "qwerty",
+          keymapStyle: "split",
+          showAllKeys: false,
+        });
+
+        // Test split-specific differences from staggered (not covered by basic test)
+        // Split adds x=8 gap after column 7 for rows 1-4, and row5 has 2 keys with gap
+
+        // Row 1: col7 (index 6) = '7' gets x=8
+        expect(result.row1[6], "row1 key 7").toEqual({
+          legends: ["7", "&", "7", "&"],
+          x: 1,
+        });
+
+        // Row 2: col6 (index 5) = 'y' gets x=8
+        expect(result.row2[5], "row2 key y").toEqual({
+          legends: ["y", "Y", "y", "Y"],
+          x: 1,
+        });
+
+        // Row 3: col6 (index 5) = 'h' gets x=8
+        expect(result.row3[5], "row3 key h").toEqual({
+          legends: ["h", "H", "h", "H"],
+          x: 1,
+        });
+
+        // Row 4: col6 (index 5) = 'n' gets x=8
+        expect(result.row4[5], "row4 key n").toEqual({
+          legends: ["n", "N", "n", "N"],
+          x: 1,
+        });
+
+        // Row 5: split has two keys with gap in middle
+        expect(result.row5.length, "row5 length").toBe(2);
+        expect(result.row5[0], "row5 left").toEqual({
           legends: [" ", " ", " ", " "],
-          width: 6,
+          width: 3,
           x: 3.5,
           isLayoutIndicator: true,
-        },
-      ]);
-    });
-
-    it("converts qwerty staggered all keys", () => {
-      const result = convertLayoutToKeymap(qwertyLayout as LayoutObject, {
-        displayName: "qwerty",
-        keymapStyle: "staggered",
-        showAllKeys: true,
-      });
-
-      // Test only keys added when showAllKeys is true (not covered by basic staggered test)
-      // Row1: BS added at end
-      expect(result.row1[result.row1.length - 1], "row1 last").toEqual({
-        legends: ["BS", "BS", "BS", "BS"],
-        width: 2,
-      });
-
-      // Row2: Tab added at start
-      expect(result.row2[0], "row2 first").toEqual({
-        legends: ["Tab", "Tab", "Tab", "Tab"],
-        width: 1.5,
-      });
-
-      // Row3: Caps added at start, Enter added at end
-      expect(result.row3[0], "row3 first").toEqual({
-        legends: ["Caps", "Caps", "Caps", "Caps"],
-        width: 1.75,
-      });
-      expect(result.row3[result.row3.length - 1], "row3 last").toEqual({
-        legends: ["Enter", "Enter", "Enter", "Enter"],
-        width: 2.25,
-      });
-
-      // Row4: Shift added at start and end
-      expect(result.row4[0], "row4 first").toEqual({
-        legends: ["Shift", "Shift", "Shift", "Shift"],
-        width: 2.25,
-      });
-      expect(result.row4[result.row4.length - 1], "row4 last").toEqual({
-        legends: ["Shift", "Shift", "Shift", "Shift"],
-        width: 2.75,
-      });
-
-      // Row5: Ctrl, Monke, Alt at start; Alt, Monke, Meta, Ctrl at end
-      expect(result.row5[0], "row5 first").toEqual({
-        legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"],
-        width: 1.25,
-      });
-      expect(result.row5[1], "row5 second").toEqual({
-        legends: ["Monke", "Monke", "Monke", "Monke"],
-        width: 1.25,
-      });
-      expect(result.row5[2], "row5 third").toEqual({
-        legends: ["Alt", "Alt", "Alt", "Alt"],
-        width: 1.25,
-      });
-      expect(result.row5[result.row5.length - 4], "row5 Alt right").toEqual({
-        legends: ["Alt", "Alt", "Alt", "Alt"],
-        width: 1.25,
-      });
-      expect(result.row5[result.row5.length - 3], "row5 Monke right").toEqual({
-        legends: ["Monke", "Monke", "Monke", "Monke"],
-        width: 1.25,
-      });
-      expect(result.row5[result.row5.length - 2], "row5 Meta").toEqual({
-        legends: ["Meta", "Meta", "Meta", "Meta"],
-        width: 1.25,
-      });
-      expect(result.row5[result.row5.length - 1], "row5 last").toEqual({
-        legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"],
-        width: 1.25,
+        });
+        expect(result.row5[1], "row5 right").toEqual({
+          legends: [" ", " ", " ", " "],
+          width: 3,
+          x: 1,
+        });
+      });
+
+      it("converts qwertz split", () => {
+        const result = convertLayoutToKeymap(qwertzLayout as LayoutObject, {
+          displayName: "qwertz",
+          keymapStyle: "split",
+          showAllKeys: false,
+        });
+
+        // Test split-specific differences from staggered (not covered by basic test)
+
+        // Row 1: col7 (index 6) = '7' gets x=8
+        expect(result.row1[6], "row1 key 7").toEqual({
+          legends: ["7", "/", "7", "/"],
+          x: 1,
+        });
+
+        // Row 2: col6 (index 5) = 'z' gets x=8
+        expect(result.row2[5], "row2 key z").toEqual({
+          legends: ["z", "Z", "z", "Z"],
+          x: 1,
+        });
+
+        // Row 3: col6 (index 5) = 'h' gets x=8
+        expect(result.row3[5], "row3 key h").toEqual({
+          legends: ["h", "H", "h", "H"],
+          x: 1,
+        });
+
+        // Row 4: col5 (index 5) = 'b' gets x=8
+        expect(result.row4[5], "row4 key b").toEqual({
+          legends: ["b", "B", "b", "B"],
+          x: 1,
+        });
+
+        // Row 5: split has two keys with gap in middle
+        expect(result.row5.length, "row5 length").toBe(2);
+        expect(result.row5[0], "row5 left").toEqual({
+          legends: [" ", " ", " ", " "],
+          width: 3,
+          x: 3.5,
+          isLayoutIndicator: true,
+        });
+        expect(result.row5[1], "row5 right").toEqual({
+          legends: [" ", " ", " ", " "],
+          width: 3,
+          x: 1,
+        });
       });
-
-      // Also verify total counts are as expected with extra keys
-      expect(result.row1.length, "row1 length").toBe(14);
-      expect(result.row2.length, "row2 length").toBe(14);
-      expect(result.row3.length, "row3 length").toBe(13);
-      expect(result.row4.length, "row4 length").toBe(12);
     });
 
-    it("converts qwerty split", () => {
-      const result = convertLayoutToKeymap(qwertyLayout as LayoutObject, {
-        displayName: "qwerty",
-        keymapStyle: "split",
-        showAllKeys: false,
-      });
-
-      // Test split-specific differences from staggered (not covered by basic test)
-      // Split adds x=8 gap after column 7 for rows 1-4, and row5 has 2 keys with gap
-
-      // Row 1: col7 (index 6) = '7' gets x=8
-      expect(result.row1[6], "row1 key 7").toEqual({
-        legends: ["7", "&", "7", "&"],
-        x: 1,
-      });
-
-      // Row 2: col6 (index 5) = 'y' gets x=8
-      expect(result.row2[5], "row2 key y").toEqual({
-        legends: ["y", "Y", "y", "Y"],
-        x: 1,
-      });
-
-      // Row 3: col6 (index 5) = 'h' gets x=8
-      expect(result.row3[5], "row3 key h").toEqual({
-        legends: ["h", "H", "h", "H"],
-        x: 1,
-      });
-
-      // Row 4: col6 (index 5) = 'n' gets x=8
-      expect(result.row4[5], "row4 key n").toEqual({
-        legends: ["n", "N", "n", "N"],
-        x: 1,
-      });
-
-      // Row 5: split has two keys with gap in middle
-      expect(result.row5.length, "row5 length").toBe(2);
-      expect(result.row5[0], "row5 left").toEqual({
-        legends: [" ", " ", " ", " "],
-        width: 3,
-        x: 3.5,
-        isLayoutIndicator: true,
-      });
-      expect(result.row5[1], "row5 right").toEqual({
-        legends: [" ", " ", " ", " "],
-        width: 3,
-        x: 1,
+    describe("matrix", () => {
+      it("converts qwerty matrix", () => {
+        const result = convertLayoutToKeymap(qwertyLayout as LayoutObject, {
+          displayName: "qwerty",
+          keymapStyle: "matrix",
+          showAllKeys: false,
+        });
+
+        expect(result.row1, "row1").toEqual([
+          { legends: ["1", "!", "1", "!"] },
+          { legends: ["2", "@", "2", "@"] },
+          { legends: ["3", "#", "3", "#"] },
+          { legends: ["4", "$", "4", "$"] },
+          { legends: ["5", "%", "5", "%"] },
+          { legends: ["6", "^", "6", "^"] },
+          { legends: ["7", "&", "7", "&"] },
+          { legends: ["8", "*", "8", "*"] },
+          { legends: ["9", "(", "9", "("] },
+          { legends: ["0", ")", "0", ")"] },
+        ]);
+
+        expect(result.row2, "row2").toEqual([
+          { legends: ["q", "Q", "q", "Q"] },
+          { legends: ["w", "W", "w", "W"] },
+          { legends: ["e", "E", "e", "E"] },
+          { legends: ["r", "R", "r", "R"] },
+          { legends: ["t", "T", "t", "T"] },
+          { legends: ["y", "Y", "y", "Y"] },
+          { legends: ["u", "U", "u", "U"] },
+          { legends: ["i", "I", "i", "I"] },
+          { legends: ["o", "O", "o", "O"] },
+          { legends: ["p", "P", "p", "P"] },
+        ]);
+
+        expect(result.row3, "row3").toEqual([
+          { legends: ["a", "A", "a", "A"] },
+          { legends: ["s", "S", "s", "S"] },
+          { legends: ["d", "D", "d", "D"] },
+          { legends: ["f", "F", "f", "F"], isHoming: true },
+          { legends: ["g", "G", "g", "G"] },
+          { legends: ["h", "H", "h", "H"] },
+          { legends: ["j", "J", "j", "J"], isHoming: true },
+          { legends: ["k", "K", "k", "K"] },
+          { legends: ["l", "L", "l", "L"] },
+          { legends: [";", ":", ";", ":"] },
+        ]);
+
+        expect(result.row4, "row4").toEqual([
+          { legends: ["z", "Z", "z", "Z"] },
+          { legends: ["x", "X", "x", "X"] },
+          { legends: ["c", "C", "c", "C"] },
+          { legends: ["v", "V", "v", "V"] },
+          { legends: ["b", "B", "b", "B"] },
+          { legends: ["n", "N", "n", "N"] },
+          { legends: ["m", "M", "m", "M"] },
+          { legends: [",", "<", ",", "<"] },
+          { legends: [".", ">", ".", ">"] },
+          { legends: ["/", "?", "/", "?"] },
+        ]);
+
+        expect(result.row5, "row5").toEqual([
+          {
+            legends: [" ", " ", " ", " "],
+            width: 4,
+            x: 3,
+            isLayoutIndicator: true,
+          },
+        ]);
+      });
+
+      it("converts qwerty matrix all keys", () => {
+        const result = convertLayoutToKeymap(qwertyLayout as LayoutObject, {
+          displayName: "qwerty",
+          keymapStyle: "matrix",
+          showAllKeys: true,
+        });
+
+        // Test only keys added when showAllKeys is true (not covered by basic matrix test)
+        //Row1: starting with `
+        expect(result.row1[0], "row1 first").toEqual({
+          legends: ["`", "~", "`", "~"],
+        });
+
+        // Row1: BS added at end
+        expect(result.row1[result.row1.length - 1], "row1 last").toEqual({
+          legends: ["BS", "BS", "BS", "BS"],
+        });
+
+        // Row2: Tab added at start
+        expect(result.row2[0], "row2 first").toEqual({
+          legends: ["Tab", "Tab", "Tab", "Tab"],
+        });
+
+        // Row2: Del added at end
+        expect(result.row2[result.row2.length - 1], "row2 last").toEqual({
+          legends: ["Del", "Del", "Del", "Del"],
+        });
+
+        // Row3: Esc added at start
+        expect(result.row3[0], "row3 first").toEqual({
+          legends: ["Esc", "Esc", "Esc", "Esc"],
+        });
+
+        // Row3: ends with '
+        expect(result.row3[result.row3.length - 1], "row3 last").toEqual({
+          legends: ["'", '"', "'", '"'],
+        });
+
+        // Row4: Shift added at start and end
+        expect(result.row4[0], "row4 first").toEqual({
+          legends: ["Shift", "Shift", "Shift", "Shift"],
+        });
+        expect(result.row4[result.row4.length - 1], "row4 last").toEqual({
+          legends: ["Enter", "Enter", "Enter", "Enter"],
+        });
+
+        // Row5: Ctrl, Monke, Alt at start; Alt,  Meta, Ctrl at end
+        expect(result.row5[0], "row5 first").toEqual({
+          legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"],
+        });
+        expect(result.row5[1], "row5 second").toEqual({
+          legends: ["Monke", "Monke", "Monke", "Monke"],
+        });
+        expect(result.row5[2], "row5 third").toEqual({
+          legends: ["Alt", "Alt", "Alt", "Alt"],
+        });
+        expect(result.row5[result.row5.length - 3], "row5 Alt right").toEqual({
+          legends: ["Alt", "Alt", "Alt", "Alt"],
+        });
+        expect(result.row5[result.row5.length - 2], "row5 Meta").toEqual({
+          legends: ["Meta", "Meta", "Meta", "Meta"],
+        });
+        expect(result.row5[result.row5.length - 1], "row5 last").toEqual({
+          legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"],
+        });
+
+        // Also verify total counts are as expected with extra keys
+        expect(result.row1.length, "row1 length").toBe(12);
+        expect(result.row2.length, "row2 length").toBe(12);
+        expect(result.row3.length, "row3 length").toBe(12);
+        expect(result.row4.length, "row4 length").toBe(12);
       });
     });
 
-    it("converts qwertz staggered", () => {
-      const result = convertLayoutToKeymap(qwertzLayout as LayoutObject, {
-        displayName: "qwertz",
-        keymapStyle: "staggered",
-        showAllKeys: false,
-      });
-
-      expect(result.row1, "row1").toEqual([
-        { legends: ["1", "!", "1", "!"] },
-        { legends: ["2", `"`, "2", `"`] },
-        { legends: ["3", "§", "3", "§"] },
-        { legends: ["4", "$", "4", "$"] },
-        { legends: ["5", "%", "5", "%"] },
-        { legends: ["6", "&", "6", "&"] },
-        { legends: ["7", "/", "7", "/"] },
-        { legends: ["8", "(", "8", "("] },
-        { legends: ["9", ")", "9", ")"] },
-        { legends: ["0", "=", "0", "="] },
-        { legends: ["ß", "?", "ß", "?"] },
-        { legends: ["´", "`", "´", "`"] },
-      ]);
-
-      expect(result.row2, "row2").toEqual([
-        { legends: ["q", "Q", "q", "Q"], x: 0.5 },
-        { legends: ["w", "W", "w", "W"] },
-        { legends: ["e", "E", "e", "E"] },
-        { legends: ["r", "R", "r", "R"] },
-        { legends: ["t", "T", "t", "T"] },
-        { legends: ["z", "Z", "z", "Z"] },
-        { legends: ["u", "U", "u", "U"] },
-        { legends: ["i", "I", "i", "I"] },
-        { legends: ["o", "O", "o", "O"] },
-        { legends: ["p", "P", "p", "P"] },
-        { legends: ["ü", "Ü", "ü", "Ü"] },
-        { legends: ["+", "*", "+", "*"] },
-      ]);
-
-      expect(result.row3, "row3").toEqual([
-        { legends: ["a", "A", "a", "A"], x: 1 },
-        { legends: ["s", "S", "s", "S"] },
-        { legends: ["d", "D", "d", "D"] },
-        { legends: ["f", "F", "f", "F"], isHoming: true },
-        { legends: ["g", "G", "g", "G"] },
-        { legends: ["h", "H", "h", "H"] },
-        { legends: ["j", "J", "j", "J"], isHoming: true },
-        { legends: ["k", "K", "k", "K"] },
-        { legends: ["l", "L", "l", "L"] },
-        { legends: ["ö", "Ö", "ö", "Ö"] },
-        { legends: ["ä", "Ä", "ä", "Ä"] },
-        { legends: ["#", "'", "#", "'"] },
-      ]);
-
-      expect(result.row4, "row4").toEqual([
-        { legends: ["<", ">", "<", ">"], x: 0.25 },
-        { legends: ["y", "Y", "y", "Y"] },
-        { legends: ["x", "X", "x", "X"] },
-        { legends: ["c", "C", "c", "C"] },
-        { legends: ["v", "V", "v", "V"] },
-        { legends: ["b", "B", "b", "B"] },
-        { legends: ["n", "N", "n", "N"] },
-        { legends: ["m", "M", "m", "M"] },
-        { legends: [",", ";", ",", ";"] },
-        { legends: [".", ":", ".", ":"] },
-        { legends: ["-", "_", "-", "_"] },
-      ]);
-
-      expect(result.row5, "row5").toEqual([
-        {
+    describe("split matrix", () => {
+      it("converts qwerty split  matrix", () => {
+        const result = convertLayoutToKeymap(qwertyLayout as LayoutObject, {
+          displayName: "qwerty",
+          keymapStyle: "split_matrix",
+          showAllKeys: false,
+        });
+
+        // Row 1: col6 (index 5) = '6' gets x=8
+        expect(result.row1[5], "row1 key 7").toEqual({
+          legends: ["6", "^", "6", "^"],
+          x: 1,
+        });
+
+        // Row 2: col6 (index 5) = 'y' gets x=8
+        expect(result.row2[5], "row2 key y").toEqual({
+          legends: ["y", "Y", "y", "Y"],
+          x: 1,
+        });
+
+        // Row 3: col6 (index 5) = 'h' gets x=8
+        expect(result.row3[5], "row3 key h").toEqual({
+          legends: ["h", "H", "h", "H"],
+          x: 1,
+        });
+
+        // Row 4: col6 (index 5) = 'n' gets x=8
+        expect(result.row4[5], "row4 key n").toEqual({
+          legends: ["n", "N", "n", "N"],
+          x: 1,
+        });
+
+        // Row 5: split has two keys with gap in middle
+        expect(result.row5.length, "row5 length").toBe(2);
+        expect(result.row5[0], "row5 left").toEqual({
           legends: [" ", " ", " ", " "],
-          width: 6,
-          x: 3.5,
+          width: 3,
+          x: 2,
           isLayoutIndicator: true,
-        },
-      ]);
-    });
-
-    it("converts qwertz staggered all keys", () => {
-      const result = convertLayoutToKeymap(qwertzLayout as LayoutObject, {
-        displayName: "qwertz",
-        keymapStyle: "staggered",
-        showAllKeys: true,
-      });
-
-      // Test only keys added when showAllKeys is true (not covered by basic staggered test)
-
-      // Row1: BS added at end
-      expect(result.row1[result.row1.length - 1], "row1 last").toEqual({
-        legends: ["BS", "BS", "BS", "BS"],
-        width: 2,
-      });
-
-      // Row2: Tab added at start, Enter (with height) added at end
-      expect(result.row2[0], "row2 first").toEqual({
-        legends: ["Tab", "Tab", "Tab", "Tab"],
-        width: 1.5,
-      });
-      expect(result.row2[result.row2.length - 1], "row2 last").toEqual({
-        legends: ["Enter", "Enter", "Enter", "Enter"],
-        height: 2,
-        width: 1.5,
-      });
-
-      // Row3: Caps added at start
-      expect(result.row3[0], "row3 first").toEqual({
-        legends: ["Caps", "Caps", "Caps", "Caps"],
-        width: 1.75,
-      });
-
-      // Row4: Shift added at start and end
-      expect(result.row4[0], "row4 first").toEqual({
-        legends: ["Shift", "Shift", "Shift", "Shift"],
-        width: 1.25,
-      });
-      expect(result.row4[result.row4.length - 1], "row4 last").toEqual({
-        legends: ["Shift", "Shift", "Shift", "Shift"],
-        width: 2.75,
-      });
-
-      // Row5: Ctrl, Monke, Alt at start; Alt, Monke, Meta, Ctrl at end
-      expect(result.row5[0], "row5 first").toEqual({
-        legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"],
-        width: 1.25,
-      });
-      expect(result.row5[1], "row5 second").toEqual({
-        legends: ["Monke", "Monke", "Monke", "Monke"],
-        width: 1.25,
-      });
-      expect(result.row5[2], "row5 third").toEqual({
-        legends: ["Alt", "Alt", "Alt", "Alt"],
-        width: 1.25,
-      });
-      expect(result.row5[result.row5.length - 4], "row5 Alt right").toEqual({
-        legends: ["Alt", "Alt", "Alt", "Alt"],
-        width: 1.25,
-      });
-      expect(result.row5[result.row5.length - 3], "row5 Monke right").toEqual({
-        legends: ["Monke", "Monke", "Monke", "Monke"],
-        width: 1.25,
-      });
-      expect(result.row5[result.row5.length - 2], "row5 Meta").toEqual({
-        legends: ["Meta", "Meta", "Meta", "Meta"],
-        width: 1.25,
-      });
-      expect(result.row5[result.row5.length - 1], "row5 last").toEqual({
-        legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"],
-        width: 1.25,
+        });
+        expect(result.row5[1], "row5 right").toEqual({
+          legends: [" ", " ", " ", " "],
+          width: 3,
+          x: 1,
+        });
       });
-
-      // Also verify total counts are as expected with extra keys
-      expect(result.row1.length, "row1 length").toBe(14);
-      expect(result.row2.length, "row2 length").toBe(14);
-      expect(result.row3.length, "row3 length").toBe(13);
-      expect(result.row4.length, "row4 length").toBe(13);
     });
 
-    it("converts qwertz split", () => {
-      const result = convertLayoutToKeymap(qwertzLayout as LayoutObject, {
-        displayName: "qwertz",
-        keymapStyle: "split",
-        showAllKeys: false,
+    describe("steno", () => {
+      it("converts steno", () => {
+        const result = convertLayoutToKeymap({} as any, {
+          displayName: "steno",
+          keymapStyle: "steno",
+          showAllKeys: false,
+        });
+
+        expect(result.row1, "row1").toEqual([]);
+        expect(result.row2, "row2").toEqual([
+          { legends: ["s", "S", "s", "S"], height: 2 },
+          { legends: ["t", "T", "t", "T"] },
+          { legends: ["p", "P", "p", "P"] },
+          { legends: ["h", "H", "h", "H"] },
+          { legends: ["*", "*", "*", "*"], height: 2 },
+          { legends: ["f", "F", "f", "F"] },
+          { legends: ["p", "P", "p", "P"] },
+          { legends: ["l", "L", "l", "L"] },
+          { legends: ["t", "T", "t", "T"] },
+          { legends: ["d", "D", "d", "D"] },
+        ]);
+        expect(result.row3, "row3").toEqual([
+          { legends: ["k", "K", "k", "K"], x: 1 },
+          { legends: ["w", "W", "w", "W"] },
+          { legends: ["r", "R", "r", "R"] },
+          { legends: ["r", "R", "r", "R"], x: 1 },
+          { legends: ["b", "B", "b", "B"] },
+          { legends: ["g", "G", "g", "G"] },
+          { legends: ["s", "S", "s", "S"] },
+          { legends: ["z", "Z", "z", "Z"] },
+        ]);
+        expect(result.row4, "row4").toEqual([
+          { legends: ["a", "A", "a", "A"], x: 2.25 },
+          { legends: ["o", "O", "o", "O"] },
+          { legends: ["e", "E", "e", "E"], x: 0.5 },
+          { legends: ["u", "U", "u", "U"] },
+        ]);
+        expect(result.row5, "row5").toEqual([]);
+      });
+
+      it("converts steno matrix", () => {
+        const result = convertLayoutToKeymap({} as any, {
+          displayName: "steno matrix",
+          keymapStyle: "steno_matrix",
+          showAllKeys: false,
+        });
+
+        expect(result.row1, "row1").toEqual([]);
+        expect(result.row2, "row2").toEqual([
+          { legends: ["s", "S", "s", "S"] },
+          { legends: ["t", "T", "t", "T"] },
+          { legends: ["p", "P", "p", "P"] },
+          { legends: ["h", "H", "h", "H"] },
+          { legends: ["*", "*", "*", "*"] },
+          { legends: ["f", "F", "f", "F"], x: 1 },
+          { legends: ["p", "P", "p", "P"] },
+          { legends: ["l", "L", "l", "L"] },
+          { legends: ["t", "T", "t", "T"] },
+          { legends: ["d", "D", "d", "D"] },
+        ]);
+        expect(result.row3, "row3").toEqual([
+          { legends: ["s", "S", "s", "S"] },
+          { legends: ["k", "K", "k", "K"] },
+          { legends: ["w", "W", "w", "W"] },
+          { legends: ["r", "R", "r", "R"] },
+          { legends: ["*", "*", "*", "*"] },
+          { legends: ["r", "R", "r", "R"], x: 1 },
+          { legends: ["b", "B", "b", "B"] },
+          { legends: ["g", "G", "g", "G"] },
+          { legends: ["s", "S", "s", "S"] },
+          { legends: ["z", "Z", "z", "Z"] },
+        ]);
+        expect(result.row4, "row4").toEqual([
+          { legends: ["a", "A", "a", "A"], x: 3 },
+          { legends: ["o", "O", "o", "O"] },
+          { legends: ["e", "E", "e", "E"], x: 1 },
+          { legends: ["u", "U", "u", "U"] },
+        ]);
+        expect(result.row5, "row5").toEqual([]);
       });
-
-      // Test split-specific differences from staggered (not covered by basic test)
-
-      // Row 1: col7 (index 6) = '7' gets x=8
-      expect(result.row1[6], "row1 key 7").toEqual({
-        legends: ["7", "/", "7", "/"],
-        x: 1,
-      });
-
-      // Row 2: col6 (index 5) = 'z' gets x=8
-      expect(result.row2[5], "row2 key z").toEqual({
-        legends: ["z", "Z", "z", "Z"],
-        x: 1,
-      });
-
-      // Row 3: col6 (index 5) = 'h' gets x=8
-      expect(result.row3[5], "row3 key h").toEqual({
-        legends: ["h", "H", "h", "H"],
-        x: 1,
-      });
-
-      // Row 4: col5 (index 5) = 'b' gets x=8
-      expect(result.row4[5], "row4 key b").toEqual({
-        legends: ["b", "B", "b", "B"],
-        x: 1,
-      });
-
-      // Row 5: split has two keys with gap in middle
-      expect(result.row5.length, "row5 length").toBe(2);
-      expect(result.row5[0], "row5 left").toEqual({
-        legends: [" ", " ", " ", " "],
-        width: 3,
-        x: 3.5,
-        isLayoutIndicator: true,
-      });
-      expect(result.row5[1], "row5 right").toEqual({
-        legends: [" ", " ", " ", " "],
-        width: 3,
-        x: 1,
-      });
-    });
-  });
-
-  it("converts qwerty matrix", () => {
-    const result = convertLayoutToKeymap(qwertyLayout as LayoutObject, {
-      displayName: "qwerty",
-      keymapStyle: "matrix",
-      showAllKeys: false,
-    });
-
-    expect(result.row1, "row1").toEqual([
-      { legends: ["1", "!", "1", "!"] },
-      { legends: ["2", "@", "2", "@"] },
-      { legends: ["3", "#", "3", "#"] },
-      { legends: ["4", "$", "4", "$"] },
-      { legends: ["5", "%", "5", "%"] },
-      { legends: ["6", "^", "6", "^"] },
-      { legends: ["7", "&", "7", "&"] },
-      { legends: ["8", "*", "8", "*"] },
-      { legends: ["9", "(", "9", "("] },
-      { legends: ["0", ")", "0", ")"] },
-    ]);
-
-    expect(result.row2, "row2").toEqual([
-      { legends: ["q", "Q", "q", "Q"] },
-      { legends: ["w", "W", "w", "W"] },
-      { legends: ["e", "E", "e", "E"] },
-      { legends: ["r", "R", "r", "R"] },
-      { legends: ["t", "T", "t", "T"] },
-      { legends: ["y", "Y", "y", "Y"] },
-      { legends: ["u", "U", "u", "U"] },
-      { legends: ["i", "I", "i", "I"] },
-      { legends: ["o", "O", "o", "O"] },
-      { legends: ["p", "P", "p", "P"] },
-    ]);
-
-    expect(result.row3, "row3").toEqual([
-      { legends: ["a", "A", "a", "A"] },
-      { legends: ["s", "S", "s", "S"] },
-      { legends: ["d", "D", "d", "D"] },
-      { legends: ["f", "F", "f", "F"], isHoming: true },
-      { legends: ["g", "G", "g", "G"] },
-      { legends: ["h", "H", "h", "H"] },
-      { legends: ["j", "J", "j", "J"], isHoming: true },
-      { legends: ["k", "K", "k", "K"] },
-      { legends: ["l", "L", "l", "L"] },
-      { legends: [";", ":", ";", ":"] },
-    ]);
-
-    expect(result.row4, "row4").toEqual([
-      { legends: ["z", "Z", "z", "Z"] },
-      { legends: ["x", "X", "x", "X"] },
-      { legends: ["c", "C", "c", "C"] },
-      { legends: ["v", "V", "v", "V"] },
-      { legends: ["b", "B", "b", "B"] },
-      { legends: ["n", "N", "n", "N"] },
-      { legends: ["m", "M", "m", "M"] },
-      { legends: [",", "<", ",", "<"] },
-      { legends: [".", ">", ".", ">"] },
-      { legends: ["/", "?", "/", "?"] },
-    ]);
-
-    expect(result.row5, "row5").toEqual([
-      {
-        legends: [" ", " ", " ", " "],
-        width: 4,
-        x: 3,
-        isLayoutIndicator: true,
-      },
-    ]);
-  });
-
-  it("converts qwerty matrix all keys", () => {
-    const result = convertLayoutToKeymap(qwertyLayout as LayoutObject, {
-      displayName: "qwerty",
-      keymapStyle: "matrix",
-      showAllKeys: true,
-    });
-
-    // Test only keys added when showAllKeys is true (not covered by basic matrix test)
-    //Row1: starting with `
-    expect(result.row1[0], "row1 first").toEqual({
-      legends: ["`", "~", "`", "~"],
-    });
-
-    // Row1: BS added at end
-    expect(result.row1[result.row1.length - 1], "row1 last").toEqual({
-      legends: ["BS", "BS", "BS", "BS"],
-    });
-
-    // Row2: Tab added at start
-    expect(result.row2[0], "row2 first").toEqual({
-      legends: ["Tab", "Tab", "Tab", "Tab"],
-    });
-
-    // Row2: Del added at end
-    expect(result.row2[result.row2.length - 1], "row2 last").toEqual({
-      legends: ["Del", "Del", "Del", "Del"],
-    });
-
-    // Row3: Esc added at start
-    expect(result.row3[0], "row3 first").toEqual({
-      legends: ["Esc", "Esc", "Esc", "Esc"],
-    });
-
-    // Row3: ends with '
-    expect(result.row3[result.row3.length - 1], "row3 last").toEqual({
-      legends: ["'", '"', "'", '"'],
-    });
-
-    // Row4: Shift added at start and end
-    expect(result.row4[0], "row4 first").toEqual({
-      legends: ["Shift", "Shift", "Shift", "Shift"],
-    });
-    expect(result.row4[result.row4.length - 1], "row4 last").toEqual({
-      legends: ["Enter", "Enter", "Enter", "Enter"],
-    });
-
-    // Row5: Ctrl, Monke, Alt at start; Alt,  Meta, Ctrl at end
-    expect(result.row5[0], "row5 first").toEqual({
-      legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"],
-    });
-    expect(result.row5[1], "row5 second").toEqual({
-      legends: ["Monke", "Monke", "Monke", "Monke"],
-    });
-    expect(result.row5[2], "row5 third").toEqual({
-      legends: ["Alt", "Alt", "Alt", "Alt"],
-    });
-    expect(result.row5[result.row5.length - 3], "row5 Alt right").toEqual({
-      legends: ["Alt", "Alt", "Alt", "Alt"],
-    });
-    expect(result.row5[result.row5.length - 2], "row5 Meta").toEqual({
-      legends: ["Meta", "Meta", "Meta", "Meta"],
-    });
-    expect(result.row5[result.row5.length - 1], "row5 last").toEqual({
-      legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"],
-    });
-
-    // Also verify total counts are as expected with extra keys
-    expect(result.row1.length, "row1 length").toBe(12);
-    expect(result.row2.length, "row2 length").toBe(12);
-    expect(result.row3.length, "row3 length").toBe(12);
-    expect(result.row4.length, "row4 length").toBe(12);
-  });
-
-  it("converts qwerty split  matrix", () => {
-    const result = convertLayoutToKeymap(qwertyLayout as LayoutObject, {
-      displayName: "qwerty",
-      keymapStyle: "split_matrix",
-      showAllKeys: false,
-    });
-
-    // Row 1: col6 (index 5) = '6' gets x=8
-    expect(result.row1[5], "row1 key 7").toEqual({
-      legends: ["6", "^", "6", "^"],
-      x: 1,
-    });
-
-    // Row 2: col6 (index 5) = 'y' gets x=8
-    expect(result.row2[5], "row2 key y").toEqual({
-      legends: ["y", "Y", "y", "Y"],
-      x: 1,
-    });
-
-    // Row 3: col6 (index 5) = 'h' gets x=8
-    expect(result.row3[5], "row3 key h").toEqual({
-      legends: ["h", "H", "h", "H"],
-      x: 1,
-    });
-
-    // Row 4: col6 (index 5) = 'n' gets x=8
-    expect(result.row4[5], "row4 key n").toEqual({
-      legends: ["n", "N", "n", "N"],
-      x: 1,
-    });
-
-    // Row 5: split has two keys with gap in middle
-    expect(result.row5.length, "row5 length").toBe(2);
-    expect(result.row5[0], "row5 left").toEqual({
-      legends: [" ", " ", " ", " "],
-      width: 3,
-      x: 2,
-      isLayoutIndicator: true,
-    });
-    expect(result.row5[1], "row5 right").toEqual({
-      legends: [" ", " ", " ", " "],
-      width: 3,
-      x: 1,
     });
   });
-
-  it("converts steno", () => {
-    const result = convertLayoutToKeymap({} as any, {
-      displayName: "steno",
-      keymapStyle: "steno",
-      showAllKeys: false,
-    });
-
-    expect(result.row1, "row1").toEqual([]);
-    expect(result.row2, "row2").toEqual([
-      { legends: ["s", "S", "s", "S"], height: 2 },
-      { legends: ["t", "T", "t", "T"] },
-      { legends: ["p", "P", "p", "P"] },
-      { legends: ["h", "H", "h", "H"] },
-      { legends: ["*", "*", "*", "*"], height: 2 },
-      { legends: ["f", "F", "f", "F"] },
-      { legends: ["p", "P", "p", "P"] },
-      { legends: ["l", "L", "l", "L"] },
-      { legends: ["t", "T", "t", "T"] },
-      { legends: ["d", "D", "d", "D"] },
-    ]);
-    expect(result.row3, "row3").toEqual([
-      { legends: ["k", "K", "k", "K"], x: 1 },
-      { legends: ["w", "W", "w", "W"] },
-      { legends: ["r", "R", "r", "R"] },
-      { legends: ["r", "R", "r", "R"], x: 1 },
-      { legends: ["b", "B", "b", "B"] },
-      { legends: ["g", "G", "g", "G"] },
-      { legends: ["s", "S", "s", "S"] },
-      { legends: ["z", "Z", "z", "Z"] },
-    ]);
-    expect(result.row4, "row4").toEqual([
-      { legends: ["a", "A", "a", "A"], x: 2.25 },
-      { legends: ["o", "O", "o", "O"] },
-      { legends: ["e", "E", "e", "E"], x: 0.5 },
-      { legends: ["u", "U", "u", "U"] },
-    ]);
-    expect(result.row5, "row5").toEqual([]);
-  });
-
-  it("converts steno matrix", () => {
-    const result = convertLayoutToKeymap({} as any, {
-      displayName: "steno matrix",
-      keymapStyle: "steno_matrix",
-      showAllKeys: false,
-    });
-
-    expect(result.row1, "row1").toEqual([]);
-    expect(result.row2, "row2").toEqual([
-      { legends: ["s", "S", "s", "S"] },
-      { legends: ["t", "T", "t", "T"] },
-      { legends: ["p", "P", "p", "P"] },
-      { legends: ["h", "H", "h", "H"] },
-      { legends: ["*", "*", "*", "*"] },
-      { legends: ["f", "F", "f", "F"], x: 1 },
-      { legends: ["p", "P", "p", "P"] },
-      { legends: ["l", "L", "l", "L"] },
-      { legends: ["t", "T", "t", "T"] },
-      { legends: ["d", "D", "d", "D"] },
-    ]);
-    expect(result.row3, "row3").toEqual([
-      { legends: ["s", "S", "s", "S"] },
-      { legends: ["k", "K", "k", "K"] },
-      { legends: ["w", "W", "w", "W"] },
-      { legends: ["r", "R", "r", "R"] },
-      { legends: ["*", "*", "*", "*"] },
-      { legends: ["r", "R", "r", "R"], x: 1 },
-      { legends: ["b", "B", "b", "B"] },
-      { legends: ["g", "G", "g", "G"] },
-      { legends: ["s", "S", "s", "S"] },
-      { legends: ["z", "Z", "z", "Z"] },
-    ]);
-    expect(result.row4, "row4").toEqual([
-      { legends: ["a", "A", "a", "A"], x: 3 },
-      { legends: ["o", "O", "o", "O"] },
-      { legends: ["e", "E", "e", "E"], x: 1 },
-      { legends: ["u", "U", "u", "U"] },
-    ]);
-    expect(result.row5, "row5").toEqual([]);
-  });
 });
diff --git a/frontend/src/ts/components/pages/test/Keymap.tsx b/frontend/src/ts/components/pages/test/Keymap.tsx
index 938b3a1b0ed9..1c6bece722bd 100644
--- a/frontend/src/ts/components/pages/test/Keymap.tsx
+++ b/frontend/src/ts/components/pages/test/Keymap.tsx
@@ -122,7 +122,8 @@ function Key(
   const [flashTick, setFlashTick] = createSignal(0);
   const [flashCorrect, setFlashCorrect] = createSignal(true);
   const isNext = () =>
-    !isSteno() && getKeymapHighlightKey() === props.legends[props.layer];
+    !isSteno() &&
+    props.legends.some((legend) => legend === getKeymapHighlightKey());
 
   keymapEvent.useListener((event) => {
     if (event.mode !== "flash" || isSteno()) return;

From 6eadde4183153974355b00b8af0a56450a502e0c Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sat, 20 Jun 2026 13:43:17 +0200
Subject: [PATCH 21/61] handle row5 with two keys, fix flash issue

---
 .../pages/test/keymapConverter.spec.ts        | 140 ++++++++++++++++++
 .../src/ts/components/pages/test/Keymap.tsx   |  16 +-
 .../components/pages/test/keymapConverter.ts  |  46 ++++--
 3 files changed, 185 insertions(+), 17 deletions(-)

diff --git a/frontend/__tests__/components/pages/test/keymapConverter.spec.ts b/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
index 27c6bc400a97..23abf1078544 100644
--- a/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
+++ b/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
@@ -3,6 +3,7 @@ import { convertLayoutToKeymap } from "../../../../src/ts/components/pages/test/
 
 import qwertyLayout from "../../../../static/layouts/qwerty.json";
 import qwertzLayout from "../../../../static/layouts/qwertz.json";
+import handsdownLayout from "../../../../static/layouts/handsdown_promethium.json";
 
 import { LayoutObject } from "@monkeytype/schemas/layouts";
 
@@ -318,6 +319,39 @@ describe("keymap converter", () => {
         expect(result.row3.length, "row3 length").toBe(13);
         expect(result.row4.length, "row4 length").toBe(13);
       });
+
+      it("converts handsdown", () => {
+        const result = convertLayoutToKeymap(handsdownLayout as LayoutObject, {
+          displayName: "handsdown",
+          keymapStyle: "staggered",
+          showAllKeys: false,
+        });
+
+        expect(result.row5, "row5").toEqual([
+          { legends: ["r", "R", "r", "R"], x: 4 },
+          {
+            legends: [" ", " ", " ", " "],
+            isLayoutIndicator: true,
+            width: 6,
+          },
+        ]);
+      });
+      it("converts handsdown full", () => {
+        const result = convertLayoutToKeymap(handsdownLayout as LayoutObject, {
+          displayName: "handsdown",
+          keymapStyle: "staggered",
+          showAllKeys: true,
+        });
+
+        expect(result.row5[3], "row5 extra key").toEqual({
+          legends: ["r", "R", "r", "R"],
+        });
+        expect(result.row5[4], "row5 space key").toEqual({
+          legends: [" ", " ", " ", " "],
+          isLayoutIndicator: true,
+          width: 5.25,
+        });
+      });
     });
 
     describe("split", () => {
@@ -417,6 +451,42 @@ describe("keymap converter", () => {
           x: 1,
         });
       });
+
+      it("converts handsdown", () => {
+        const result = convertLayoutToKeymap(handsdownLayout as LayoutObject, {
+          displayName: "handsdown",
+          keymapStyle: "split",
+          showAllKeys: false,
+        });
+
+        expect(result.row5, "row5").toEqual([
+          { legends: ["r", "R", "r", "R"], x: 5.5 },
+          {
+            legends: [" ", " ", " ", " "],
+            isLayoutIndicator: true,
+            width: 3,
+            x: 1,
+          },
+        ]);
+      });
+      it("converts handsdown full", () => {
+        const result = convertLayoutToKeymap(handsdownLayout as LayoutObject, {
+          displayName: "handsdown",
+          keymapStyle: "split",
+          showAllKeys: true,
+        });
+
+        expect(result.row5[3], "row5 extra key").toEqual({
+          legends: ["r", "R", "r", "R"],
+          width: 3,
+        });
+        expect(result.row5[4], "row5 space key").toEqual({
+          legends: [" ", " ", " ", " "],
+          isLayoutIndicator: true,
+          width: 3.5,
+          x: 1,
+        });
+      });
     });
 
     describe("matrix", () => {
@@ -561,6 +631,40 @@ describe("keymap converter", () => {
         expect(result.row3.length, "row3 length").toBe(12);
         expect(result.row4.length, "row4 length").toBe(12);
       });
+
+      it("converts handsdown", () => {
+        const result = convertLayoutToKeymap(handsdownLayout as LayoutObject, {
+          displayName: "handsdown",
+          keymapStyle: "matrix",
+          showAllKeys: false,
+        });
+
+        expect(result.row5, "row5").toEqual([
+          { legends: ["r", "R", "r", "R"], width: 3, x: 2 },
+          {
+            legends: [" ", " ", " ", " "],
+            isLayoutIndicator: true,
+            width: 3,
+          },
+        ]);
+      });
+      it("converts handsdown full", () => {
+        const result = convertLayoutToKeymap(handsdownLayout as LayoutObject, {
+          displayName: "handsdown",
+          keymapStyle: "matrix",
+          showAllKeys: true,
+        });
+
+        expect(result.row5[3], "row5 extra key").toEqual({
+          legends: ["r", "R", "r", "R"],
+          width: 3,
+        });
+        expect(result.row5[4], "row5 space key").toEqual({
+          legends: [" ", " ", " ", " "],
+          isLayoutIndicator: true,
+          width: 3,
+        });
+      });
     });
 
     describe("split matrix", () => {
@@ -609,6 +713,42 @@ describe("keymap converter", () => {
           x: 1,
         });
       });
+
+      it("converts handsdown", () => {
+        const result = convertLayoutToKeymap(handsdownLayout as LayoutObject, {
+          displayName: "handsdown",
+          keymapStyle: "split_matrix",
+          showAllKeys: false,
+        });
+
+        expect(result.row5, "row5").toEqual([
+          { legends: ["r", "R", "r", "R"], width: 3, x: 2 },
+          {
+            legends: [" ", " ", " ", " "],
+            isLayoutIndicator: true,
+            width: 3,
+            x: 1,
+          },
+        ]);
+      });
+      it("converts handsdown full", () => {
+        const result = convertLayoutToKeymap(handsdownLayout as LayoutObject, {
+          displayName: "handsdown",
+          keymapStyle: "split_matrix",
+          showAllKeys: true,
+        });
+
+        expect(result.row5[3], "row5 extra key").toEqual({
+          legends: ["r", "R", "r", "R"],
+          width: 3,
+        });
+        expect(result.row5[4], "row5 space key").toEqual({
+          legends: [" ", " ", " ", " "],
+          isLayoutIndicator: true,
+          width: 3,
+          x: 1,
+        });
+      });
     });
 
     describe("steno", () => {
diff --git a/frontend/src/ts/components/pages/test/Keymap.tsx b/frontend/src/ts/components/pages/test/Keymap.tsx
index 1c6bece722bd..8bae891ef599 100644
--- a/frontend/src/ts/components/pages/test/Keymap.tsx
+++ b/frontend/src/ts/components/pages/test/Keymap.tsx
@@ -123,13 +123,19 @@ function Key(
   const [flashCorrect, setFlashCorrect] = createSignal(true);
   const isNext = () =>
     !isSteno() &&
-    props.legends.some((legend) => legend === getKeymapHighlightKey());
+    props.legends?.some((legend) => legend === getKeymapHighlightKey());
 
   keymapEvent.useListener((event) => {
-    if (event.mode !== "flash" || isSteno()) return;
-    if (event.key !== props.legends[props.layer]) return;
-    setFlashCorrect(event.correct ?? true);
-    setFlashTick((t) => t + 1);
+    if (
+      event.mode === "flash" &&
+      !isSteno() &&
+      event.key === props.legends[props.layer]
+    ) {
+      setFlashCorrect(event.correct ?? true);
+      setFlashTick((t) => t + 1);
+    } else {
+      setFlashTick(0);
+    }
   });
 
   return (
diff --git a/frontend/src/ts/components/pages/test/keymapConverter.ts b/frontend/src/ts/components/pages/test/keymapConverter.ts
index 08f884cfe826..70423697a4cb 100644
--- a/frontend/src/ts/components/pages/test/keymapConverter.ts
+++ b/frontend/src/ts/components/pages/test/keymapConverter.ts
@@ -55,8 +55,9 @@ function convertStaggered(
 ): KeyboardDefinition {
   const isSplit = options.keymapStyle === "split";
   const isIso = layout.type === "iso";
+  const hasRow5ExtraKey = layout.keys.row5.length !== 1;
 
-  if (isSplit && layout.keys.row5.length === 1) {
+  if (isSplit && !hasRow5ExtraKey) {
     layout.keys.row5.push(buildLegends([" "]));
   }
 
@@ -68,6 +69,10 @@ function convertStaggered(
       return undefined;
     };
 
+  const layoutIndicatorIndex = layout.keys.row5.findIndex(
+    (it) => it.at(0) === " ",
+  );
+
   const result = convertBase(layout, options, {
     row1: {
       x: calcGap({ col1Gap: 0, splitCol: 7 }),
@@ -84,17 +89,28 @@ function convertStaggered(
     },
     row4: { x: calcGap({ col1Gap: isIso ? 0.25 : 1.5 }) },
     row5: {
-      x: calcGap({ col1Gap: 3.5, splitCol: 1 }),
+      x: calcGap({
+        col1Gap: hasRow5ExtraKey ? (isSplit ? 5.5 : 4) : 3.5,
+        splitCol: 1,
+      }),
       width: ({ col }) => {
+        if (
+          (!options.showAllKeys || !isSplit) &&
+          layout.keys.row5[col]?.at(0) !== " "
+        ) {
+          return undefined;
+        }
         if (isSplit) {
-          return (
-            (options.showAllKeys ? { 0: 3.5, 1: 3 } : { 0: 3, 1: 3 })[col] ??
-            undefined
-          );
+          if (options.showAllKeys) {
+            return col === layoutIndicatorIndex ? 3.5 : 3;
+          } else {
+            return 3;
+          }
         }
-        return options.showAllKeys ? 6.25 : 6;
+        if (options.showAllKeys) return hasRow5ExtraKey ? 5.25 : 6.25;
+        return 6;
       },
-      isLayoutIndicator: ({ col }) => col === 0,
+      isLayoutIndicator: ({ col }) => col === layoutIndicatorIndex,
     },
   });
 
@@ -178,8 +194,9 @@ function convertMatrix(
   options: ConvertOptions,
 ): KeyboardDefinition {
   const isSplit = options.keymapStyle === "split_matrix";
+  const hasRow5ExtraKey = layout.keys.row5.length !== 1;
 
-  if (isSplit && layout.keys.row5.length === 1) {
+  if (isSplit && !hasRow5ExtraKey) {
     layout.keys.row5.push(buildLegends([" "]));
   }
 
@@ -191,6 +208,10 @@ function convertMatrix(
       return undefined;
     };
 
+  const layoutIndicatorIndex = layout.keys.row5.findIndex(
+    (it) => it.at(0) === " ",
+  );
+
   const result = convertBase(layout, options, {
     row1: {
       skip: ({ col }) => (!options.showAllKeys && col === 0) || col > 10,
@@ -210,9 +231,10 @@ function convertMatrix(
       x: calcGap({}),
     },
     row5: {
-      x: calcGap({ col1Gap: isSplit ? 2 : 3, splitCol: 1 }),
-      width: () => (isSplit ? 3 : options.showAllKeys ? 6 : 4),
-      isLayoutIndicator: ({ col }) => col === 0,
+      x: calcGap({ col1Gap: isSplit || hasRow5ExtraKey ? 2 : 3, splitCol: 1 }),
+      width: () =>
+        isSplit || hasRow5ExtraKey ? 3 : options.showAllKeys ? 6 : 4,
+      isLayoutIndicator: ({ col }) => col === layoutIndicatorIndex,
     },
   });
 

From 4e7919093c9fce502c36b72048c630633070be3c Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sat, 20 Jun 2026 13:50:12 +0200
Subject: [PATCH 22/61] move

---
 frontend/src/html/pages/test.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/html/pages/test.html b/frontend/src/html/pages/test.html
index 40fa5c8af812..2e990ee3e70a 100644
--- a/frontend/src/html/pages/test.html
+++ b/frontend/src/html/pages/test.html
@@ -65,8 +65,8 @@
 
     <div id="compositionDisplay"></div>
 
-    <div id="keymap" class="hidden"></div>
     <mount data-component="keymap"></mount>
+    <div id="keymap" class="hidden"></div>
 
     <button
       id="restartTestButton"

From ce634f2839c424c458fd193ddfa242089586abae Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sat, 20 Jun 2026 14:02:24 +0200
Subject: [PATCH 23/61] dont shift numrow on mac

---
 .../src/ts/components/pages/test/Keymap.tsx   | 26 ++++++++++++-------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/frontend/src/ts/components/pages/test/Keymap.tsx b/frontend/src/ts/components/pages/test/Keymap.tsx
index 8bae891ef599..f6584aeca201 100644
--- a/frontend/src/ts/components/pages/test/Keymap.tsx
+++ b/frontend/src/ts/components/pages/test/Keymap.tsx
@@ -13,7 +13,7 @@ import {
 } from "../../../states/test";
 import { getTheme } from "../../../states/theme";
 import { cn } from "../../../utils/cn";
-import { typedEntries } from "../../../utils/misc";
+import { isMacLike, typedEntries } from "../../../utils/misc";
 import { Anime } from "../../common/anime";
 import { Button } from "../../common/Button";
 import {
@@ -34,7 +34,6 @@ export function Keymap() {
 }
 
 function Keyboard(props: { displayName: string; layoutData: LayoutObject }) {
-  //TODO check for mac specific shift+capslock
   const layer = createMemo(() => {
     switch (getConfig.keymapLegendStyle) {
       case "blank":
@@ -101,7 +100,9 @@ function KeyboardDefinitionRenderer(props: {
         <Show when={rowId !== "row1" || props.showFirstRow}>
           <div class="flex h-8 flex-row">
             <For each={keys}>
-              {(key) => <Key {...key} layer={props.layer} />}
+              {(key) => (
+                <Key {...key} isNumRow={rowId === "row1"} layer={props.layer} />
+              )}
             </For>
           </div>
         </Show>
@@ -112,6 +113,7 @@ function KeyboardDefinitionRenderer(props: {
 
 function Key(
   props: {
+    isNumRow: boolean;
     layer: number;
   } & KeyDefinition,
 ) {
@@ -119,6 +121,14 @@ function Key(
     getConfig.keymapStyle === "steno" ||
     getConfig.keymapStyle === "steno_matrix";
 
+  const label = () => {
+    const layer =
+      props.isNumRow && isMacLike() && isCapsLockOn()
+        ? props.layer - 1
+        : props.layer;
+    return props.legends[layer];
+  };
+
   const [flashTick, setFlashTick] = createSignal(0);
   const [flashCorrect, setFlashCorrect] = createSignal(true);
   const isNext = () =>
@@ -126,11 +136,7 @@ function Key(
     props.legends?.some((legend) => legend === getKeymapHighlightKey());
 
   keymapEvent.useListener((event) => {
-    if (
-      event.mode === "flash" &&
-      !isSteno() &&
-      event.key === props.legends[props.layer]
-    ) {
+    if (event.mode === "flash" && !isSteno() && event.key === label()) {
       setFlashCorrect(event.correct ?? true);
       setFlashTick((t) => t + 1);
     } else {
@@ -142,7 +148,7 @@ function Key(
     <Anime
       class={cn(
         "relative flex items-center justify-center rounded border-2 border-bg bg-sub-alt",
-        (props.legends[props.layer] ?? "").length >= 3 && "text-em-xs",
+        (label() ?? "").length >= 3 && "text-em-xs",
       )}
       style={{
         height: `${(props.height ?? 1) * 2}rem`,
@@ -170,7 +176,7 @@ function Key(
         when={props.isLayoutIndicator}
         fallback={
           <>
-            {props.legends[props.layer]}
+            {label()}
             <Show when={props.isHoming}>
               <div
                 class={cn(

From 3e5584358469daacfd0157c7c7e682fd5c41e19c Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sat, 20 Jun 2026 15:34:06 +0200
Subject: [PATCH 24/61] refactor

---
 .../components/pages/test/keymapConverter.ts  | 249 +++++++++---------
 1 file changed, 126 insertions(+), 123 deletions(-)

diff --git a/frontend/src/ts/components/pages/test/keymapConverter.ts b/frontend/src/ts/components/pages/test/keymapConverter.ts
index 70423697a4cb..7ad08685b2b1 100644
--- a/frontend/src/ts/components/pages/test/keymapConverter.ts
+++ b/frontend/src/ts/components/pages/test/keymapConverter.ts
@@ -29,6 +29,18 @@ type RuleParams = {
   col: number;
 };
 
+type ExtraKeysConfig = {
+  row1Append?: KeyDefinition[];
+  row2Prepend?: KeyDefinition[];
+  row2Append?: KeyDefinition[];
+  row3Prepend?: KeyDefinition[];
+  row3Append?: KeyDefinition[];
+  row4Prepend?: KeyDefinition[];
+  row4Append?: KeyDefinition[];
+  row5Prepend?: KeyDefinition[];
+  row5Append?: KeyDefinition[];
+};
+
 export function convertLayoutToKeymap(
   rawLayout: LayoutObject,
   options: ConvertOptions,
@@ -56,12 +68,13 @@ function convertStaggered(
   const isSplit = options.keymapStyle === "split";
   const isIso = layout.type === "iso";
   const hasRow5ExtraKey = layout.keys.row5.length !== 1;
+  const showAllKeys = options.showAllKeys;
 
   if (isSplit && !hasRow5ExtraKey) {
     layout.keys.row5.push(buildLegends([" "]));
   }
 
-  const calcGap =
+  const calcGapForRow5 =
     ({ col1Gap, splitCol }: { col1Gap: number; splitCol?: number }) =>
     ({ col }: { col: number }) => {
       if (col === 0) return options.showAllKeys ? undefined : col1Gap;
@@ -75,21 +88,23 @@ function convertStaggered(
 
   const result = convertBase(layout, options, {
     row1: {
-      x: calcGap({ col1Gap: 0, splitCol: 7 }),
+      x: calcGap({ col1Gap: 0, splitCol: 7, isSplit, showAllKeys }),
       skip: ({ col }) => (options.showAllKeys ? false : col === 0),
     },
     row2: {
-      x: calcGap({ col1Gap: 0.5 }),
+      x: calcGap({ col1Gap: 0.5, isSplit, showAllKeys }),
       skip: ({ col }) => (options.showAllKeys ? false : col === 12),
       width: ({ col }) => (col === 12 ? 1.5 : undefined),
     },
     row3: {
-      x: calcGap({ col1Gap: 1 }),
+      x: calcGap({ col1Gap: 1, isSplit, showAllKeys }),
       isHoming: ({ col }) => col === 3 || col === 6,
     },
-    row4: { x: calcGap({ col1Gap: isIso ? 0.25 : 1.5 }) },
+    row4: {
+      x: calcGap({ col1Gap: isIso ? 0.25 : 1.5, isSplit, showAllKeys }),
+    },
     row5: {
-      x: calcGap({
+      x: calcGapForRow5({
         col1Gap: hasRow5ExtraKey ? (isSplit ? 5.5 : 4) : 3.5,
         splitCol: 1,
       }),
@@ -114,76 +129,38 @@ function convertStaggered(
     },
   });
 
-  if (!options.showAllKeys) return result;
-
-  //extra keys
   if (options.showAllKeys) {
-    result.row1.push({
-      legends: buildLegends(["BS"]),
-      width: 2,
-    });
-    result.row2.unshift({
-      legends: buildLegends(["Tab"]),
-      width: 1.5,
-    });
-    result.row3.unshift({
-      legends: buildLegends(["Caps"]),
-      width: 1.75,
-    });
+    const extraKeysConfig: ExtraKeysConfig = {
+      row1Append: [buildExtraKey(["BS"], { width: 2 })],
+      row2Prepend: [buildExtraKey(["Tab"], { width: 1.5 })],
+      row3Prepend: [buildExtraKey(["Caps"], { width: 1.75 })],
+      row4Prepend: [buildExtraKey(["Shift"], { width: isIso ? 1.25 : 2.25 })],
+      row5Prepend: [
+        buildExtraKey(["Ctrl"], { width: 1.25 }),
+        buildExtraKey(["Monke"], { width: 1.25 }),
+        buildExtraKey(["Alt"], { width: 1.25 }),
+      ],
+      row5Append: [
+        buildExtraKey(["Alt"], { width: 1.25 }),
+        buildExtraKey(["Monke"], { width: 1.25 }),
+        buildExtraKey(["Meta"], { width: 1.25 }),
+        buildExtraKey(["Ctrl"], { width: 1.25 }),
+      ],
+    };
+
+    // Enter position depends on iso vs non-iso layout
     if (isIso) {
-      result.row2.push({
-        legends: buildLegends(["Enter"]),
-        width: 1.5,
-        height: 2,
-      });
+      extraKeysConfig.row2Append = [
+        buildExtraKey(["Enter"], { width: 1.5, height: 2 }),
+      ];
     } else {
-      result.row3.push({
-        legends: buildLegends(["Enter"]),
-        width: 2.25,
-      });
+      extraKeysConfig.row3Append = [buildExtraKey(["Enter"], { width: 2.25 })];
     }
-    result.row4.unshift({
-      legends: buildLegends(["Shift"]),
-      width: isIso ? 1.25 : 2.25,
-    });
-    result.row4.push({
-      legends: buildLegends(["Shift"]),
-      width: 2.75,
-    });
-
-    result.row5.unshift(
-      {
-        legends: buildLegends(["Ctrl"]),
-        width: 1.25,
-      },
-      {
-        legends: buildLegends(["Monke"]),
-        width: 1.25,
-      },
-      {
-        legends: buildLegends(["Alt"]),
-        width: 1.25,
-      },
-    );
 
-    result.row5.push(
-      {
-        legends: buildLegends(["Alt"]),
-        width: 1.25,
-      },
-      {
-        legends: buildLegends(["Monke"]),
-        width: 1.25,
-      },
-      {
-        legends: buildLegends(["Meta"]),
-        width: 1.25,
-      },
-      {
-        legends: buildLegends(["Ctrl"]),
-        width: 1.25,
-      },
-    );
+    // Right-side Shift (row4)
+    extraKeysConfig.row4Append = [buildExtraKey(["Shift"], { width: 2.75 })];
+
+    addExtraKeys(result, extraKeysConfig);
   }
 
   return result;
@@ -195,19 +172,12 @@ function convertMatrix(
 ): KeyboardDefinition {
   const isSplit = options.keymapStyle === "split_matrix";
   const hasRow5ExtraKey = layout.keys.row5.length !== 1;
+  const showAllKeys = options.showAllKeys;
 
   if (isSplit && !hasRow5ExtraKey) {
     layout.keys.row5.push(buildLegends([" "]));
   }
 
-  const calcGap =
-    ({ col1Gap, splitCol }: { col1Gap?: number; splitCol?: number }) =>
-    ({ col }: { col: number }) => {
-      if (col === 0) return options.showAllKeys ? undefined : col1Gap;
-      if (isSplit && col === (splitCol ?? 5)) return 1;
-      return undefined;
-    };
-
   const layoutIndicatorIndex = layout.keys.row5.findIndex(
     (it) => it.at(0) === " ",
   );
@@ -215,70 +185,63 @@ function convertMatrix(
   const result = convertBase(layout, options, {
     row1: {
       skip: ({ col }) => (!options.showAllKeys && col === 0) || col > 10,
-      x: calcGap({ splitCol: 6 }),
+      x: calcGap({ splitCol: 6, isSplit, showAllKeys }),
     },
     row2: {
       skip: ({ col }) => col > 9,
-      x: calcGap({}),
+      x: calcGap({ isSplit, showAllKeys }),
     },
     row3: {
       skip: ({ col }) => col > (options.showAllKeys ? 10 : 9),
-      x: calcGap({}),
+      x: calcGap({ isSplit, showAllKeys }),
       isHoming: ({ col }) => col === 3 || col === 6,
     },
     row4: {
       skip: ({ col }) => col > 9,
-      x: calcGap({}),
+      x: calcGap({ isSplit, showAllKeys }),
     },
     row5: {
-      x: calcGap({ col1Gap: isSplit || hasRow5ExtraKey ? 2 : 3, splitCol: 1 }),
+      x: calcGap({
+        col1Gap: isSplit || hasRow5ExtraKey ? 2 : 3,
+        splitCol: 1,
+        isSplit,
+        showAllKeys,
+      }),
       width: () =>
         isSplit || hasRow5ExtraKey ? 3 : options.showAllKeys ? 6 : 4,
       isLayoutIndicator: ({ col }) => col === layoutIndicatorIndex,
     },
   });
 
-  //extra keys
   if (options.showAllKeys) {
-    result.row1.push({
-      legends: buildLegends(["BS"]),
-    });
-
-    result.row2.unshift({
-      legends: buildLegends(["Tab"]),
-    });
-    result.row2.push({
-      legends: buildLegends(["Del"]),
-    });
-
-    result.row3.unshift({
-      legends: buildLegends(["Esc"]),
-    });
-
-    result.row4.unshift({
-      legends: buildLegends(["Shift"]),
-    });
-    result.row4.push({
-      legends: buildLegends(["Enter"]),
-    });
-
-    result.row5.unshift(
-      { legends: buildLegends(["Ctrl"]) },
-      { legends: buildLegends(["Monke"]) },
-      { legends: buildLegends(["Alt"]) },
-    );
-
-    result.row5.push(
-      { legends: buildLegends(["Alt"]) },
-      { legends: buildLegends(["Meta"]) },
-      { legends: buildLegends(["Ctrl"]) },
-    );
+    const extraKeysConfig: ExtraKeysConfig = {
+      row1Append: [buildExtraKey(["BS"])],
+      row2Prepend: [buildExtraKey(["Tab"])],
+      row2Append: [buildExtraKey(["Del"])],
+      row3Prepend: [buildExtraKey(["Esc"])],
+      row4Prepend: [buildExtraKey(["Shift"])],
+      row4Append: [buildExtraKey(["Enter"])],
+      row5Prepend: [
+        buildExtraKey(["Ctrl"]),
+        buildExtraKey(["Monke"]),
+        buildExtraKey(["Alt"]),
+      ],
+      row5Append: [
+        buildExtraKey(["Alt"]),
+        buildExtraKey(["Meta"]),
+        buildExtraKey(["Ctrl"]),
+      ],
+    };
+
+    addExtraKeys(result, extraKeysConfig);
   }
+
   return result;
 }
 
 function convertSteno(options: ConvertOptions): KeyboardDefinition {
   const isSplit = options.keymapStyle === "steno_matrix";
+  const showAllKeys = options.showAllKeys;
 
   const layout: LayoutObject = {
     keymapShowTopRow: true,
@@ -319,10 +282,10 @@ function convertSteno(options: ConvertOptions): KeyboardDefinition {
     },
   };
 
-  const calcGap =
-    (options: { colGap?: Record<number, number> }) =>
+  const calcGapForRow3 =
+    (colGap: Record<number, number>) =>
     ({ col }: { col: number }) => {
-      const gap = options?.colGap?.[col];
+      const gap = colGap[col];
       if (!isSplit && gap !== undefined) return gap;
       return isSplit && col === 5 ? 1 : undefined;
     };
@@ -332,11 +295,11 @@ function convertSteno(options: ConvertOptions): KeyboardDefinition {
   const base = convertBase(layout, options, {
     row2: {
       height: ({ col }) => (isLargeKey(col) ? 2 : undefined),
-      x: calcGap({}),
+      x: calcGap({ isSplit, showAllKeys }),
     },
     row3: {
       skip: ({ col }) => isLargeKey(col),
-      x: calcGap({ colGap: { 1: 1, 5: 1 } }),
+      x: calcGapForRow3({ 1: 1, 5: 1 }),
     },
     row4: {
       x: ({ col }) => (isSplit ? { 0: 3, 2: 1 } : { 0: 2.25, 2: 0.5 })[col],
@@ -411,3 +374,43 @@ function buildLegends(legends: KeyLegends): KeyLegends {
       return legends;
   }
 }
+
+function addExtraKeys(
+  keyboard: KeyboardDefinition,
+  config: ExtraKeysConfig | undefined,
+): void {
+  if (!config) return;
+
+  if (config.row1Append) keyboard.row1.push(...config.row1Append);
+  if (config.row2Prepend) keyboard.row2.unshift(...config.row2Prepend);
+  if (config.row2Append) keyboard.row2.push(...config.row2Append);
+  if (config.row3Prepend) keyboard.row3.unshift(...config.row3Prepend);
+  if (config.row3Append) keyboard.row3.push(...config.row3Append);
+  if (config.row4Prepend) keyboard.row4.unshift(...config.row4Prepend);
+  if (config.row4Append) keyboard.row4.push(...config.row4Append);
+  if (config.row5Prepend) keyboard.row5.unshift(...config.row5Prepend);
+  if (config.row5Append) keyboard.row5.push(...config.row5Append);
+}
+
+function buildExtraKey(
+  legends: KeyLegends,
+  options?: Pick<KeyDefinition, "width" | "height">,
+): KeyDefinition {
+  const row: KeyDefinition = { legends: buildLegends(legends) };
+  if (options?.width !== undefined) row.width = options.width;
+  if (options?.height !== undefined) row.height = options.height;
+  return row;
+}
+
+function calcGap(params: {
+  col1Gap?: number;
+  splitCol?: number;
+  isSplit: boolean;
+  showAllKeys: boolean;
+}) {
+  return ({ col }: { col: number }) => {
+    if (col === 0) return params.showAllKeys ? undefined : params.col1Gap;
+    if (params.isSplit && col === (params.splitCol ?? 5)) return 1;
+    return undefined;
+  };
+}

From 25958774550b43c8203622337fee37cd0370bff6 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sat, 20 Jun 2026 15:44:40 +0200
Subject: [PATCH 25/61] extract findLayoutIndicatorIndex

---
 .../src/ts/components/pages/test/keymapConverter.ts  | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/src/ts/components/pages/test/keymapConverter.ts b/frontend/src/ts/components/pages/test/keymapConverter.ts
index 7ad08685b2b1..bdc77dc1e50c 100644
--- a/frontend/src/ts/components/pages/test/keymapConverter.ts
+++ b/frontend/src/ts/components/pages/test/keymapConverter.ts
@@ -82,9 +82,7 @@ function convertStaggered(
       return undefined;
     };
 
-  const layoutIndicatorIndex = layout.keys.row5.findIndex(
-    (it) => it.at(0) === " ",
-  );
+  const layoutIndicatorIndex = findLayoutIndicatorIndex(layout.keys.row5);
 
   const result = convertBase(layout, options, {
     row1: {
@@ -178,9 +176,7 @@ function convertMatrix(
     layout.keys.row5.push(buildLegends([" "]));
   }
 
-  const layoutIndicatorIndex = layout.keys.row5.findIndex(
-    (it) => it.at(0) === " ",
-  );
+  const layoutIndicatorIndex = findLayoutIndicatorIndex(layout.keys.row5);
 
   const result = convertBase(layout, options, {
     row1: {
@@ -402,6 +398,10 @@ function buildExtraKey(
   return row;
 }
 
+function findLayoutIndicatorIndex(keys: KeyLegends[]): number {
+  return keys.findIndex((it) => it.at(0) === " ");
+}
+
 function calcGap(params: {
   col1Gap?: number;
   splitCol?: number;

From d86b1149fdb690c2ba6aed58f5c4bbe641624637 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sat, 20 Jun 2026 15:57:35 +0200
Subject: [PATCH 26/61] refactor extra keys

---
 .../components/pages/test/keymapConverter.ts  | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

diff --git a/frontend/src/ts/components/pages/test/keymapConverter.ts b/frontend/src/ts/components/pages/test/keymapConverter.ts
index bdc77dc1e50c..253b7628710a 100644
--- a/frontend/src/ts/components/pages/test/keymapConverter.ts
+++ b/frontend/src/ts/components/pages/test/keymapConverter.ts
@@ -131,8 +131,15 @@ function convertStaggered(
     const extraKeysConfig: ExtraKeysConfig = {
       row1Append: [buildExtraKey(["BS"], { width: 2 })],
       row2Prepend: [buildExtraKey(["Tab"], { width: 1.5 })],
+      row2Append: isIso
+        ? [buildExtraKey(["Enter"], { width: 1.5, height: 2 })]
+        : undefined,
       row3Prepend: [buildExtraKey(["Caps"], { width: 1.75 })],
+      row3Append: !isIso
+        ? [buildExtraKey(["Enter"], { width: 2.25 })]
+        : undefined,
       row4Prepend: [buildExtraKey(["Shift"], { width: isIso ? 1.25 : 2.25 })],
+      row4Append: [buildExtraKey(["Shift"], { width: 2.75 })],
       row5Prepend: [
         buildExtraKey(["Ctrl"], { width: 1.25 }),
         buildExtraKey(["Monke"], { width: 1.25 }),
@@ -146,18 +153,6 @@ function convertStaggered(
       ],
     };
 
-    // Enter position depends on iso vs non-iso layout
-    if (isIso) {
-      extraKeysConfig.row2Append = [
-        buildExtraKey(["Enter"], { width: 1.5, height: 2 }),
-      ];
-    } else {
-      extraKeysConfig.row3Append = [buildExtraKey(["Enter"], { width: 2.25 })];
-    }
-
-    // Right-side Shift (row4)
-    extraKeysConfig.row4Append = [buildExtraKey(["Shift"], { width: 2.75 })];
-
     addExtraKeys(result, extraKeysConfig);
   }
 

From b3261793ef0163792abae4187dc02d5d9c06a8c1 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sat, 20 Jun 2026 16:05:22 +0200
Subject: [PATCH 27/61] custom gaps, better types, rename col1Gap

---
 .../components/pages/test/keymapConverter.ts  | 44 +++++++------------
 1 file changed, 17 insertions(+), 27 deletions(-)

diff --git a/frontend/src/ts/components/pages/test/keymapConverter.ts b/frontend/src/ts/components/pages/test/keymapConverter.ts
index 253b7628710a..b0fc4b9b4879 100644
--- a/frontend/src/ts/components/pages/test/keymapConverter.ts
+++ b/frontend/src/ts/components/pages/test/keymapConverter.ts
@@ -74,37 +74,31 @@ function convertStaggered(
     layout.keys.row5.push(buildLegends([" "]));
   }
 
-  const calcGapForRow5 =
-    ({ col1Gap, splitCol }: { col1Gap: number; splitCol?: number }) =>
-    ({ col }: { col: number }) => {
-      if (col === 0) return options.showAllKeys ? undefined : col1Gap;
-      if (isSplit && col === (splitCol ?? 5)) return 1;
-      return undefined;
-    };
-
   const layoutIndicatorIndex = findLayoutIndicatorIndex(layout.keys.row5);
 
   const result = convertBase(layout, options, {
     row1: {
-      x: calcGap({ col1Gap: 0, splitCol: 7, isSplit, showAllKeys }),
+      x: calcGap({ firstColGap: 0, splitCol: 7, isSplit, showAllKeys }),
       skip: ({ col }) => (options.showAllKeys ? false : col === 0),
     },
     row2: {
-      x: calcGap({ col1Gap: 0.5, isSplit, showAllKeys }),
+      x: calcGap({ firstColGap: 0.5, isSplit, showAllKeys }),
       skip: ({ col }) => (options.showAllKeys ? false : col === 12),
       width: ({ col }) => (col === 12 ? 1.5 : undefined),
     },
     row3: {
-      x: calcGap({ col1Gap: 1, isSplit, showAllKeys }),
+      x: calcGap({ firstColGap: 1, isSplit, showAllKeys }),
       isHoming: ({ col }) => col === 3 || col === 6,
     },
     row4: {
-      x: calcGap({ col1Gap: isIso ? 0.25 : 1.5, isSplit, showAllKeys }),
+      x: calcGap({ firstColGap: isIso ? 0.25 : 1.5, isSplit, showAllKeys }),
     },
     row5: {
-      x: calcGapForRow5({
-        col1Gap: hasRow5ExtraKey ? (isSplit ? 5.5 : 4) : 3.5,
+      x: calcGap({
+        firstColGap: hasRow5ExtraKey ? (isSplit ? 5.5 : 4) : 3.5,
         splitCol: 1,
+        isSplit,
+        showAllKeys,
       }),
       width: ({ col }) => {
         if (
@@ -193,7 +187,7 @@ function convertMatrix(
     },
     row5: {
       x: calcGap({
-        col1Gap: isSplit || hasRow5ExtraKey ? 2 : 3,
+        firstColGap: isSplit || hasRow5ExtraKey ? 2 : 3,
         splitCol: 1,
         isSplit,
         showAllKeys,
@@ -273,14 +267,6 @@ function convertSteno(options: ConvertOptions): KeyboardDefinition {
     },
   };
 
-  const calcGapForRow3 =
-    (colGap: Record<number, number>) =>
-    ({ col }: { col: number }) => {
-      const gap = colGap[col];
-      if (!isSplit && gap !== undefined) return gap;
-      return isSplit && col === 5 ? 1 : undefined;
-    };
-
   const isLargeKey = (col: number): boolean => !isSplit && [0, 4].includes(col);
 
   const base = convertBase(layout, options, {
@@ -290,7 +276,7 @@ function convertSteno(options: ConvertOptions): KeyboardDefinition {
     },
     row3: {
       skip: ({ col }) => isLargeKey(col),
-      x: calcGapForRow3({ 1: 1, 5: 1 }),
+      x: calcGap({ isSplit, showAllKeys, colGaps: { 1: 1, 5: 1 } }),
     },
     row4: {
       x: ({ col }) => (isSplit ? { 0: 3, 2: 1 } : { 0: 2.25, 2: 0.5 })[col],
@@ -397,15 +383,19 @@ function findLayoutIndicatorIndex(keys: KeyLegends[]): number {
   return keys.findIndex((it) => it.at(0) === " ");
 }
 
+type NonZeroColGaps = Record<Exclude<keyof Record<number, number>, 0>, number>;
+
 function calcGap(params: {
-  col1Gap?: number;
+  firstColGap?: number;
   splitCol?: number;
   isSplit: boolean;
   showAllKeys: boolean;
+  colGaps?: NonZeroColGaps;
 }) {
   return ({ col }: { col: number }) => {
-    if (col === 0) return params.showAllKeys ? undefined : params.col1Gap;
+    if (col === 0) return params.showAllKeys ? undefined : params.firstColGap;
     if (params.isSplit && col === (params.splitCol ?? 5)) return 1;
-    return undefined;
+    if (params.isSplit) return undefined;
+    return params.colGaps?.[col];
   };
 }

From 520a8c5f82bf8f0ec171fe51249090ce0209f043 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sat, 20 Jun 2026 16:14:48 +0200
Subject: [PATCH 28/61] rename

---
 .../components/pages/test/keymapConverter.ts  | 58 ++++++++-----------
 1 file changed, 24 insertions(+), 34 deletions(-)

diff --git a/frontend/src/ts/components/pages/test/keymapConverter.ts b/frontend/src/ts/components/pages/test/keymapConverter.ts
index b0fc4b9b4879..88ce6b6c7c0f 100644
--- a/frontend/src/ts/components/pages/test/keymapConverter.ts
+++ b/frontend/src/ts/components/pages/test/keymapConverter.ts
@@ -83,7 +83,7 @@ function convertStaggered(
     },
     row2: {
       x: calcGap({ firstColGap: 0.5, isSplit, showAllKeys }),
-      skip: ({ col }) => (options.showAllKeys ? false : col === 12),
+      skip: ({ col }) => !options.showAllKeys && col === 12,
       width: ({ col }) => (col === 12 ? 1.5 : undefined),
     },
     row3: {
@@ -123,27 +123,25 @@ function convertStaggered(
 
   if (options.showAllKeys) {
     const extraKeysConfig: ExtraKeysConfig = {
-      row1Append: [buildExtraKey(["BS"], { width: 2 })],
-      row2Prepend: [buildExtraKey(["Tab"], { width: 1.5 })],
+      row1Append: [buildKey(["BS"], { width: 2 })],
+      row2Prepend: [buildKey(["Tab"], { width: 1.5 })],
       row2Append: isIso
-        ? [buildExtraKey(["Enter"], { width: 1.5, height: 2 })]
+        ? [buildKey(["Enter"], { width: 1.5, height: 2 })]
         : undefined,
-      row3Prepend: [buildExtraKey(["Caps"], { width: 1.75 })],
-      row3Append: !isIso
-        ? [buildExtraKey(["Enter"], { width: 2.25 })]
-        : undefined,
-      row4Prepend: [buildExtraKey(["Shift"], { width: isIso ? 1.25 : 2.25 })],
-      row4Append: [buildExtraKey(["Shift"], { width: 2.75 })],
+      row3Prepend: [buildKey(["Caps"], { width: 1.75 })],
+      row3Append: !isIso ? [buildKey(["Enter"], { width: 2.25 })] : undefined,
+      row4Prepend: [buildKey(["Shift"], { width: isIso ? 1.25 : 2.25 })],
+      row4Append: [buildKey(["Shift"], { width: 2.75 })],
       row5Prepend: [
-        buildExtraKey(["Ctrl"], { width: 1.25 }),
-        buildExtraKey(["Monke"], { width: 1.25 }),
-        buildExtraKey(["Alt"], { width: 1.25 }),
+        buildKey(["Ctrl"], { width: 1.25 }),
+        buildKey(["Monke"], { width: 1.25 }),
+        buildKey(["Alt"], { width: 1.25 }),
       ],
       row5Append: [
-        buildExtraKey(["Alt"], { width: 1.25 }),
-        buildExtraKey(["Monke"], { width: 1.25 }),
-        buildExtraKey(["Meta"], { width: 1.25 }),
-        buildExtraKey(["Ctrl"], { width: 1.25 }),
+        buildKey(["Alt"], { width: 1.25 }),
+        buildKey(["Monke"], { width: 1.25 }),
+        buildKey(["Meta"], { width: 1.25 }),
+        buildKey(["Ctrl"], { width: 1.25 }),
       ],
     };
 
@@ -200,22 +198,14 @@ function convertMatrix(
 
   if (options.showAllKeys) {
     const extraKeysConfig: ExtraKeysConfig = {
-      row1Append: [buildExtraKey(["BS"])],
-      row2Prepend: [buildExtraKey(["Tab"])],
-      row2Append: [buildExtraKey(["Del"])],
-      row3Prepend: [buildExtraKey(["Esc"])],
-      row4Prepend: [buildExtraKey(["Shift"])],
-      row4Append: [buildExtraKey(["Enter"])],
-      row5Prepend: [
-        buildExtraKey(["Ctrl"]),
-        buildExtraKey(["Monke"]),
-        buildExtraKey(["Alt"]),
-      ],
-      row5Append: [
-        buildExtraKey(["Alt"]),
-        buildExtraKey(["Meta"]),
-        buildExtraKey(["Ctrl"]),
-      ],
+      row1Append: [buildKey(["BS"])],
+      row2Prepend: [buildKey(["Tab"])],
+      row2Append: [buildKey(["Del"])],
+      row3Prepend: [buildKey(["Esc"])],
+      row4Prepend: [buildKey(["Shift"])],
+      row4Append: [buildKey(["Enter"])],
+      row5Prepend: [buildKey(["Ctrl"]), buildKey(["Monke"]), buildKey(["Alt"])],
+      row5Append: [buildKey(["Alt"]), buildKey(["Meta"]), buildKey(["Ctrl"])],
     };
 
     addExtraKeys(result, extraKeysConfig);
@@ -369,7 +359,7 @@ function addExtraKeys(
   if (config.row5Append) keyboard.row5.push(...config.row5Append);
 }
 
-function buildExtraKey(
+function buildKey(
   legends: KeyLegends,
   options?: Pick<KeyDefinition, "width" | "height">,
 ): KeyDefinition {

From 483681214d6d2dfd2cfae0fc67ac3ab8ae91bb5d Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sat, 20 Jun 2026 16:28:28 +0200
Subject: [PATCH 29/61] minoor tweaks

---
 .../ts/components/pages/test/keymapConverter.ts   | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/frontend/src/ts/components/pages/test/keymapConverter.ts b/frontend/src/ts/components/pages/test/keymapConverter.ts
index 88ce6b6c7c0f..37395d55d764 100644
--- a/frontend/src/ts/components/pages/test/keymapConverter.ts
+++ b/frontend/src/ts/components/pages/test/keymapConverter.ts
@@ -79,7 +79,7 @@ function convertStaggered(
   const result = convertBase(layout, options, {
     row1: {
       x: calcGap({ firstColGap: 0, splitCol: 7, isSplit, showAllKeys }),
-      skip: ({ col }) => (options.showAllKeys ? false : col === 0),
+      skip: ({ col }) => !options.showAllKeys && col === 0,
     },
     row2: {
       x: calcGap({ firstColGap: 0.5, isSplit, showAllKeys }),
@@ -102,19 +102,19 @@ function convertStaggered(
       }),
       width: ({ col }) => {
         if (
-          (!options.showAllKeys || !isSplit) &&
+          (!showAllKeys || !isSplit) &&
           layout.keys.row5[col]?.at(0) !== " "
         ) {
           return undefined;
         }
         if (isSplit) {
-          if (options.showAllKeys) {
+          if (showAllKeys) {
             return col === layoutIndicatorIndex ? 3.5 : 3;
           } else {
             return 3;
           }
         }
-        if (options.showAllKeys) return hasRow5ExtraKey ? 5.25 : 6.25;
+        if (showAllKeys) return hasRow5ExtraKey ? 5.25 : 6.25;
         return 6;
       },
       isLayoutIndicator: ({ col }) => col === layoutIndicatorIndex,
@@ -167,7 +167,7 @@ function convertMatrix(
 
   const result = convertBase(layout, options, {
     row1: {
-      skip: ({ col }) => (!options.showAllKeys && col === 0) || col > 10,
+      skip: ({ col }) => (!showAllKeys && col === 0) || col > 10,
       x: calcGap({ splitCol: 6, isSplit, showAllKeys }),
     },
     row2: {
@@ -175,7 +175,7 @@ function convertMatrix(
       x: calcGap({ isSplit, showAllKeys }),
     },
     row3: {
-      skip: ({ col }) => col > (options.showAllKeys ? 10 : 9),
+      skip: ({ col }) => col > (showAllKeys ? 10 : 9),
       x: calcGap({ isSplit, showAllKeys }),
       isHoming: ({ col }) => col === 3 || col === 6,
     },
@@ -190,8 +190,7 @@ function convertMatrix(
         isSplit,
         showAllKeys,
       }),
-      width: () =>
-        isSplit || hasRow5ExtraKey ? 3 : options.showAllKeys ? 6 : 4,
+      width: () => (isSplit || hasRow5ExtraKey ? 3 : showAllKeys ? 6 : 4),
       isLayoutIndicator: ({ col }) => col === layoutIndicatorIndex,
     },
   });

From b305e18717cc0f0528f4f358086030dba6340f1b Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sat, 20 Jun 2026 16:38:37 +0200
Subject: [PATCH 30/61] rotation

---
 frontend/src/ts/components/pages/test/Keymap.tsx         | 2 ++
 frontend/src/ts/components/pages/test/keymapConverter.ts | 5 +++++
 2 files changed, 7 insertions(+)

diff --git a/frontend/src/ts/components/pages/test/Keymap.tsx b/frontend/src/ts/components/pages/test/Keymap.tsx
index f6584aeca201..734afefd4d0d 100644
--- a/frontend/src/ts/components/pages/test/Keymap.tsx
+++ b/frontend/src/ts/components/pages/test/Keymap.tsx
@@ -154,6 +154,8 @@ function Key(
         height: `${(props.height ?? 1) * 2}rem`,
         width: `${(props.width ?? 1) * 2}rem`,
         "margin-left": `${(props.x ?? 0) * 2}rem`,
+        transform:
+          props.rotation !== undefined ? `rotate(${props.rotation}deg)` : "",
         "background-color": "var(--keybgcolor)",
         color: "var(--keycolor)",
       }}
diff --git a/frontend/src/ts/components/pages/test/keymapConverter.ts b/frontend/src/ts/components/pages/test/keymapConverter.ts
index 37395d55d764..c95b4dadc673 100644
--- a/frontend/src/ts/components/pages/test/keymapConverter.ts
+++ b/frontend/src/ts/components/pages/test/keymapConverter.ts
@@ -10,6 +10,8 @@ export type KeyDefinition = {
   height?: number;
   /** x-offset in u  */
   x?: number;
+  /** rotation in degrees  */
+  rotation?: number;
 
   isLayoutIndicator?: boolean;
   isHoming?: boolean;
@@ -285,6 +287,7 @@ function convertBase(
         height?: (options: RuleParams) => number | undefined;
         width?: (options: RuleParams) => number | undefined;
         x?: (options: RuleParams) => number | undefined;
+        rotation?: (options: RuleParams) => number | undefined;
         skip?: (options: RuleParams) => boolean;
         isLayoutIndicator?: (options: RuleParams) => boolean;
         isHoming?: (options: RuleParams) => boolean;
@@ -307,6 +310,7 @@ function convertBase(
           const height = cols?.[row]?.height?.({ col: colNum });
           const width = cols?.[row]?.width?.({ col: colNum });
           const x = cols?.[row]?.x?.({ col: colNum });
+          const rotation = cols?.[row]?.rotation?.({ col: colNum });
           const isLayoutIndicator = cols?.[row]?.isLayoutIndicator?.({
             col: colNum,
           });
@@ -317,6 +321,7 @@ function convertBase(
             ...(height !== undefined ? { height } : {}),
             ...(width !== undefined ? { width } : {}),
             ...(x !== undefined ? { x } : {}),
+            ...(rotation !== undefined ? { rotation } : {}),
             ...(isLayoutIndicator === true ? { isLayoutIndicator: true } : {}),
             ...(isHoming === true ? { isHoming: true } : {}),
           } satisfies KeyDefinition;

From 84f21de6a1a779beaa493f0d3dd6b0671fbb5bcc Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sat, 20 Jun 2026 17:41:32 +0200
Subject: [PATCH 31/61] alice, wip

---
 .../components/pages/test/keymapConverter.ts  | 121 ++++++++++++++++--
 1 file changed, 112 insertions(+), 9 deletions(-)

diff --git a/frontend/src/ts/components/pages/test/keymapConverter.ts b/frontend/src/ts/components/pages/test/keymapConverter.ts
index c95b4dadc673..a3de3861903c 100644
--- a/frontend/src/ts/components/pages/test/keymapConverter.ts
+++ b/frontend/src/ts/components/pages/test/keymapConverter.ts
@@ -58,9 +58,11 @@ export function convertLayoutToKeymap(
     case "steno":
     case "steno_matrix":
       return convertSteno(options);
+    case "alice":
+      return convertAlice(layout, options);
+    default:
+      throw new Error(`not supported style ${options.keymapStyle}`);
   }
-
-  throw new Error("not supported");
 }
 
 function convertStaggered(
@@ -276,6 +278,106 @@ function convertSteno(options: ConvertOptions): KeyboardDefinition {
   return base;
 }
 
+function convertAlice(
+  layout: LayoutObject,
+  options: ConvertOptions,
+): KeyboardDefinition {
+  const hasRow5ExtraKey = layout.keys.row5.length !== 1;
+  const showAllKeys = options.showAllKeys;
+
+  if (!hasRow5ExtraKey) {
+    layout.keys.row5.push(buildLegends([" "]));
+  }
+
+  const layoutIndicatorIndex = findLayoutIndicatorIndex(layout.keys.row5);
+
+  const calcRotation =
+    ({ start, split, end }: { start: number; split: number; end: number }) =>
+    ({ col }: { col: number }): number | undefined =>
+      col >= start && col <= split
+        ? 10
+        : col > split && col <= end
+          ? -10
+          : undefined;
+
+  const result = convertBase(layout, options, {
+    row1: {
+      x: calcGap({
+        firstColGap: 0,
+        colGaps: { 7: 0.25 },
+        showAllKeys,
+      }),
+      skip: ({ col }) => !options.showAllKeys && col === 0,
+      rotation: calcRotation({ start: 3, split: 6, end: 10 }),
+    },
+    row2: {
+      x: calcGap({
+        firstColGap: 0.25,
+        colGaps: { 1: 0.25, 5: 0.5, 9: 0.25 },
+        showAllKeys,
+      }),
+      skip: ({ col }) => !options.showAllKeys && col === 12,
+      rotation: calcRotation({ start: 1, split: 4, end: 8 }),
+    },
+    row3: {
+      x: calcGap({
+        firstColGap: 0.5,
+        colGaps: { 1: 0.25, 5: 0.75, 9: 0.25 },
+        showAllKeys,
+      }),
+      isHoming: ({ col }) => col === 3 || col === 6,
+      rotation: calcRotation({ start: 1, split: 4, end: 8 }),
+    },
+    row4: {
+      x: calcGap({ firstColGap: 1, colGaps: { 8: 0.25 }, showAllKeys }),
+      rotation: calcRotation({ start: 1, split: 4, end: 7 }),
+    },
+    row5: {
+      x: calcGap({
+        firstColGap: hasRow5ExtraKey ? 4.75 : 3,
+        colGaps: { 1: 0.5 },
+        showAllKeys,
+      }),
+      width: ({ col }) => (hasRow5ExtraKey && col === 1 ? undefined : 3),
+
+      isLayoutIndicator: ({ col }) => col === layoutIndicatorIndex,
+      rotation: ({ col }) => (col === 0 ? 10 : -10),
+    },
+  });
+
+  result.row4.splice(5, 0, buildKey(["b", "B"], { rotation: -10, x: 0.25 }));
+
+  /*
+  if (options.showAllKeys) {
+    const extraKeysConfig: ExtraKeysConfig = {
+      row1Append: [buildKey(["BS"], { width: 2 })],
+      row2Prepend: [buildKey(["Tab"], { width: 1.5 })],
+      row2Append: isIso
+        ? [buildKey(["Enter"], { width: 1.5, height: 2 })]
+        : undefined,
+      row3Prepend: [buildKey(["Caps"], { width: 1.75 })],
+      row3Append: !isIso ? [buildKey(["Enter"], { width: 2.25 })] : undefined,
+      row4Prepend: [buildKey(["Shift"], { width: isIso ? 1.25 : 2.25 })],
+      row4Append: [buildKey(["Shift"], { width: 2.75 })],
+      row5Prepend: [
+        buildKey(["Ctrl"], { width: 1.25 }),
+        buildKey(["Monke"], { width: 1.25 }),
+        buildKey(["Alt"], { width: 1.25 }),
+      ],
+      row5Append: [
+        buildKey(["Alt"], { width: 1.25 }),
+        buildKey(["Monke"], { width: 1.25 }),
+        buildKey(["Meta"], { width: 1.25 }),
+        buildKey(["Ctrl"], { width: 1.25 }),
+      ],
+    };
+
+    addExtraKeys(result, extraKeysConfig);
+  }
+*/
+  return result;
+}
+
 function convertBase(
   layout: LayoutObject,
   options: ConvertOptions,
@@ -365,12 +467,11 @@ function addExtraKeys(
 
 function buildKey(
   legends: KeyLegends,
-  options?: Pick<KeyDefinition, "width" | "height">,
+  options?: Partial<KeyDefinition>,
 ): KeyDefinition {
-  const row: KeyDefinition = { legends: buildLegends(legends) };
-  if (options?.width !== undefined) row.width = options.width;
-  if (options?.height !== undefined) row.height = options.height;
-  return row;
+  const key: KeyDefinition = { ...options, legends: buildLegends(legends) };
+
+  return key;
 }
 
 function findLayoutIndicatorIndex(keys: KeyLegends[]): number {
@@ -382,13 +483,15 @@ type NonZeroColGaps = Record<Exclude<keyof Record<number, number>, 0>, number>;
 function calcGap(params: {
   firstColGap?: number;
   splitCol?: number;
-  isSplit: boolean;
+  isSplit?: boolean;
   showAllKeys: boolean;
   colGaps?: NonZeroColGaps;
 }) {
   return ({ col }: { col: number }) => {
     if (col === 0) return params.showAllKeys ? undefined : params.firstColGap;
-    if (params.isSplit && col === (params.splitCol ?? 5)) return 1;
+    if (params.isSplit && col === (params.splitCol ?? 5)) {
+      return 1;
+    }
     if (params.isSplit) return undefined;
     return params.colGaps?.[col];
   };

From 2bb9db4f2acea65431738fa6f63544468765f7a4 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sun, 21 Jun 2026 01:44:36 +0200
Subject: [PATCH 32/61] single signal for flash key

---
 .../src/ts/components/pages/test/Keymap.tsx   | 61 +++++++++++++------
 1 file changed, 44 insertions(+), 17 deletions(-)

diff --git a/frontend/src/ts/components/pages/test/Keymap.tsx b/frontend/src/ts/components/pages/test/Keymap.tsx
index 734afefd4d0d..675cc1325d3d 100644
--- a/frontend/src/ts/components/pages/test/Keymap.tsx
+++ b/frontend/src/ts/components/pages/test/Keymap.tsx
@@ -22,9 +22,11 @@ import {
   KeyDefinition,
 } from "./keymapConverter";
 
+type FlashEntry = { tick: number; correct: boolean };
+
 export function Keymap() {
   return (
-    <Show when={keymapLayoutObject()} fallback={<div>Loading...</div>}>
+    <Show when={keymapLayoutObject()}>
       <Keyboard
         displayName={getKeymapLayout().layoutNameDisplayString}
         layoutData={keymapLayoutObject() as LayoutObject}
@@ -57,6 +59,27 @@ function Keyboard(props: { displayName: string; layoutData: LayoutObject }) {
     }
   });
 
+  const [flashState, setFlashState] = createSignal<Map<string, FlashEntry>>(
+    new Map(),
+  );
+
+  keymapEvent.useListener((event) => {
+    if (event.mode === "flash") {
+      const key = event.key || " ";
+      const current = flashState();
+      const next = new Map<string, FlashEntry>();
+      const existing = current.get(key);
+      next.set(key, {
+        tick: existing ? existing.tick + 1 : 1,
+        correct: event.correct ?? true,
+      });
+      setFlashState(next);
+    } else {
+      // highlight event — reset flash state
+      setFlashState(new Map());
+    }
+  });
+
   const showFirstRow = createMemo(
     () =>
       (wordsHaveNumbers() && getConfig.keymapMode === "next") ||
@@ -66,7 +89,6 @@ function Keyboard(props: { displayName: string; layoutData: LayoutObject }) {
         props.layoutData.keymapShowTopRow),
   );
 
-  // Convert layout to KeyboardDefinition format
   //TODO handle funbox layout_mirror
   const keyboardDef = createMemo(() =>
     convertLayoutToKeymap(props.layoutData, {
@@ -83,6 +105,7 @@ function Keyboard(props: { displayName: string; layoutData: LayoutObject }) {
           keyboardDef={keyboardDef()}
           layer={layer()}
           showFirstRow={showFirstRow()}
+          flashState={flashState}
         />
       </Show>
     </div>
@@ -93,6 +116,7 @@ function KeyboardDefinitionRenderer(props: {
   keyboardDef: KeyboardDefinition;
   layer: number;
   showFirstRow: boolean;
+  flashState: () => Map<string, FlashEntry>;
 }) {
   return (
     <For each={typedEntries(props.keyboardDef)}>
@@ -101,7 +125,12 @@ function KeyboardDefinitionRenderer(props: {
           <div class="flex h-8 flex-row">
             <For each={keys}>
               {(key) => (
-                <Key {...key} isNumRow={rowId === "row1"} layer={props.layer} />
+                <Key
+                  {...key}
+                  isNumRow={rowId === "row1"}
+                  layer={props.layer}
+                  flashState={props.flashState}
+                />
               )}
             </For>
           </div>
@@ -115,6 +144,7 @@ function Key(
   props: {
     isNumRow: boolean;
     layer: number;
+    flashState: () => Map<string, FlashEntry>;
   } & KeyDefinition,
 ) {
   const isSteno = () =>
@@ -129,21 +159,18 @@ function Key(
     return props.legends[layer];
   };
 
-  const [flashTick, setFlashTick] = createSignal(0);
-  const [flashCorrect, setFlashCorrect] = createSignal(true);
+  // Read from centralized flash state instead of managing per-key signals.
+  // Steno keys never flash.
+  const flashInfo = createMemo(() => {
+    if (isSteno()) return { tick: 0, correct: true };
+    const entry = props.flashState().get(label() ?? "");
+    return { tick: entry?.tick ?? 0, correct: entry?.correct ?? true };
+  });
+
   const isNext = () =>
     !isSteno() &&
     props.legends?.some((legend) => legend === getKeymapHighlightKey());
 
-  keymapEvent.useListener((event) => {
-    if (event.mode === "flash" && !isSteno() && event.key === label()) {
-      setFlashCorrect(event.correct ?? true);
-      setFlashTick((t) => t + 1);
-    } else {
-      setFlashTick(0);
-    }
-  });
-
   return (
     <Anime
       class={cn(
@@ -161,14 +188,14 @@ function Key(
       }}
       animation={{
         "--keybgcolor":
-          flashTick() === 0
+          flashInfo().tick === 0
             ? [isNext() ? getTheme().main : getTheme().subAlt]
             : [
-                flashCorrect() ? getTheme().main : getTheme().error,
+                flashInfo().correct ? getTheme().main : getTheme().error,
                 isNext() ? getTheme().main : getTheme().subAlt,
               ],
         "--keycolor":
-          flashTick() === 0
+          flashInfo().tick === 0
             ? [isNext() ? getTheme().bg : getTheme().sub]
             : [getTheme().bg, isNext() ? getTheme().bg : getTheme().sub],
         duration: isNext() ? 0 : 250,

From e1a3bca0d04d374cd0fa1a2d714a2591e5cea985 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sun, 21 Jun 2026 02:00:02 +0200
Subject: [PATCH 33/61] cleanup, move event listeners to states

---
 .../src/ts/components/pages/test/Keymap.tsx   |  4 +--
 .../components/pages/test/keymapConverter.ts  | 10 +++++-
 frontend/src/ts/event-handlers/modifiers.ts   | 17 ---------
 frontend/src/ts/index.ts                      |  1 -
 frontend/src/ts/states/modifiers.ts           | 35 +++++++++++++++++++
 5 files changed, 46 insertions(+), 21 deletions(-)
 delete mode 100644 frontend/src/ts/event-handlers/modifiers.ts

diff --git a/frontend/src/ts/components/pages/test/Keymap.tsx b/frontend/src/ts/components/pages/test/Keymap.tsx
index 675cc1325d3d..7e9417e881ce 100644
--- a/frontend/src/ts/components/pages/test/Keymap.tsx
+++ b/frontend/src/ts/components/pages/test/Keymap.tsx
@@ -156,14 +156,14 @@ function Key(
       props.isNumRow && isMacLike() && isCapsLockOn()
         ? props.layer - 1
         : props.layer;
-    return props.legends[layer];
+    return props.legends[layer] ?? "";
   };
 
   // Read from centralized flash state instead of managing per-key signals.
   // Steno keys never flash.
   const flashInfo = createMemo(() => {
     if (isSteno()) return { tick: 0, correct: true };
-    const entry = props.flashState().get(label() ?? "");
+    const entry = props.flashState().get(label());
     return { tick: entry?.tick ?? 0, correct: entry?.correct ?? true };
   });
 
diff --git a/frontend/src/ts/components/pages/test/keymapConverter.ts b/frontend/src/ts/components/pages/test/keymapConverter.ts
index a3de3861903c..1b1da907c75a 100644
--- a/frontend/src/ts/components/pages/test/keymapConverter.ts
+++ b/frontend/src/ts/components/pages/test/keymapConverter.ts
@@ -345,7 +345,15 @@ function convertAlice(
     },
   });
 
-  result.row4.splice(5, 0, buildKey(["b", "B"], { rotation: -10, x: 0.25 }));
+  //insert second B key
+  result.row4 = [
+    ...result.row4.slice(0, 5),
+    buildKey(result.row4.at(4)?.legends as string[], {
+      rotation: -10,
+      x: 0.25,
+    }),
+    ...result.row4.slice(5),
+  ];
 
   /*
   if (options.showAllKeys) {
diff --git a/frontend/src/ts/event-handlers/modifiers.ts b/frontend/src/ts/event-handlers/modifiers.ts
deleted file mode 100644
index 59a3a3ce060b..000000000000
--- a/frontend/src/ts/event-handlers/modifiers.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { updateModifierState } from "../states/modifiers";
-
-document.addEventListener("keydown", (e: KeyboardEvent) => {
-  handleKey(e, true);
-});
-
-document.addEventListener("keyup", (e: KeyboardEvent) => {
-  handleKey(e, false);
-});
-
-function handleKey(e: KeyboardEvent, updateValue: boolean): void {
-  if (e.code === "ShiftLeft") updateModifierState({ leftShift: updateValue });
-  if (e.code === "ShiftRight") updateModifierState({ rightShift: updateValue });
-  if (e.code === "AltRight" || e.code === "AltLeft") {
-    updateModifierState({ altGr: updateValue });
-  }
-}
diff --git a/frontend/src/ts/index.ts b/frontend/src/ts/index.ts
index 051c144ee46a..b9e848c87352 100644
--- a/frontend/src/ts/index.ts
+++ b/frontend/src/ts/index.ts
@@ -7,7 +7,6 @@ import "solid-devtools";
 import "./event-handlers/global";
 import "./event-handlers/keymap";
 import "./event-handlers/test";
-import "./event-handlers/modifiers";
 import "./modals/google-sign-up";
 
 import { init } from "./firebase";
diff --git a/frontend/src/ts/states/modifiers.ts b/frontend/src/ts/states/modifiers.ts
index 080c4093e7ce..66215de03cf5 100644
--- a/frontend/src/ts/states/modifiers.ts
+++ b/frontend/src/ts/states/modifiers.ts
@@ -4,6 +4,8 @@ import {
 } from "@leonabcd123/modern-caps-lock";
 import { createSignalWithSetters } from "../hooks/createSignalWithSetters";
 import { createSignal } from "solid-js";
+import { createEffectOn } from "../hooks/effects";
+import { getActivePage } from "./core";
 
 type ModifierState = {
   shift: boolean;
@@ -31,3 +33,36 @@ const [isCapsLockOn, setCapsLockOn] = createSignal<boolean>(checkCapsLockOn());
 export { isCapsLockOn };
 
 onCapsLockChange((state) => setCapsLockOn(state));
+
+const listeners: Array<{ remove: () => void }> = [];
+
+createEffectOn(getActivePage, (page) => {
+  // Clean up listeners from previous page.
+  for (const listener of listeners) {
+    listener.remove();
+  }
+  listeners.length = 0;
+
+  if (page === "test") {
+    const onKeyDown = (e: KeyboardEvent): void => handleModifierState(e, true);
+    const onKeyUp = (e: KeyboardEvent): void => handleModifierState(e, false);
+
+    document.addEventListener("keydown", onKeyDown);
+    document.addEventListener("keyup", onKeyUp);
+
+    listeners.push(
+      {
+        remove: (): void => document.removeEventListener("keydown", onKeyDown),
+      },
+      { remove: (): void => document.removeEventListener("keyup", onKeyUp) },
+    );
+  }
+});
+
+function handleModifierState(e: KeyboardEvent, updateValue: boolean): void {
+  if (e.code === "ShiftLeft") updateModifierState({ leftShift: updateValue });
+  if (e.code === "ShiftRight") updateModifierState({ rightShift: updateValue });
+  if (e.code === "AltRight" || e.code === "AltLeft") {
+    updateModifierState({ altGr: updateValue });
+  }
+}

From 4cdacc9840bdb34b4ae44c057cfe93923f4e2dce Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sun, 21 Jun 2026 02:09:24 +0200
Subject: [PATCH 34/61] fix fadein on load+ numrow display

---
 frontend/src/ts/components/pages/test/Keymap.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/frontend/src/ts/components/pages/test/Keymap.tsx b/frontend/src/ts/components/pages/test/Keymap.tsx
index 7e9417e881ce..116e477b1ea0 100644
--- a/frontend/src/ts/components/pages/test/Keymap.tsx
+++ b/frontend/src/ts/components/pages/test/Keymap.tsx
@@ -178,6 +178,8 @@ function Key(
         (label() ?? "").length >= 3 && "text-em-xs",
       )}
       style={{
+        "--keybgcolor": isNext() ? getTheme().main : getTheme().subAlt,
+        "--keycolor": isNext() ? getTheme().bg : getTheme().sub,
         height: `${(props.height ?? 1) * 2}rem`,
         width: `${(props.width ?? 1) * 2}rem`,
         "margin-left": `${(props.x ?? 0) * 2}rem`,

From 41791de53dc54907933659368ad76d83a5b0f808 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Sun, 21 Jun 2026 12:37:11 +0200
Subject: [PATCH 35/61] alice y values

---
 .../src/ts/components/pages/test/Keymap.tsx   |  1 +
 .../components/pages/test/keymapConverter.ts  | 71 ++++++++++++++++++-
 2 files changed, 71 insertions(+), 1 deletion(-)

diff --git a/frontend/src/ts/components/pages/test/Keymap.tsx b/frontend/src/ts/components/pages/test/Keymap.tsx
index 116e477b1ea0..ac11fc9e8624 100644
--- a/frontend/src/ts/components/pages/test/Keymap.tsx
+++ b/frontend/src/ts/components/pages/test/Keymap.tsx
@@ -183,6 +183,7 @@ function Key(
         height: `${(props.height ?? 1) * 2}rem`,
         width: `${(props.width ?? 1) * 2}rem`,
         "margin-left": `${(props.x ?? 0) * 2}rem`,
+        "margin-top": `${(props.y ?? 0) * 2}rem`,
         transform:
           props.rotation !== undefined ? `rotate(${props.rotation}deg)` : "",
         "background-color": "var(--keybgcolor)",
diff --git a/frontend/src/ts/components/pages/test/keymapConverter.ts b/frontend/src/ts/components/pages/test/keymapConverter.ts
index 1b1da907c75a..e2d7aa318cc9 100644
--- a/frontend/src/ts/components/pages/test/keymapConverter.ts
+++ b/frontend/src/ts/components/pages/test/keymapConverter.ts
@@ -10,6 +10,8 @@ export type KeyDefinition = {
   height?: number;
   /** x-offset in u  */
   x?: number;
+  /** y-offset in u  */
+  y?: number;
   /** rotation in degrees  */
   rotation?: number;
 
@@ -307,6 +309,20 @@ function convertAlice(
         colGaps: { 7: 0.25 },
         showAllKeys,
       }),
+      y: ({ col }) => {
+        // if (col === 0) return 0.25;
+        if (col === 2) return -0.1;
+        if (col === 3) return 0.1;
+        if (col === 4) return 0.3;
+        if (col === 5) return 0.5;
+        if (col === 6) return 0.7;
+        if (col === 7) return 0.7;
+        if (col === 8) return 0.5;
+        if (col === 9) return 0.3;
+        if (col === 10) return 0.1;
+        if (col === 11) return -0.1;
+        return undefined;
+      },
       skip: ({ col }) => !options.showAllKeys && col === 0,
       rotation: calcRotation({ start: 3, split: 6, end: 10 }),
     },
@@ -316,6 +332,20 @@ function convertAlice(
         colGaps: { 1: 0.25, 5: 0.5, 9: 0.25 },
         showAllKeys,
       }),
+      y: ({ col }) => {
+        // if (col === 0) return 0.25;
+        if (col === 2) return 0.2;
+        if (col === 3) return 0.4;
+        if (col === 4) return 0.6;
+        //
+        if (col === 5) return 0.7;
+        if (col === 6) return 0.5;
+        if (col === 7) return 0.3;
+        if (col === 8) return 0.1;
+        // if (col === 10) return 0.1;
+        // if (col === 11) return -0.1;
+        return undefined;
+      },
       skip: ({ col }) => !options.showAllKeys && col === 12,
       rotation: calcRotation({ start: 1, split: 4, end: 8 }),
     },
@@ -325,19 +355,54 @@ function convertAlice(
         colGaps: { 1: 0.25, 5: 0.75, 9: 0.25 },
         showAllKeys,
       }),
+      y: ({ col }) => {
+        // if (col === 0) return 0.25;
+        if (col === 2) return 0.2;
+        if (col === 3) return 0.4;
+        if (col === 4) return 0.6;
+        //
+        if (col === 5) return 0.6;
+        if (col === 6) return 0.4;
+        if (col === 7) return 0.2;
+        // if (col === 8) return 0.2;
+        // if (col === 9) return 0;
+        // if (col === 10) return 0.1;
+        // if (col === 11) return -0.1;
+        return undefined;
+      },
       isHoming: ({ col }) => col === 3 || col === 6,
       rotation: calcRotation({ start: 1, split: 4, end: 8 }),
     },
     row4: {
       x: calcGap({ firstColGap: 1, colGaps: { 8: 0.25 }, showAllKeys }),
+      y: ({ col }) => {
+        // if (col === 0) return 0.25;
+        if (col === 2) return 0.2;
+        if (col === 3) return 0.4;
+        if (col === 4) return 0.6;
+        //
+        if (col === 5) return 0.45;
+        if (col === 6) return 0.25;
+        if (col === 7) return 0.1;
+        // if (col === 8) return 0.2;
+        // if (col === 9) return 0;
+        // if (col === 10) return 0.1;
+        // if (col === 11) return -0.1;
+        return undefined;
+      },
       rotation: calcRotation({ start: 1, split: 4, end: 7 }),
     },
     row5: {
       x: calcGap({
         firstColGap: hasRow5ExtraKey ? 4.75 : 3,
-        colGaps: { 1: 0.5 },
+        colGaps: { 1: 0.4 },
         showAllKeys,
       }),
+      y: ({ col }) => {
+        if (col === 0) return 0.4;
+        if (col === 1) return 0.4;
+        return undefined;
+      },
       width: ({ col }) => (hasRow5ExtraKey && col === 1 ? undefined : 3),
 
       isLayoutIndicator: ({ col }) => col === layoutIndicatorIndex,
@@ -351,6 +416,7 @@ function convertAlice(
     buildKey(result.row4.at(4)?.legends as string[], {
       rotation: -10,
       x: 0.25,
+      y: 0.6,
     }),
     ...result.row4.slice(5),
   ];
@@ -397,6 +463,7 @@ function convertBase(
         height?: (options: RuleParams) => number | undefined;
         width?: (options: RuleParams) => number | undefined;
         x?: (options: RuleParams) => number | undefined;
+        y?: (options: RuleParams) => number | undefined;
         rotation?: (options: RuleParams) => number | undefined;
         skip?: (options: RuleParams) => boolean;
         isLayoutIndicator?: (options: RuleParams) => boolean;
@@ -420,6 +487,7 @@ function convertBase(
           const height = cols?.[row]?.height?.({ col: colNum });
           const width = cols?.[row]?.width?.({ col: colNum });
           const x = cols?.[row]?.x?.({ col: colNum });
+          const y = cols?.[row]?.y?.({ col: colNum });
           const rotation = cols?.[row]?.rotation?.({ col: colNum });
           const isLayoutIndicator = cols?.[row]?.isLayoutIndicator?.({
             col: colNum,
@@ -431,6 +499,7 @@ function convertBase(
             ...(height !== undefined ? { height } : {}),
             ...(width !== undefined ? { width } : {}),
             ...(x !== undefined ? { x } : {}),
+            ...(y !== undefined ? { y } : {}),
             ...(rotation !== undefined ? { rotation } : {}),
             ...(isLayoutIndicator === true ? { isLayoutIndicator: true } : {}),
             ...(isHoming === true ? { isHoming: true } : {}),

From 1c18e551e1972d946f77ffe34fca9aa999c262f9 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sun, 21 Jun 2026 13:14:50 +0200
Subject: [PATCH 36/61] use map instead of if

---
 .../components/pages/test/keymapConverter.ts  | 109 ++++++++----------
 1 file changed, 46 insertions(+), 63 deletions(-)

diff --git a/frontend/src/ts/components/pages/test/keymapConverter.ts b/frontend/src/ts/components/pages/test/keymapConverter.ts
index e2d7aa318cc9..45c9efb9cf66 100644
--- a/frontend/src/ts/components/pages/test/keymapConverter.ts
+++ b/frontend/src/ts/components/pages/test/keymapConverter.ts
@@ -309,20 +309,19 @@ function convertAlice(
         colGaps: { 7: 0.25 },
         showAllKeys,
       }),
-      y: ({ col }) => {
-        // if (col === 0) return 0.25;
-        if (col === 2) return -0.1;
-        if (col === 3) return 0.1;
-        if (col === 4) return 0.3;
-        if (col === 5) return 0.5;
-        if (col === 6) return 0.7;
-        if (col === 7) return 0.7;
-        if (col === 8) return 0.5;
-        if (col === 9) return 0.3;
-        if (col === 10) return 0.1;
-        if (col === 11) return -0.1;
-        return undefined;
-      },
+      y: ({ col }) =>
+        ({
+          2: -0.1,
+          3: 0.1,
+          4: 0.3,
+          5: 0.5,
+          6: 0.7,
+          7: 0.7,
+          8: 0.5,
+          9: 0.3,
+          10: 0.1,
+          11: -0.1,
+        })[col],
       skip: ({ col }) => !options.showAllKeys && col === 0,
       rotation: calcRotation({ start: 3, split: 6, end: 10 }),
     },
@@ -332,20 +331,16 @@ function convertAlice(
         colGaps: { 1: 0.25, 5: 0.5, 9: 0.25 },
         showAllKeys,
       }),
-      y: ({ col }) => {
-        // if (col === 0) return 0.25;
-        if (col === 2) return 0.2;
-        if (col === 3) return 0.4;
-        if (col === 4) return 0.6;
-        //
-        if (col === 5) return 0.7;
-        if (col === 6) return 0.5;
-        if (col === 7) return 0.3;
-        if (col === 8) return 0.1;
-        // if (col === 10) return 0.1;
-        // if (col === 11) return -0.1;
-        return undefined;
-      },
+      y: ({ col }) =>
+        ({
+          2: 0.2,
+          3: 0.4,
+          4: 0.6,
+          5: 0.7,
+          6: 0.5,
+          7: 0.3,
+          8: 0.1,
+        })[col],
       skip: ({ col }) => !options.showAllKeys && col === 12,
       rotation: calcRotation({ start: 1, split: 4, end: 8 }),
     },
@@ -355,41 +350,29 @@ function convertAlice(
         colGaps: { 1: 0.25, 5: 0.75, 9: 0.25 },
         showAllKeys,
       }),
-      y: ({ col }) => {
-        // if (col === 0) return 0.25;
-        if (col === 2) return 0.2;
-        if (col === 3) return 0.4;
-        if (col === 4) return 0.6;
-        //
-        if (col === 5) return 0.6;
-        if (col === 6) return 0.4;
-        if (col === 7) return 0.2;
-        // if (col === 8) return 0.2;
-        // if (col === 9) return 0;
-        // if (col === 10) return 0.1;
-        // if (col === 11) return -0.1;
-        return undefined;
-      },
+      y: ({ col }) =>
+        ({
+          2: 0.2,
+          3: 0.4,
+          4: 0.6,
+          5: 0.6,
+          6: 0.4,
+          7: 0.2,
+        })[col],
       isHoming: ({ col }) => col === 3 || col === 6,
       rotation: calcRotation({ start: 1, split: 4, end: 8 }),
     },
     row4: {
       x: calcGap({ firstColGap: 1, colGaps: { 8: 0.25 }, showAllKeys }),
-      y: ({ col }) => {
-        // if (col === 0) return 0.25;
-        if (col === 2) return 0.2;
-        if (col === 3) return 0.4;
-        if (col === 4) return 0.6;
-        //
-        if (col === 5) return 0.45;
-        if (col === 6) return 0.25;
-        if (col === 7) return 0.1;
-        // if (col === 8) return 0.2;
-        // if (col === 9) return 0;
-        // if (col === 10) return 0.1;
-        // if (col === 11) return -0.1;
-        return undefined;
-      },
+      y: ({ col }) =>
+        ({
+          2: 0.2,
+          3: 0.4,
+          4: 0.6,
+          5: 0.45,
+          6: 0.25,
+          7: 0.1,
+        })[col],
       rotation: calcRotation({ start: 1, split: 4, end: 7 }),
     },
     row5: {
@@ -398,11 +381,11 @@ function convertAlice(
         colGaps: { 1: 0.4 },
         showAllKeys,
       }),
-      y: ({ col }) => {
-        if (col === 0) return 0.4;
-        if (col === 1) return 0.4;
-        return undefined;
-      },
+      y: ({ col }) =>
+        ({
+          0: 0.4,
+          1: 0.4,
+        })[col],
       width: ({ col }) => (hasRow5ExtraKey && col === 1 ? undefined : 3),
 
       isLayoutIndicator: ({ col }) => col === layoutIndicatorIndex,

From d6c473b0790ac4330e9e9ccf08ca87134291c930 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sun, 21 Jun 2026 14:33:53 +0200
Subject: [PATCH 37/61] new approach

---
 .../pages/test/keymapConverter.spec.ts        |   5 +-
 .../src/ts/components/pages/test/Keymap.tsx   |   1 -
 .../components/pages/test/keymapConverter.ts  | 646 +++++-------------
 3 files changed, 157 insertions(+), 495 deletions(-)

diff --git a/frontend/__tests__/components/pages/test/keymapConverter.spec.ts b/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
index 23abf1078544..bd6eadb7c89d 100644
--- a/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
+++ b/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
@@ -12,7 +12,6 @@ describe("keymap converter", () => {
     describe("staggered", () => {
       it("converts qwerty staggered", () => {
         const result = convertLayoutToKeymap(qwertyLayout as LayoutObject, {
-          displayName: "qwerty",
           keymapStyle: "staggered",
           showAllKeys: false,
         });
@@ -86,7 +85,6 @@ describe("keymap converter", () => {
 
       it("converts qwerty staggered all keys", () => {
         const result = convertLayoutToKeymap(qwertyLayout as LayoutObject, {
-          displayName: "qwerty",
           keymapStyle: "staggered",
           showAllKeys: true,
         });
@@ -94,7 +92,7 @@ describe("keymap converter", () => {
         // Test only keys added when showAllKeys is true (not covered by basic staggered test)
         // Row1: BS added at end
         expect(result.row1[result.row1.length - 1], "row1 last").toEqual({
-          legends: ["BS", "BS", "BS", "BS"],
+          legends: ["Backspace", "Backspace", "Backspace", "Backspace"],
           width: 2,
         });
 
@@ -165,7 +163,6 @@ describe("keymap converter", () => {
 
       it("converts qwertz staggered", () => {
         const result = convertLayoutToKeymap(qwertzLayout as LayoutObject, {
-          displayName: "qwertz",
           keymapStyle: "staggered",
           showAllKeys: false,
         });
diff --git a/frontend/src/ts/components/pages/test/Keymap.tsx b/frontend/src/ts/components/pages/test/Keymap.tsx
index ac11fc9e8624..f8d5ae8eb391 100644
--- a/frontend/src/ts/components/pages/test/Keymap.tsx
+++ b/frontend/src/ts/components/pages/test/Keymap.tsx
@@ -92,7 +92,6 @@ function Keyboard(props: { displayName: string; layoutData: LayoutObject }) {
   //TODO handle funbox layout_mirror
   const keyboardDef = createMemo(() =>
     convertLayoutToKeymap(props.layoutData, {
-      displayName: props.displayName,
       keymapStyle: getConfig.keymapStyle,
       showAllKeys: getConfig.keymapLayoutStyle === "full",
     }),
diff --git a/frontend/src/ts/components/pages/test/keymapConverter.ts b/frontend/src/ts/components/pages/test/keymapConverter.ts
index 45c9efb9cf66..7b72b092ddec 100644
--- a/frontend/src/ts/components/pages/test/keymapConverter.ts
+++ b/frontend/src/ts/components/pages/test/keymapConverter.ts
@@ -1,6 +1,7 @@
 import { KeymapStyle } from "@monkeytype/schemas/configs";
 import { KeyLegends, LayoutObject } from "@monkeytype/schemas/layouts";
 import { typedEntries } from "../../../utils/misc";
+import { OneOf } from "../../../utils/types";
 
 export type KeyDefinition = {
   legends: KeyLegends;
@@ -24,478 +25,86 @@ export type KeyboardDefinition = Record<
 >;
 
 type ConvertOptions = {
-  displayName: string;
   keymapStyle: KeymapStyle;
   showAllKeys: boolean;
 };
 
-type RuleParams = {
-  col: number;
-};
-
-type ExtraKeysConfig = {
-  row1Append?: KeyDefinition[];
-  row2Prepend?: KeyDefinition[];
-  row2Append?: KeyDefinition[];
-  row3Prepend?: KeyDefinition[];
-  row3Append?: KeyDefinition[];
-  row4Prepend?: KeyDefinition[];
-  row4Append?: KeyDefinition[];
-  row5Prepend?: KeyDefinition[];
-  row5Append?: KeyDefinition[];
-};
-
 export function convertLayoutToKeymap(
   rawLayout: LayoutObject,
   options: ConvertOptions,
 ): KeyboardDefinition {
   const layout = structuredClone(rawLayout);
-  switch (options.keymapStyle) {
-    case "staggered":
-    case "split":
-      return convertStaggered(layout, options);
-    case "matrix":
-    case "split_matrix":
-      return convertMatrix(layout, options);
-    case "steno":
-    case "steno_matrix":
-      return convertSteno(options);
-    case "alice":
-      return convertAlice(layout, options);
-    default:
-      throw new Error(`not supported style ${options.keymapStyle}`);
-  }
-}
-
-function convertStaggered(
-  layout: LayoutObject,
-  options: ConvertOptions,
-): KeyboardDefinition {
-  const isSplit = options.keymapStyle === "split";
-  const isIso = layout.type === "iso";
-  const hasRow5ExtraKey = layout.keys.row5.length !== 1;
-  const showAllKeys = options.showAllKeys;
-
-  if (isSplit && !hasRow5ExtraKey) {
-    layout.keys.row5.push(buildLegends([" "]));
-  }
-
-  const layoutIndicatorIndex = findLayoutIndicatorIndex(layout.keys.row5);
-
-  const result = convertBase(layout, options, {
-    row1: {
-      x: calcGap({ firstColGap: 0, splitCol: 7, isSplit, showAllKeys }),
-      skip: ({ col }) => !options.showAllKeys && col === 0,
-    },
-    row2: {
-      x: calcGap({ firstColGap: 0.5, isSplit, showAllKeys }),
-      skip: ({ col }) => !options.showAllKeys && col === 12,
-      width: ({ col }) => (col === 12 ? 1.5 : undefined),
-    },
-    row3: {
-      x: calcGap({ firstColGap: 1, isSplit, showAllKeys }),
-      isHoming: ({ col }) => col === 3 || col === 6,
-    },
-    row4: {
-      x: calcGap({ firstColGap: isIso ? 0.25 : 1.5, isSplit, showAllKeys }),
-    },
-    row5: {
-      x: calcGap({
-        firstColGap: hasRow5ExtraKey ? (isSplit ? 5.5 : 4) : 3.5,
-        splitCol: 1,
-        isSplit,
-        showAllKeys,
-      }),
-      width: ({ col }) => {
-        if (
-          (!showAllKeys || !isSplit) &&
-          layout.keys.row5[col]?.at(0) !== " "
-        ) {
-          return undefined;
-        }
-        if (isSplit) {
-          if (showAllKeys) {
-            return col === layoutIndicatorIndex ? 3.5 : 3;
-          } else {
-            return 3;
-          }
-        }
-        if (showAllKeys) return hasRow5ExtraKey ? 5.25 : 6.25;
-        return 6;
-      },
-      isLayoutIndicator: ({ col }) => col === layoutIndicatorIndex,
-    },
-  });
-
-  if (options.showAllKeys) {
-    const extraKeysConfig: ExtraKeysConfig = {
-      row1Append: [buildKey(["BS"], { width: 2 })],
-      row2Prepend: [buildKey(["Tab"], { width: 1.5 })],
-      row2Append: isIso
-        ? [buildKey(["Enter"], { width: 1.5, height: 2 })]
-        : undefined,
-      row3Prepend: [buildKey(["Caps"], { width: 1.75 })],
-      row3Append: !isIso ? [buildKey(["Enter"], { width: 2.25 })] : undefined,
-      row4Prepend: [buildKey(["Shift"], { width: isIso ? 1.25 : 2.25 })],
-      row4Append: [buildKey(["Shift"], { width: 2.75 })],
-      row5Prepend: [
-        buildKey(["Ctrl"], { width: 1.25 }),
-        buildKey(["Monke"], { width: 1.25 }),
-        buildKey(["Alt"], { width: 1.25 }),
-      ],
-      row5Append: [
-        buildKey(["Alt"], { width: 1.25 }),
-        buildKey(["Monke"], { width: 1.25 }),
-        buildKey(["Meta"], { width: 1.25 }),
-        buildKey(["Ctrl"], { width: 1.25 }),
-      ],
-    };
 
-    addExtraKeys(result, extraKeysConfig);
+  if (options.keymapStyle === "staggered" && layout.type === "ansi") {
+    return convert({
+      legends: layout.keys,
+      keymap: staggeredAnsi,
+      convertOptions: options,
+    });
   }
-
-  return result;
+  throw new Error(`not supported style ${options.keymapStyle}`);
 }
 
-function convertMatrix(
-  layout: LayoutObject,
-  options: ConvertOptions,
-): KeyboardDefinition {
-  const isSplit = options.keymapStyle === "split_matrix";
-  const hasRow5ExtraKey = layout.keys.row5.length !== 1;
-  const showAllKeys = options.showAllKeys;
-
-  if (isSplit && !hasRow5ExtraKey) {
-    layout.keys.row5.push(buildLegends([" "]));
-  }
-
-  const layoutIndicatorIndex = findLayoutIndicatorIndex(layout.keys.row5);
-
-  const result = convertBase(layout, options, {
-    row1: {
-      skip: ({ col }) => (!showAllKeys && col === 0) || col > 10,
-      x: calcGap({ splitCol: 6, isSplit, showAllKeys }),
-    },
-    row2: {
-      skip: ({ col }) => col > 9,
-      x: calcGap({ isSplit, showAllKeys }),
-    },
-    row3: {
-      skip: ({ col }) => col > (showAllKeys ? 10 : 9),
-      x: calcGap({ isSplit, showAllKeys }),
-      isHoming: ({ col }) => col === 3 || col === 6,
-    },
-    row4: {
-      skip: ({ col }) => col > 9,
-      x: calcGap({ isSplit, showAllKeys }),
-    },
-    row5: {
-      x: calcGap({
-        firstColGap: isSplit || hasRow5ExtraKey ? 2 : 3,
-        splitCol: 1,
-        isSplit,
-        showAllKeys,
-      }),
-      width: () => (isSplit || hasRow5ExtraKey ? 3 : showAllKeys ? 6 : 4),
-      isLayoutIndicator: ({ col }) => col === layoutIndicatorIndex,
-    },
-  });
-
-  if (options.showAllKeys) {
-    const extraKeysConfig: ExtraKeysConfig = {
-      row1Append: [buildKey(["BS"])],
-      row2Prepend: [buildKey(["Tab"])],
-      row2Append: [buildKey(["Del"])],
-      row3Prepend: [buildKey(["Esc"])],
-      row4Prepend: [buildKey(["Shift"])],
-      row4Append: [buildKey(["Enter"])],
-      row5Prepend: [buildKey(["Ctrl"]), buildKey(["Monke"]), buildKey(["Alt"])],
-      row5Append: [buildKey(["Alt"]), buildKey(["Meta"]), buildKey(["Ctrl"])],
-    };
-
-    addExtraKeys(result, extraKeysConfig);
-  }
-
-  return result;
-}
-
-function convertSteno(options: ConvertOptions): KeyboardDefinition {
-  const isSplit = options.keymapStyle === "steno_matrix";
-  const showAllKeys = options.showAllKeys;
-
-  const layout: LayoutObject = {
-    keymapShowTopRow: true,
-    type: "matrix",
-    keys: {
-      row1: [],
-      row2: [
-        ["s", "S"],
-        ["t", "T"],
-        ["p", "P"],
-        ["h", "H"],
-        ["*", "*"],
-        ["f", "F"],
-        ["p", "P"],
-        ["l", "L"],
-        ["t", "T"],
-        ["d", "D"],
-      ],
-      row3: [
-        ["s", "S"],
-        ["k", "K"],
-        ["w", "W"],
-        ["r", "R"],
-        ["*", "*"],
-        ["r", "R"],
-        ["b", "B"],
-        ["g", "G"],
-        ["s", "S"],
-        ["z", "Z"],
-      ],
-      row4: [
-        ["a", "A"],
-        ["o", "O"],
-        ["e", "E"],
-        ["u", "U"],
-      ],
-      row5: [],
-    },
-  };
-
-  const isLargeKey = (col: number): boolean => !isSplit && [0, 4].includes(col);
+function convert(options: {
+  legends: LayoutObject["keys"];
+  keymap: KeymapLayout;
+  convertOptions: ConvertOptions;
+}): KeyboardDefinition {
+  const isShowAllKeys = options.convertOptions.showAllKeys ?? false;
 
-  const base = convertBase(layout, options, {
-    row2: {
-      height: ({ col }) => (isLargeKey(col) ? 2 : undefined),
-      x: calcGap({ isSplit, showAllKeys }),
-    },
-    row3: {
-      skip: ({ col }) => isLargeKey(col),
-      x: calcGap({ isSplit, showAllKeys, colGaps: { 1: 1, 5: 1 } }),
-    },
-    row4: {
-      x: ({ col }) => (isSplit ? { 0: 3, 2: 1 } : { 0: 2.25, 2: 0.5 })[col],
-    },
-  });
-  return base;
-}
-
-function convertAlice(
-  layout: LayoutObject,
-  options: ConvertOptions,
-): KeyboardDefinition {
-  const hasRow5ExtraKey = layout.keys.row5.length !== 1;
-  const showAllKeys = options.showAllKeys;
-
-  if (!hasRow5ExtraKey) {
-    layout.keys.row5.push(buildLegends([" "]));
-  }
-
-  const layoutIndicatorIndex = findLayoutIndicatorIndex(layout.keys.row5);
-
-  const calcRotation =
-    ({ start, split, end }: { start: number; split: number; end: number }) =>
-    ({ col }: { col: number }): number | undefined =>
-      col >= start && col <= split
-        ? 10
-        : col > split && col <= end
-          ? -10
-          : undefined;
-
-  const result = convertBase(layout, options, {
-    row1: {
-      x: calcGap({
-        firstColGap: 0,
-        colGaps: { 7: 0.25 },
-        showAllKeys,
-      }),
-      y: ({ col }) =>
-        ({
-          2: -0.1,
-          3: 0.1,
-          4: 0.3,
-          5: 0.5,
-          6: 0.7,
-          7: 0.7,
-          8: 0.5,
-          9: 0.3,
-          10: 0.1,
-          11: -0.1,
-        })[col],
-      skip: ({ col }) => !options.showAllKeys && col === 0,
-      rotation: calcRotation({ start: 3, split: 6, end: 10 }),
-    },
-    row2: {
-      x: calcGap({
-        firstColGap: 0.25,
-        colGaps: { 1: 0.25, 5: 0.5, 9: 0.25 },
-        showAllKeys,
-      }),
-      y: ({ col }) =>
-        ({
-          2: 0.2,
-          3: 0.4,
-          4: 0.6,
-          5: 0.7,
-          6: 0.5,
-          7: 0.3,
-          8: 0.1,
-        })[col],
-      skip: ({ col }) => !options.showAllKeys && col === 12,
-      rotation: calcRotation({ start: 1, split: 4, end: 8 }),
-    },
-    row3: {
-      x: calcGap({
-        firstColGap: 0.5,
-        colGaps: { 1: 0.25, 5: 0.75, 9: 0.25 },
-        showAllKeys,
-      }),
-      y: ({ col }) =>
-        ({
-          2: 0.2,
-          3: 0.4,
-          4: 0.6,
-          5: 0.6,
-          6: 0.4,
-          7: 0.2,
-        })[col],
-      isHoming: ({ col }) => col === 3 || col === 6,
-      rotation: calcRotation({ start: 1, split: 4, end: 8 }),
-    },
-    row4: {
-      x: calcGap({ firstColGap: 1, colGaps: { 8: 0.25 }, showAllKeys }),
-      y: ({ col }) =>
-        ({
-          2: 0.2,
-          3: 0.4,
-          4: 0.6,
-          5: 0.45,
-          6: 0.25,
-          7: 0.1,
-        })[col],
-      rotation: calcRotation({ start: 1, split: 4, end: 7 }),
-    },
-    row5: {
-      x: calcGap({
-        firstColGap: hasRow5ExtraKey ? 4.75 : 3,
-        colGaps: { 1: 0.4 },
-        showAllKeys,
-      }),
-      y: ({ col }) =>
-        ({
-          0: 0.4,
-          1: 0.4,
-        })[col],
-      width: ({ col }) => (hasRow5ExtraKey && col === 1 ? undefined : 3),
-
-      isLayoutIndicator: ({ col }) => col === layoutIndicatorIndex,
-      rotation: ({ col }) => (col === 0 ? 10 : -10),
-    },
-  });
-
-  //insert second B key
-  result.row4 = [
-    ...result.row4.slice(0, 5),
-    buildKey(result.row4.at(4)?.legends as string[], {
-      rotation: -10,
-      x: 0.25,
-      y: 0.6,
-    }),
-    ...result.row4.slice(5),
-  ];
-
-  /*
-  if (options.showAllKeys) {
-    const extraKeysConfig: ExtraKeysConfig = {
-      row1Append: [buildKey(["BS"], { width: 2 })],
-      row2Prepend: [buildKey(["Tab"], { width: 1.5 })],
-      row2Append: isIso
-        ? [buildKey(["Enter"], { width: 1.5, height: 2 })]
-        : undefined,
-      row3Prepend: [buildKey(["Caps"], { width: 1.75 })],
-      row3Append: !isIso ? [buildKey(["Enter"], { width: 2.25 })] : undefined,
-      row4Prepend: [buildKey(["Shift"], { width: isIso ? 1.25 : 2.25 })],
-      row4Append: [buildKey(["Shift"], { width: 2.75 })],
-      row5Prepend: [
-        buildKey(["Ctrl"], { width: 1.25 }),
-        buildKey(["Monke"], { width: 1.25 }),
-        buildKey(["Alt"], { width: 1.25 }),
-      ],
-      row5Append: [
-        buildKey(["Alt"], { width: 1.25 }),
-        buildKey(["Monke"], { width: 1.25 }),
-        buildKey(["Meta"], { width: 1.25 }),
-        buildKey(["Ctrl"], { width: 1.25 }),
-      ],
-    };
-
-    addExtraKeys(result, extraKeysConfig);
-  }
-*/
-  return result;
-}
-
-function convertBase(
-  layout: LayoutObject,
-  options: ConvertOptions,
-  cols?: Partial<
-    Record<
-      keyof LayoutObject["keys"],
-      {
-        legend?: (options: RuleParams) => KeyLegends | undefined;
-        height?: (options: RuleParams) => number | undefined;
-        width?: (options: RuleParams) => number | undefined;
-        x?: (options: RuleParams) => number | undefined;
-        y?: (options: RuleParams) => number | undefined;
-        rotation?: (options: RuleParams) => number | undefined;
-        skip?: (options: RuleParams) => boolean;
-        isLayoutIndicator?: (options: RuleParams) => boolean;
-        isHoming?: (options: RuleParams) => boolean;
-      }
-    >
-  >,
-): KeyboardDefinition {
-  const result = Object.fromEntries(
-    typedEntries(layout.keys).map(([row, keys]) => [
+  return Object.fromEntries(
+    typedEntries(options.keymap).map(([row, keys]) => [
       row,
       keys
-        .map((key, colNum) => {
-          if (cols?.[row]?.skip?.({ col: colNum }) ?? false) {
+        .map((keyDef) => {
+          const layoutLegend =
+            keyDef.layoutPosition &&
+            options.legends[keyDef.layoutPosition.row]?.[
+              keyDef.layoutPosition.col
+            ];
+
+          const legends = keyDef.isLayoutIndicator
+            ? buildLegends([" "])
+            : buildLegends(
+                keyDef.legend !== undefined
+                  ? [keyDef.legend]
+                  : (layoutLegend as string[]),
+              );
+
+          if (keyDef.isExtraKey && !isShowAllKeys) {
             return undefined;
           }
 
-          const legends = buildLegends(
-            cols?.[row]?.legend?.({ col: colNum }) ?? key,
-          );
-          const height = cols?.[row]?.height?.({ col: colNum });
-          const width = cols?.[row]?.width?.({ col: colNum });
-          const x = cols?.[row]?.x?.({ col: colNum });
-          const y = cols?.[row]?.y?.({ col: colNum });
-          const rotation = cols?.[row]?.rotation?.({ col: colNum });
-          const isLayoutIndicator = cols?.[row]?.isLayoutIndicator?.({
-            col: colNum,
-          });
-          const isHoming = cols?.[row]?.isHoming?.({ col: colNum });
+          console.log("### ready", legends);
+
+          const final = {
+            ...keyDef,
+            ...(isShowAllKeys ? keyDef.extraKeysOverride : {}),
+          };
 
           return {
             legends,
-            ...(height !== undefined ? { height } : {}),
-            ...(width !== undefined ? { width } : {}),
-            ...(x !== undefined ? { x } : {}),
-            ...(y !== undefined ? { y } : {}),
-            ...(rotation !== undefined ? { rotation } : {}),
-            ...(isLayoutIndicator === true ? { isLayoutIndicator: true } : {}),
-            ...(isHoming === true ? { isHoming: true } : {}),
+            ...(final.height !== undefined ? { height: final.height } : {}),
+            ...(final.width !== undefined ? { width: final.width } : {}),
+            ...(final.x !== undefined ? { x: final.x } : {}),
+            ...(final.y !== undefined ? { y: final.y } : {}),
+            ...(final.rotation !== undefined
+              ? { rotation: final.rotation }
+              : {}),
+            ...(final.isLayoutIndicator === true
+              ? { isLayoutIndicator: true }
+              : {}),
+            ...(final.isHoming === true ? { isHoming: true } : {}),
           } satisfies KeyDefinition;
         })
+        //filter skipped keys
         .filter((it) => it !== undefined),
     ]),
   ) as KeyboardDefinition;
-
-  return result;
 }
 
 function buildLegends(legends: KeyLegends): KeyLegends {
+  if (legends === undefined) return ["error", "error", "error", "error"];
   switch (legends.length) {
     case 1:
       return new Array<string>(4).fill(legends.at(0) as string);
@@ -508,51 +117,108 @@ function buildLegends(legends: KeyLegends): KeyLegends {
   }
 }
 
-function addExtraKeys(
-  keyboard: KeyboardDefinition,
-  config: ExtraKeysConfig | undefined,
-): void {
-  if (!config) return;
-
-  if (config.row1Append) keyboard.row1.push(...config.row1Append);
-  if (config.row2Prepend) keyboard.row2.unshift(...config.row2Prepend);
-  if (config.row2Append) keyboard.row2.push(...config.row2Append);
-  if (config.row3Prepend) keyboard.row3.unshift(...config.row3Prepend);
-  if (config.row3Append) keyboard.row3.push(...config.row3Append);
-  if (config.row4Prepend) keyboard.row4.unshift(...config.row4Prepend);
-  if (config.row4Append) keyboard.row4.push(...config.row4Append);
-  if (config.row5Prepend) keyboard.row5.unshift(...config.row5Prepend);
-  if (config.row5Append) keyboard.row5.push(...config.row5Append);
-}
-
-function buildKey(
-  legends: KeyLegends,
-  options?: Partial<KeyDefinition>,
-): KeyDefinition {
-  const key: KeyDefinition = { ...options, legends: buildLegends(legends) };
-
-  return key;
-}
-
-function findLayoutIndicatorIndex(keys: KeyLegends[]): number {
-  return keys.findIndex((it) => it.at(0) === " ");
-}
-
-type NonZeroColGaps = Record<Exclude<keyof Record<number, number>, 0>, number>;
-
-function calcGap(params: {
-  firstColGap?: number;
-  splitCol?: number;
-  isSplit?: boolean;
-  showAllKeys: boolean;
-  colGaps?: NonZeroColGaps;
-}) {
-  return ({ col }: { col: number }) => {
-    if (col === 0) return params.showAllKeys ? undefined : params.firstColGap;
-    if (params.isSplit && col === (params.splitCol ?? 5)) {
-      return 1;
-    }
-    if (params.isSplit) return undefined;
-    return params.colGaps?.[col];
-  };
-}
+type LayoutPosition = {
+  row: keyof LayoutObject["keys"];
+  col: number;
+};
+type LayoutKey = Omit<KeyDefinition, "legends"> & {
+  isExtraKey?: boolean;
+  extraKeysOverride?: Omit<KeyDefinition, "legends">;
+} & OneOf<{
+    isLayoutIndicator: true;
+    layoutPosition: LayoutPosition;
+    legend: string;
+  }>;
+
+type KeymapLayout = Record<keyof LayoutObject["keys"], LayoutKey[]>;
+
+const staggeredAnsi: KeymapLayout = {
+  row1: [
+    { layoutPosition: { col: 0, row: "row1" }, isExtraKey: true },
+    { layoutPosition: { col: 1, row: "row1" } },
+    { layoutPosition: { col: 2, row: "row1" } },
+    { layoutPosition: { col: 3, row: "row1" } },
+    { layoutPosition: { col: 4, row: "row1" } },
+    { layoutPosition: { col: 5, row: "row1" } },
+    { layoutPosition: { col: 6, row: "row1" } },
+    { layoutPosition: { col: 7, row: "row1" } },
+    { layoutPosition: { col: 8, row: "row1" } },
+    { layoutPosition: { col: 9, row: "row1" } },
+    { layoutPosition: { col: 10, row: "row1" } },
+    { layoutPosition: { col: 11, row: "row1" } },
+    { layoutPosition: { col: 12, row: "row1" } },
+    { legend: "Backspace", width: 2, isExtraKey: true },
+  ],
+  row2: [
+    { legend: "Tab", width: 1.5, isExtraKey: true },
+    {
+      layoutPosition: { col: 0, row: "row2" },
+      x: 0.5,
+      extraKeysOverride: { x: 0 },
+    },
+    { layoutPosition: { col: 1, row: "row2" } },
+    { layoutPosition: { col: 2, row: "row2" } },
+    { layoutPosition: { col: 3, row: "row2" } },
+    { layoutPosition: { col: 4, row: "row2" } },
+    { layoutPosition: { col: 5, row: "row2" } },
+    { layoutPosition: { col: 6, row: "row2" } },
+    { layoutPosition: { col: 7, row: "row2" } },
+    { layoutPosition: { col: 8, row: "row2" } },
+    { layoutPosition: { col: 9, row: "row2" } },
+    { layoutPosition: { col: 10, row: "row2" } },
+    { layoutPosition: { col: 11, row: "row2" } },
+    { layoutPosition: { col: 12, row: "row2" }, width: 1.5, isExtraKey: true },
+  ],
+  row3: [
+    { legend: "Caps", width: 1.75, isExtraKey: true },
+    {
+      layoutPosition: { col: 0, row: "row3" },
+      x: 1,
+      extraKeysOverride: { x: 0 },
+    },
+    { layoutPosition: { col: 1, row: "row3" } },
+    { layoutPosition: { col: 2, row: "row3" } },
+    { layoutPosition: { col: 3, row: "row3" }, isHoming: true },
+    { layoutPosition: { col: 4, row: "row3" } },
+    { layoutPosition: { col: 5, row: "row3" } },
+    { layoutPosition: { col: 6, row: "row3" }, isHoming: true },
+    { layoutPosition: { col: 7, row: "row3" } },
+    { layoutPosition: { col: 8, row: "row3" } },
+    { layoutPosition: { col: 9, row: "row3" } },
+    { layoutPosition: { col: 10, row: "row3" } },
+    { legend: "Enter", width: 2.25, isExtraKey: true },
+  ],
+  row4: [
+    { legend: "Shift", width: 2.25, isExtraKey: true },
+    {
+      layoutPosition: { col: 0, row: "row4" },
+      x: 1.5,
+      extraKeysOverride: { x: 0 },
+    },
+    { layoutPosition: { col: 1, row: "row4" } },
+    { layoutPosition: { col: 2, row: "row4" } },
+    { layoutPosition: { col: 3, row: "row4" } },
+    { layoutPosition: { col: 4, row: "row4" } },
+    { layoutPosition: { col: 5, row: "row4" } },
+    { layoutPosition: { col: 6, row: "row4" } },
+    { layoutPosition: { col: 7, row: "row4" } },
+    { layoutPosition: { col: 8, row: "row4" } },
+    { layoutPosition: { col: 9, row: "row4" } },
+    { legend: "Shift", width: 2.75, isExtraKey: true },
+  ],
+  row5: [
+    { legend: "Ctrl", width: 1.25, isExtraKey: true },
+    { legend: "Monke", width: 1.25, isExtraKey: true },
+    { legend: "Alt", width: 1.25, isExtraKey: true },
+    {
+      isLayoutIndicator: true,
+      width: 6,
+      x: 3.5,
+      extraKeysOverride: { width: 6.25, x: 0 },
+    },
+    { legend: "Alt", width: 1.25, isExtraKey: true },
+    { legend: "Monke", width: 1.25, isExtraKey: true },
+    { legend: "Meta", width: 1.25, isExtraKey: true },
+    { legend: "Ctrl", width: 1.25, isExtraKey: true },
+  ],
+};

From 315424526b5d0a11f1fc0414f3aac769f816dcdc Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sun, 21 Jun 2026 15:56:12 +0200
Subject: [PATCH 38/61] use array of arrays to support more rows

---
 .../pages/test/keymapConverter.spec.ts        | 463 ++++++++++--------
 .../components/pages/test/keymapConverter.ts  | 244 +++------
 .../ts/components/pages/test/keymapLayouts.ts | 180 +++++++
 3 files changed, 490 insertions(+), 397 deletions(-)
 create mode 100644 frontend/src/ts/components/pages/test/keymapLayouts.ts

diff --git a/frontend/__tests__/components/pages/test/keymapConverter.spec.ts b/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
index bd6eadb7c89d..0e904a0bb4ac 100644
--- a/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
+++ b/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
@@ -11,12 +11,15 @@ describe("keymap converter", () => {
   describe("convertLayoutToKeymap", () => {
     describe("staggered", () => {
       it("converts qwerty staggered", () => {
-        const result = convertLayoutToKeymap(qwertyLayout as LayoutObject, {
-          keymapStyle: "staggered",
-          showAllKeys: false,
-        });
+        const [row1, row2, row3, row4, row5] = convertLayoutToKeymap(
+          qwertyLayout as LayoutObject,
+          {
+            keymapStyle: "staggered",
+            showAllKeys: false,
+          },
+        );
 
-        expect(result.row1, "row1").toEqual([
+        expect(row1, "row1").toEqual([
           { legends: ["1", "!", "1", "!"] },
           { legends: ["2", "@", "2", "@"] },
           { legends: ["3", "#", "3", "#"] },
@@ -31,7 +34,7 @@ describe("keymap converter", () => {
           { legends: ["=", "+", "=", "+"] },
         ]);
 
-        expect(result.row2, "row2").toEqual([
+        expect(row2, "row2").toEqual([
           { legends: ["q", "Q", "q", "Q"], x: 0.5 },
           { legends: ["w", "W", "w", "W"] },
           { legends: ["e", "E", "e", "E"] },
@@ -46,7 +49,7 @@ describe("keymap converter", () => {
           { legends: ["]", "}", "]", "}"] },
         ]);
 
-        expect(result.row3, "row3").toEqual([
+        expect(row3, "row3").toEqual([
           { legends: ["a", "A", "a", "A"], x: 1 },
           { legends: ["s", "S", "s", "S"] },
           { legends: ["d", "D", "d", "D"] },
@@ -60,7 +63,7 @@ describe("keymap converter", () => {
           { legends: ["'", '"', "'", '"'] },
         ]);
 
-        expect(result.row4, "row4").toEqual([
+        expect(row4, "row4").toEqual([
           { legends: ["z", "Z", "z", "Z"], x: 1.5 },
           { legends: ["x", "X", "x", "X"] },
           { legends: ["c", "C", "c", "C"] },
@@ -73,7 +76,7 @@ describe("keymap converter", () => {
           { legends: ["/", "?", "/", "?"] },
         ]);
 
-        expect(result.row5, "row5").toEqual([
+        expect(row5, "row5").toEqual([
           {
             legends: [" ", " ", " ", " "],
             width: 6,
@@ -84,90 +87,94 @@ describe("keymap converter", () => {
       });
 
       it("converts qwerty staggered all keys", () => {
-        const result = convertLayoutToKeymap(qwertyLayout as LayoutObject, {
-          keymapStyle: "staggered",
-          showAllKeys: true,
-        });
+        const [row1, row2, row3, row4, row5] = convertLayoutToKeymap(
+          qwertyLayout as LayoutObject,
+          {
+            keymapStyle: "staggered",
+            showAllKeys: true,
+          },
+        );
 
         // Test only keys added when showAllKeys is true (not covered by basic staggered test)
         // Row1: BS added at end
-        expect(result.row1[result.row1.length - 1], "row1 last").toEqual({
+        expect(row1?.[row1.length - 1], "row1 last").toEqual({
           legends: ["Backspace", "Backspace", "Backspace", "Backspace"],
           width: 2,
         });
 
         // Row2: Tab added at start
-        expect(result.row2[0], "row2 first").toEqual({
+        expect(row2?.[0], "row2 first").toEqual({
           legends: ["Tab", "Tab", "Tab", "Tab"],
           width: 1.5,
         });
 
         // Row3: Caps added at start, Enter added at end
-        expect(result.row3[0], "row3 first").toEqual({
+        expect(row3?.[0], "row3 first").toEqual({
           legends: ["Caps", "Caps", "Caps", "Caps"],
           width: 1.75,
         });
-        expect(result.row3[result.row3.length - 1], "row3 last").toEqual({
+        expect(row3?.[row3?.length - 1], "row3 last").toEqual({
           legends: ["Enter", "Enter", "Enter", "Enter"],
           width: 2.25,
         });
 
         // Row4: Shift added at start and end
-        expect(result.row4[0], "row4 first").toEqual({
+        expect(row4?.[0], "row4 first").toEqual({
           legends: ["Shift", "Shift", "Shift", "Shift"],
           width: 2.25,
         });
-        expect(result.row4[result.row4.length - 1], "row4 last").toEqual({
+        expect(row4?.[row4.length - 1], "row4 last").toEqual({
           legends: ["Shift", "Shift", "Shift", "Shift"],
           width: 2.75,
         });
 
         // Row5: Ctrl, Monke, Alt at start; Alt, Monke, Meta, Ctrl at end
-        expect(result.row5[0], "row5 first").toEqual({
+        expect(row5?.[0], "row5 first").toEqual({
           legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"],
           width: 1.25,
         });
-        expect(result.row5[1], "row5 second").toEqual({
+        expect(row5?.[1], "row5 second").toEqual({
           legends: ["Monke", "Monke", "Monke", "Monke"],
           width: 1.25,
         });
-        expect(result.row5[2], "row5 third").toEqual({
+        expect(row5?.[2], "row5 third").toEqual({
           legends: ["Alt", "Alt", "Alt", "Alt"],
           width: 1.25,
         });
-        expect(result.row5[result.row5.length - 4], "row5 Alt right").toEqual({
+        expect(row5?.[row5.length - 4], "row5 Alt right").toEqual({
           legends: ["Alt", "Alt", "Alt", "Alt"],
           width: 1.25,
         });
-        expect(result.row5[result.row5.length - 3], "row5 Monke right").toEqual(
-          {
-            legends: ["Monke", "Monke", "Monke", "Monke"],
-            width: 1.25,
-          },
-        );
-        expect(result.row5[result.row5.length - 2], "row5 Meta").toEqual({
+        expect(row5?.[row5.length - 3], "row5 Monke right").toEqual({
+          legends: ["Monke", "Monke", "Monke", "Monke"],
+          width: 1.25,
+        });
+        expect(row5?.[row5.length - 2], "row5 Meta").toEqual({
           legends: ["Meta", "Meta", "Meta", "Meta"],
           width: 1.25,
         });
-        expect(result.row5[result.row5.length - 1], "row5 last").toEqual({
+        expect(row5?.[row5.length - 1], "row5 last").toEqual({
           legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"],
           width: 1.25,
         });
 
         // Also verify total counts are as expected with extra keys
-        expect(result.row1.length, "row1 length").toBe(14);
-        expect(result.row2.length, "row2 length").toBe(14);
-        expect(result.row3.length, "row3 length").toBe(13);
-        expect(result.row4.length, "row4 length").toBe(12);
+        expect(row1?.length, "row1 length").toBe(14);
+        expect(row2?.length, "row2 length").toBe(14);
+        expect(row3?.length, "row3 length").toBe(13);
+        expect(row4?.length, "row4 length").toBe(12);
       });
 
       it("converts qwertz staggered", () => {
-        const result = convertLayoutToKeymap(qwertzLayout as LayoutObject, {
-          keymapStyle: "staggered",
-          showAllKeys: false,
-        });
+        const [row1, row2, row3, row4, row5] = convertLayoutToKeymap(
+          qwertzLayout as LayoutObject,
+          {
+            keymapStyle: "staggered",
+            showAllKeys: false,
+          },
+        );
 
-        expect(result.row1, "row1").toEqual([
+        expect(row1, "row1").toEqual([
           { legends: ["1", "!", "1", "!"] },
           { legends: ["2", `"`, "2", `"`] },
           { legends: ["3", "§", "3", "§"] },
@@ -182,7 +189,7 @@ describe("keymap converter", () => {
           { legends: ["´", "`", "´", "`"] },
         ]);
 
-        expect(result.row2, "row2").toEqual([
+        expect(row2, "row2").toEqual([
           { legends: ["q", "Q", "q", "Q"], x: 0.5 },
           { legends: ["w", "W", "w", "W"] },
           { legends: ["e", "E", "e", "E"] },
@@ -197,7 +204,7 @@ describe("keymap converter", () => {
           { legends: ["+", "*", "+", "*"] },
         ]);
 
-        expect(result.row3, "row3").toEqual([
+        expect(row3, "row3").toEqual([
           { legends: ["a", "A", "a", "A"], x: 1 },
           { legends: ["s", "S", "s", "S"] },
           { legends: ["d", "D", "d", "D"] },
@@ -212,7 +219,7 @@ describe("keymap converter", () => {
           { legends: ["#", "'", "#", "'"] },
         ]);
 
-        expect(result.row4, "row4").toEqual([
+        expect(row4, "row4").toEqual([
           { legends: ["<", ">", "<", ">"], x: 0.25 },
           { legends: ["y", "Y", "y", "Y"] },
           { legends: ["x", "X", "x", "X"] },
@@ -226,7 +233,7 @@ describe("keymap converter", () => {
           { legends: ["-", "_", "-", "_"] },
         ]);
 
-        expect(result.row5, "row5").toEqual([
+        expect(row5, "row5").toEqual([
           {
             legends: [" ", " ", " ", " "],
             width: 6,
@@ -237,94 +244,96 @@ describe("keymap converter", () => {
       });
 
       it("converts qwertz staggered all keys", () => {
-        const result = convertLayoutToKeymap(qwertzLayout as LayoutObject, {
-          displayName: "qwertz",
-          keymapStyle: "staggered",
-          showAllKeys: true,
-        });
+        const [row1, row2, row3, row4, row5] = convertLayoutToKeymap(
+          qwertzLayout as LayoutObject,
+          {
+            keymapStyle: "staggered",
+            showAllKeys: true,
+          },
+        );
 
         // Test only keys added when showAllKeys is true (not covered by basic staggered test)
 
         // Row1: BS added at end
-        expect(result.row1[result.row1.length - 1], "row1 last").toEqual({
-          legends: ["BS", "BS", "BS", "BS"],
+        expect(row1?.[row1.length - 1], "row1 last").toEqual({
+          legends: ["Backspace", "Backspace", "Backspace", "Backspace"],
           width: 2,
         });
 
         // Row2: Tab added at start, Enter (with height) added at end
-        expect(result.row2[0], "row2 first").toEqual({
+        expect(row2?.[0], "row2 first").toEqual({
           legends: ["Tab", "Tab", "Tab", "Tab"],
           width: 1.5,
         });
-        expect(result.row2[result.row2.length - 1], "row2 last").toEqual({
+        expect(row2?.[row2.length - 1], "row2 last").toEqual({
           legends: ["Enter", "Enter", "Enter", "Enter"],
           height: 2,
           width: 1.5,
         });
 
         // Row3: Caps added at start
-        expect(result.row3[0], "row3 first").toEqual({
+        expect(row3?.[0], "row3 first").toEqual({
           legends: ["Caps", "Caps", "Caps", "Caps"],
           width: 1.75,
         });
 
         // Row4: Shift added at start and end
-        expect(result.row4[0], "row4 first").toEqual({
+        expect(row4?.[0], "row4 first").toEqual({
           legends: ["Shift", "Shift", "Shift", "Shift"],
           width: 1.25,
         });
-        expect(result.row4[result.row4.length - 1], "row4 last").toEqual({
+        expect(row4?.[row4.length - 1], "row4 last").toEqual({
           legends: ["Shift", "Shift", "Shift", "Shift"],
           width: 2.75,
         });
 
         // Row5: Ctrl, Monke, Alt at start; Alt, Monke, Meta, Ctrl at end
-        expect(result.row5[0], "row5 first").toEqual({
+        expect(row5?.[0], "row5 first").toEqual({
           legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"],
           width: 1.25,
         });
-        expect(result.row5[1], "row5 second").toEqual({
+        expect(row5?.[1], "row5 second").toEqual({
           legends: ["Monke", "Monke", "Monke", "Monke"],
           width: 1.25,
         });
-        expect(result.row5[2], "row5 third").toEqual({
+        expect(row5?.[2], "row5 third").toEqual({
           legends: ["Alt", "Alt", "Alt", "Alt"],
           width: 1.25,
         });
-        expect(result.row5[result.row5.length - 4], "row5 Alt right").toEqual({
+        expect(row5?.[row5.length - 4], "row5 Alt right").toEqual({
           legends: ["Alt", "Alt", "Alt", "Alt"],
           width: 1.25,
         });
-        expect(result.row5[result.row5.length - 3], "row5 Monke right").toEqual(
-          {
-            legends: ["Monke", "Monke", "Monke", "Monke"],
-            width: 1.25,
-          },
-        );
-        expect(result.row5[result.row5.length - 2], "row5 Meta").toEqual({
+        expect(row5?.[row5.length - 3], "row5 Monke right").toEqual({
+          legends: ["Monke", "Monke", "Monke", "Monke"],
+          width: 1.25,
+        });
+        expect(row5?.[row5.length - 2], "row5 Meta").toEqual({
           legends: ["Meta", "Meta", "Meta", "Meta"],
           width: 1.25,
         });
-        expect(result.row5[result.row5.length - 1], "row5 last").toEqual({
+        expect(row5?.[row5.length - 1], "row5 last").toEqual({
           legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"],
           width: 1.25,
         });
 
         // Also verify total counts are as expected with extra keys
-        expect(result.row1.length, "row1 length").toBe(14);
-        expect(result.row2.length, "row2 length").toBe(14);
-        expect(result.row3.length, "row3 length").toBe(13);
-        expect(result.row4.length, "row4 length").toBe(13);
+        expect(row1?.length, "row1 length").toBe(14);
+        expect(row2?.length, "row2 length").toBe(14);
+        expect(row3?.length, "row3 length").toBe(13);
+        expect(row4?.length, "row4 length").toBe(13);
       });
 
       it("converts handsdown", () => {
-        const result = convertLayoutToKeymap(handsdownLayout as LayoutObject, {
-          displayName: "handsdown",
-          keymapStyle: "staggered",
-          showAllKeys: false,
-        });
+        const [_row1, _row2, _row3, _row4, row5] = convertLayoutToKeymap(
+          handsdownLayout as LayoutObject,
+          {
+            keymapStyle: "staggered",
+            showAllKeys: false,
+          },
+        );
 
-        expect(result.row5, "row5").toEqual([
+        expect(row5, "row5").toEqual([
           { legends: ["r", "R", "r", "R"], x: 4 },
           {
             legends: [" ", " ", " ", " "],
@@ -334,16 +343,18 @@ describe("keymap converter", () => {
         ]);
       });
       it("converts handsdown full", () => {
-        const result = convertLayoutToKeymap(handsdownLayout as LayoutObject, {
-          displayName: "handsdown",
-          keymapStyle: "staggered",
-          showAllKeys: true,
-        });
+        const [_row1, _row2, _row3, _row4, row5] = convertLayoutToKeymap(
+          handsdownLayout as LayoutObject,
+          {
+            keymapStyle: "staggered",
+            showAllKeys: true,
+          },
+        );
 
-        expect(result.row5[3], "row5 extra key").toEqual({
+        expect(row5?.[3], "row5 extra key").toEqual({
           legends: ["r", "R", "r", "R"],
         });
-        expect(result.row5[4], "row5 space key").toEqual({
+        expect(row5?.[4], "row5 space key").toEqual({
           legends: [" ", " ", " ", " "],
           isLayoutIndicator: true,
           width: 5.25,
@@ -353,48 +364,50 @@ describe("keymap converter", () => {
 
     describe("split", () => {
       it("converts qwerty split", () => {
-        const result = convertLayoutToKeymap(qwertyLayout as LayoutObject, {
-          displayName: "qwerty",
-          keymapStyle: "split",
-          showAllKeys: false,
-        });
+        const [row1, row2, row3, row4, row5] = convertLayoutToKeymap(
+          qwertyLayout as LayoutObject,
+          {
+            keymapStyle: "split",
+            showAllKeys: false,
+          },
+        );
 
         // Test split-specific differences from staggered (not covered by basic test)
         // Split adds x=8 gap after column 7 for rows 1-4, and row5 has 2 keys with gap
 
         // Row 1: col7 (index 6) = '7' gets x=8
-        expect(result.row1[6], "row1 key 7").toEqual({
+        expect(row1?.[6], "row1 key 7").toEqual({
           legends: ["7", "&", "7", "&"],
           x: 1,
         });
 
         // Row 2: col6 (index 5) = 'y' gets x=8
-        expect(result.row2[5], "row2 key y").toEqual({
+        expect(row2?.[5], "row2 key y").toEqual({
           legends: ["y", "Y", "y", "Y"],
           x: 1,
         });
 
         // Row 3: col6 (index 5) = 'h' gets x=8
-        expect(result.row3[5], "row3 key h").toEqual({
+        expect(row3?.[5], "row3 key h").toEqual({
           legends: ["h", "H", "h", "H"],
           x: 1,
         });
 
         // Row 4: col6 (index 5) = 'n' gets x=8
-        expect(result.row4[5], "row4 key n").toEqual({
+        expect(row4?.[5], "row4 key n").toEqual({
           legends: ["n", "N", "n", "N"],
           x: 1,
         });
 
         // Row 5: split has two keys with gap in middle
-        expect(result.row5.length, "row5 length").toBe(2);
-        expect(result.row5[0], "row5 left").toEqual({
+        expect(row5?.length, "row5 length").toBe(2);
+        expect(row5?.[0], "row5 left").toEqual({
           legends: [" ", " ", " ", " "],
           width: 3,
           x: 3.5,
           isLayoutIndicator: true,
         });
-        expect(result.row5[1], "row5 right").toEqual({
+        expect(row5?.[1], "row5 right").toEqual({
           legends: [" ", " ", " ", " "],
           width: 3,
           x: 1,
@@ -402,47 +415,49 @@ describe("keymap converter", () => {
       });
 
       it("converts qwertz split", () => {
-        const result = convertLayoutToKeymap(qwertzLayout as LayoutObject, {
-          displayName: "qwertz",
-          keymapStyle: "split",
-          showAllKeys: false,
-        });
+        const [row1, row2, row3, row4, row5] = convertLayoutToKeymap(
+          qwertzLayout as LayoutObject,
+          {
+            keymapStyle: "split",
+            showAllKeys: false,
+          },
+        );
 
         // Test split-specific differences from staggered (not covered by basic test)
 
         // Row 1: col7 (index 6) = '7' gets x=8
-        expect(result.row1[6], "row1 key 7").toEqual({
+        expect(row1?.[6], "row1 key 7").toEqual({
           legends: ["7", "/", "7", "/"],
           x: 1,
         });
 
         // Row 2: col6 (index 5) = 'z' gets x=8
-        expect(result.row2[5], "row2 key z").toEqual({
+        expect(row2?.[5], "row2 key z").toEqual({
           legends: ["z", "Z", "z", "Z"],
           x: 1,
         });
 
         // Row 3: col6 (index 5) = 'h' gets x=8
-        expect(result.row3[5], "row3 key h").toEqual({
+        expect(row3?.[5], "row3 key h").toEqual({
           legends: ["h", "H", "h", "H"],
           x: 1,
         });
 
         // Row 4: col5 (index 5) = 'b' gets x=8
-        expect(result.row4[5], "row4 key b").toEqual({
+        expect(row4?.[5], "row4 key b").toEqual({
           legends: ["b", "B", "b", "B"],
           x: 1,
         });
 
         // Row 5: split has two keys with gap in middle
-        expect(result.row5.length, "row5 length").toBe(2);
-        expect(result.row5[0], "row5 left").toEqual({
+        expect(row5?.length, "row5 length").toBe(2);
+        expect(row5?.[0], "row5 left").toEqual({
           legends: [" ", " ", " ", " "],
           width: 3,
           x: 3.5,
           isLayoutIndicator: true,
         });
-        expect(result.row5[1], "row5 right").toEqual({
+        expect(row5?.[1], "row5 right").toEqual({
           legends: [" ", " ", " ", " "],
           width: 3,
           x: 1,
@@ -450,13 +465,15 @@ describe("keymap converter", () => {
       });
 
       it("converts handsdown", () => {
-        const result = convertLayoutToKeymap(handsdownLayout as LayoutObject, {
-          displayName: "handsdown",
-          keymapStyle: "split",
-          showAllKeys: false,
-        });
+        const [_row1, _row2, _row3, _row4, row5] = convertLayoutToKeymap(
+          handsdownLayout as LayoutObject,
+          {
+            keymapStyle: "split",
+            showAllKeys: false,
+          },
+        );
 
-        expect(result.row5, "row5").toEqual([
+        expect(row5, "row5").toEqual([
           { legends: ["r", "R", "r", "R"], x: 5.5 },
           {
             legends: [" ", " ", " ", " "],
@@ -467,17 +484,19 @@ describe("keymap converter", () => {
         ]);
       });
       it("converts handsdown full", () => {
-        const result = convertLayoutToKeymap(handsdownLayout as LayoutObject, {
-          displayName: "handsdown",
-          keymapStyle: "split",
-          showAllKeys: true,
-        });
+        const [_row1, _row2, _row3, _row4, row5] = convertLayoutToKeymap(
+          handsdownLayout as LayoutObject,
+          {
+            keymapStyle: "split",
+            showAllKeys: true,
+          },
+        );
 
-        expect(result.row5[3], "row5 extra key").toEqual({
+        expect(row5?.[3], "row5 extra key").toEqual({
           legends: ["r", "R", "r", "R"],
           width: 3,
         });
-        expect(result.row5[4], "row5 space key").toEqual({
+        expect(row5?.[4], "row5 space key").toEqual({
           legends: [" ", " ", " ", " "],
           isLayoutIndicator: true,
           width: 3.5,
@@ -488,13 +507,15 @@ describe("keymap converter", () => {
 
     describe("matrix", () => {
       it("converts qwerty matrix", () => {
-        const result = convertLayoutToKeymap(qwertyLayout as LayoutObject, {
-          displayName: "qwerty",
-          keymapStyle: "matrix",
-          showAllKeys: false,
-        });
+        const [row1, row2, row3, row4, row5] = convertLayoutToKeymap(
+          qwertyLayout as LayoutObject,
+          {
+            keymapStyle: "matrix",
+            showAllKeys: false,
+          },
+        );
 
-        expect(result.row1, "row1").toEqual([
+        expect(row1, "row1").toEqual([
           { legends: ["1", "!", "1", "!"] },
           { legends: ["2", "@", "2", "@"] },
           { legends: ["3", "#", "3", "#"] },
@@ -507,7 +528,7 @@ describe("keymap converter", () => {
           { legends: ["0", ")", "0", ")"] },
         ]);
 
-        expect(result.row2, "row2").toEqual([
+        expect(row2, "row2").toEqual([
           { legends: ["q", "Q", "q", "Q"] },
           { legends: ["w", "W", "w", "W"] },
           { legends: ["e", "E", "e", "E"] },
@@ -520,7 +541,7 @@ describe("keymap converter", () => {
           { legends: ["p", "P", "p", "P"] },
         ]);
 
-        expect(result.row3, "row3").toEqual([
+        expect(row3, "row3").toEqual([
           { legends: ["a", "A", "a", "A"] },
           { legends: ["s", "S", "s", "S"] },
           { legends: ["d", "D", "d", "D"] },
@@ -533,7 +554,7 @@ describe("keymap converter", () => {
           { legends: [";", ":", ";", ":"] },
         ]);
 
-        expect(result.row4, "row4").toEqual([
+        expect(row4, "row4").toEqual([
           { legends: ["z", "Z", "z", "Z"] },
           { legends: ["x", "X", "x", "X"] },
           { legends: ["c", "C", "c", "C"] },
@@ -546,7 +567,7 @@ describe("keymap converter", () => {
           { legends: ["/", "?", "/", "?"] },
         ]);
 
-        expect(result.row5, "row5").toEqual([
+        expect(row5, "row5").toEqual([
           {
             legends: [" ", " ", " ", " "],
             width: 4,
@@ -557,86 +578,90 @@ describe("keymap converter", () => {
       });
 
       it("converts qwerty matrix all keys", () => {
-        const result = convertLayoutToKeymap(qwertyLayout as LayoutObject, {
-          displayName: "qwerty",
-          keymapStyle: "matrix",
-          showAllKeys: true,
-        });
+        const [row1, row2, row3, row4, row5] = convertLayoutToKeymap(
+          qwertyLayout as LayoutObject,
+          {
+            keymapStyle: "matrix",
+            showAllKeys: true,
+          },
+        );
 
         // Test only keys added when showAllKeys is true (not covered by basic matrix test)
         //Row1: starting with `
-        expect(result.row1[0], "row1 first").toEqual({
+        expect(row1?.[0], "row1 first").toEqual({
           legends: ["`", "~", "`", "~"],
         });
 
         // Row1: BS added at end
-        expect(result.row1[result.row1.length - 1], "row1 last").toEqual({
+        expect(row1?.[row1.length - 1], "row1 last").toEqual({
           legends: ["BS", "BS", "BS", "BS"],
         });
 
         // Row2: Tab added at start
-        expect(result.row2[0], "row2 first").toEqual({
+        expect(row2?.[0], "row2 first").toEqual({
           legends: ["Tab", "Tab", "Tab", "Tab"],
         });
 
         // Row2: Del added at end
-        expect(result.row2[result.row2.length - 1], "row2 last").toEqual({
+        expect(row2?.[row2.length - 1], "row2 last").toEqual({
           legends: ["Del", "Del", "Del", "Del"],
         });
 
         // Row3: Esc added at start
-        expect(result.row3[0], "row3 first").toEqual({
+        expect(row3?.[0], "row3 first").toEqual({
           legends: ["Esc", "Esc", "Esc", "Esc"],
         });
 
         // Row3: ends with '
-        expect(result.row3[result.row3.length - 1], "row3 last").toEqual({
+        expect(row3?.[row3.length - 1], "row3 last").toEqual({
           legends: ["'", '"', "'", '"'],
         });
 
         // Row4: Shift added at start and end
-        expect(result.row4[0], "row4 first").toEqual({
+        expect(row4?.[0], "row4 first").toEqual({
           legends: ["Shift", "Shift", "Shift", "Shift"],
         });
-        expect(result.row4[result.row4.length - 1], "row4 last").toEqual({
+        expect(row4?.[row4.length - 1], "row4 last").toEqual({
           legends: ["Enter", "Enter", "Enter", "Enter"],
         });
 
         // Row5: Ctrl, Monke, Alt at start; Alt,  Meta, Ctrl at end
-        expect(result.row5[0], "row5 first").toEqual({
+        expect(row5?.[0], "row5 first").toEqual({
           legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"],
         });
-        expect(result.row5[1], "row5 second").toEqual({
+        expect(row5?.[1], "row5 second").toEqual({
           legends: ["Monke", "Monke", "Monke", "Monke"],
         });
-        expect(result.row5[2], "row5 third").toEqual({
+        expect(row5?.[2], "row5 third").toEqual({
           legends: ["Alt", "Alt", "Alt", "Alt"],
         });
-        expect(result.row5[result.row5.length - 3], "row5 Alt right").toEqual({
+        expect(row5?.[row5.length - 3], "row5 Alt right").toEqual({
           legends: ["Alt", "Alt", "Alt", "Alt"],
         });
-        expect(result.row5[result.row5.length - 2], "row5 Meta").toEqual({
+        expect(row5?.[row5.length - 2], "row5 Meta").toEqual({
           legends: ["Meta", "Meta", "Meta", "Meta"],
         });
-        expect(result.row5[result.row5.length - 1], "row5 last").toEqual({
+        expect(row5?.[row5.length - 1], "row5 last").toEqual({
           legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"],
         });
 
         // Also verify total counts are as expected with extra keys
-        expect(result.row1.length, "row1 length").toBe(12);
-        expect(result.row2.length, "row2 length").toBe(12);
-        expect(result.row3.length, "row3 length").toBe(12);
-        expect(result.row4.length, "row4 length").toBe(12);
+        expect(row1?.length, "row1 length").toBe(12);
+        expect(row2?.length, "row2 length").toBe(12);
+        expect(row3?.length, "row3 length").toBe(12);
+        expect(row4?.length, "row4 length").toBe(12);
       });
 
       it("converts handsdown", () => {
-        const result = convertLayoutToKeymap(handsdownLayout as LayoutObject, {
-          displayName: "handsdown",
-          keymapStyle: "matrix",
-          showAllKeys: false,
-        });
+        const [_row1, _row2, _row3, _row4, row5] = convertLayoutToKeymap(
+          handsdownLayout as LayoutObject,
+          {
+            keymapStyle: "matrix",
+            showAllKeys: false,
+          },
+        );
 
-        expect(result.row5, "row5").toEqual([
+        expect(row5, "row5").toEqual([
           { legends: ["r", "R", "r", "R"], width: 3, x: 2 },
           {
             legends: [" ", " ", " ", " "],
@@ -646,17 +671,19 @@ describe("keymap converter", () => {
         ]);
       });
       it("converts handsdown full", () => {
-        const result = convertLayoutToKeymap(handsdownLayout as LayoutObject, {
-          displayName: "handsdown",
-          keymapStyle: "matrix",
-          showAllKeys: true,
-        });
+        const [_row1, _row2, _row3, _row4, row5] = convertLayoutToKeymap(
+          handsdownLayout as LayoutObject,
+          {
+            keymapStyle: "matrix",
+            showAllKeys: true,
+          },
+        );
 
-        expect(result.row5[3], "row5 extra key").toEqual({
+        expect(row5?.[3], "row5 extra key").toEqual({
           legends: ["r", "R", "r", "R"],
           width: 3,
         });
-        expect(result.row5[4], "row5 space key").toEqual({
+        expect(row5?.[4], "row5 space key").toEqual({
           legends: [" ", " ", " ", " "],
           isLayoutIndicator: true,
           width: 3,
@@ -666,45 +693,47 @@ describe("keymap converter", () => {
 
     describe("split matrix", () => {
       it("converts qwerty split  matrix", () => {
-        const result = convertLayoutToKeymap(qwertyLayout as LayoutObject, {
-          displayName: "qwerty",
-          keymapStyle: "split_matrix",
-          showAllKeys: false,
-        });
+        const [row1, row2, row3, row4, row5] = convertLayoutToKeymap(
+          qwertyLayout as LayoutObject,
+          {
+            keymapStyle: "split_matrix",
+            showAllKeys: false,
+          },
+        );
 
         // Row 1: col6 (index 5) = '6' gets x=8
-        expect(result.row1[5], "row1 key 7").toEqual({
+        expect(row1?.[5], "row1 key 7").toEqual({
           legends: ["6", "^", "6", "^"],
           x: 1,
         });
 
         // Row 2: col6 (index 5) = 'y' gets x=8
-        expect(result.row2[5], "row2 key y").toEqual({
+        expect(row2?.[5], "row2 key y").toEqual({
           legends: ["y", "Y", "y", "Y"],
           x: 1,
         });
 
         // Row 3: col6 (index 5) = 'h' gets x=8
-        expect(result.row3[5], "row3 key h").toEqual({
+        expect(row3?.[5], "row3 key h").toEqual({
           legends: ["h", "H", "h", "H"],
           x: 1,
         });
 
         // Row 4: col6 (index 5) = 'n' gets x=8
-        expect(result.row4[5], "row4 key n").toEqual({
+        expect(row4?.[5], "row4 key n").toEqual({
           legends: ["n", "N", "n", "N"],
           x: 1,
         });
 
         // Row 5: split has two keys with gap in middle
-        expect(result.row5.length, "row5 length").toBe(2);
-        expect(result.row5[0], "row5 left").toEqual({
+        expect(row5?.length, "row5 length").toBe(2);
+        expect(row5?.[0], "row5 left").toEqual({
           legends: [" ", " ", " ", " "],
           width: 3,
           x: 2,
           isLayoutIndicator: true,
         });
-        expect(result.row5[1], "row5 right").toEqual({
+        expect(row5?.[1], "row5 right").toEqual({
           legends: [" ", " ", " ", " "],
           width: 3,
           x: 1,
@@ -712,13 +741,15 @@ describe("keymap converter", () => {
       });
 
       it("converts handsdown", () => {
-        const result = convertLayoutToKeymap(handsdownLayout as LayoutObject, {
-          displayName: "handsdown",
-          keymapStyle: "split_matrix",
-          showAllKeys: false,
-        });
+        const [_row1, _row2, _row3, _row4, row5] = convertLayoutToKeymap(
+          handsdownLayout as LayoutObject,
+          {
+            keymapStyle: "split_matrix",
+            showAllKeys: false,
+          },
+        );
 
-        expect(result.row5, "row5").toEqual([
+        expect(row5, "row5").toEqual([
           { legends: ["r", "R", "r", "R"], width: 3, x: 2 },
           {
             legends: [" ", " ", " ", " "],
@@ -729,17 +760,19 @@ describe("keymap converter", () => {
         ]);
       });
       it("converts handsdown full", () => {
-        const result = convertLayoutToKeymap(handsdownLayout as LayoutObject, {
-          displayName: "handsdown",
-          keymapStyle: "split_matrix",
-          showAllKeys: true,
-        });
+        const [_row1, _row2, _row3, _row4, row5] = convertLayoutToKeymap(
+          handsdownLayout as LayoutObject,
+          {
+            keymapStyle: "split_matrix",
+            showAllKeys: true,
+          },
+        );
 
-        expect(result.row5[3], "row5 extra key").toEqual({
+        expect(row5?.[3], "row5 extra key").toEqual({
           legends: ["r", "R", "r", "R"],
           width: 3,
         });
-        expect(result.row5[4], "row5 space key").toEqual({
+        expect(row5?.[4], "row5 space key").toEqual({
           legends: [" ", " ", " ", " "],
           isLayoutIndicator: true,
           width: 3,
@@ -750,14 +783,16 @@ describe("keymap converter", () => {
 
     describe("steno", () => {
       it("converts steno", () => {
-        const result = convertLayoutToKeymap({} as any, {
-          displayName: "steno",
-          keymapStyle: "steno",
-          showAllKeys: false,
-        });
+        const [row1, row2, row3, row4, row5] = convertLayoutToKeymap(
+          {} as any,
+          {
+            keymapStyle: "steno",
+            showAllKeys: false,
+          },
+        );
 
-        expect(result.row1, "row1").toEqual([]);
-        expect(result.row2, "row2").toEqual([
+        expect(row1, "row1").toEqual([]);
+        expect(row2, "row2").toEqual([
           { legends: ["s", "S", "s", "S"], height: 2 },
           { legends: ["t", "T", "t", "T"] },
           { legends: ["p", "P", "p", "P"] },
@@ -769,7 +804,7 @@ describe("keymap converter", () => {
           { legends: ["t", "T", "t", "T"] },
           { legends: ["d", "D", "d", "D"] },
         ]);
-        expect(result.row3, "row3").toEqual([
+        expect(row3, "row3").toEqual([
           { legends: ["k", "K", "k", "K"], x: 1 },
           { legends: ["w", "W", "w", "W"] },
           { legends: ["r", "R", "r", "R"] },
@@ -779,24 +814,26 @@ describe("keymap converter", () => {
           { legends: ["s", "S", "s", "S"] },
           { legends: ["z", "Z", "z", "Z"] },
         ]);
-        expect(result.row4, "row4").toEqual([
+        expect(row4, "row4").toEqual([
           { legends: ["a", "A", "a", "A"], x: 2.25 },
           { legends: ["o", "O", "o", "O"] },
           { legends: ["e", "E", "e", "E"], x: 0.5 },
           { legends: ["u", "U", "u", "U"] },
         ]);
-        expect(result.row5, "row5").toEqual([]);
+        expect(row5, "row5").toEqual([]);
       });
 
       it("converts steno matrix", () => {
-        const result = convertLayoutToKeymap({} as any, {
-          displayName: "steno matrix",
-          keymapStyle: "steno_matrix",
-          showAllKeys: false,
-        });
+        const [row1, row2, row3, row4, row5] = convertLayoutToKeymap(
+          {} as any,
+          {
+            keymapStyle: "steno_matrix",
+            showAllKeys: false,
+          },
+        );
 
-        expect(result.row1, "row1").toEqual([]);
-        expect(result.row2, "row2").toEqual([
+        expect(row1, "row1").toEqual([]);
+        expect(row2, "row2").toEqual([
           { legends: ["s", "S", "s", "S"] },
           { legends: ["t", "T", "t", "T"] },
           { legends: ["p", "P", "p", "P"] },
@@ -808,7 +845,7 @@ describe("keymap converter", () => {
           { legends: ["t", "T", "t", "T"] },
           { legends: ["d", "D", "d", "D"] },
         ]);
-        expect(result.row3, "row3").toEqual([
+        expect(row3, "row3").toEqual([
           { legends: ["s", "S", "s", "S"] },
           { legends: ["k", "K", "k", "K"] },
           { legends: ["w", "W", "w", "W"] },
@@ -820,13 +857,13 @@ describe("keymap converter", () => {
           { legends: ["s", "S", "s", "S"] },
           { legends: ["z", "Z", "z", "Z"] },
         ]);
-        expect(result.row4, "row4").toEqual([
+        expect(row4, "row4").toEqual([
           { legends: ["a", "A", "a", "A"], x: 3 },
           { legends: ["o", "O", "o", "O"] },
           { legends: ["e", "E", "e", "E"], x: 1 },
           { legends: ["u", "U", "u", "U"] },
         ]);
-        expect(result.row5, "row5").toEqual([]);
+        expect(row5, "row5").toEqual([]);
       });
     });
   });
diff --git a/frontend/src/ts/components/pages/test/keymapConverter.ts b/frontend/src/ts/components/pages/test/keymapConverter.ts
index 7b72b092ddec..4b401eb98f93 100644
--- a/frontend/src/ts/components/pages/test/keymapConverter.ts
+++ b/frontend/src/ts/components/pages/test/keymapConverter.ts
@@ -1,28 +1,12 @@
 import { KeymapStyle } from "@monkeytype/schemas/configs";
 import { KeyLegends, LayoutObject } from "@monkeytype/schemas/layouts";
-import { typedEntries } from "../../../utils/misc";
-import { OneOf } from "../../../utils/types";
 
-export type KeyDefinition = {
-  legends: KeyLegends;
-  /** width in u  */
-  width?: number;
-  /** height in u  */
-  height?: number;
-  /** x-offset in u  */
-  x?: number;
-  /** y-offset in u  */
-  y?: number;
-  /** rotation in degrees  */
-  rotation?: number;
-
-  isLayoutIndicator?: boolean;
-  isHoming?: boolean;
-};
-export type KeyboardDefinition = Record<
-  keyof LayoutObject["keys"],
-  KeyDefinition[]
->;
+import {
+  KeyboardDefinition,
+  KeyDefinition,
+  KeymapLayout,
+  keymapLayouts,
+} from "./keymapLayouts";
 
 type ConvertOptions = {
   keymapStyle: KeymapStyle;
@@ -35,14 +19,19 @@ export function convertLayoutToKeymap(
 ): KeyboardDefinition {
   const layout = structuredClone(rawLayout);
 
-  if (options.keymapStyle === "staggered" && layout.type === "ansi") {
-    return convert({
-      legends: layout.keys,
-      keymap: staggeredAnsi,
-      convertOptions: options,
-    });
+  const keymapLayout = keymapLayouts[options.keymapStyle]?.[rawLayout.type];
+
+  if (keymapLayout === undefined) {
+    throw new Error(
+      `not supported style ${options.keymapStyle} and layout type ${rawLayout.type}`,
+    );
   }
-  throw new Error(`not supported style ${options.keymapStyle}`);
+
+  return convert({
+    legends: layout.keys,
+    keymap: keymapLayout,
+    convertOptions: options,
+  });
 }
 
 function convert(options: {
@@ -52,55 +41,48 @@ function convert(options: {
 }): KeyboardDefinition {
   const isShowAllKeys = options.convertOptions.showAllKeys ?? false;
 
-  return Object.fromEntries(
-    typedEntries(options.keymap).map(([row, keys]) => [
-      row,
-      keys
-        .map((keyDef) => {
-          const layoutLegend =
-            keyDef.layoutPosition &&
-            options.legends[keyDef.layoutPosition.row]?.[
-              keyDef.layoutPosition.col
-            ];
-
-          const legends = keyDef.isLayoutIndicator
-            ? buildLegends([" "])
-            : buildLegends(
-                keyDef.legend !== undefined
-                  ? [keyDef.legend]
-                  : (layoutLegend as string[]),
-              );
-
-          if (keyDef.isExtraKey && !isShowAllKeys) {
-            return undefined;
-          }
-
-          console.log("### ready", legends);
-
-          const final = {
-            ...keyDef,
-            ...(isShowAllKeys ? keyDef.extraKeysOverride : {}),
-          };
-
-          return {
-            legends,
-            ...(final.height !== undefined ? { height: final.height } : {}),
-            ...(final.width !== undefined ? { width: final.width } : {}),
-            ...(final.x !== undefined ? { x: final.x } : {}),
-            ...(final.y !== undefined ? { y: final.y } : {}),
-            ...(final.rotation !== undefined
-              ? { rotation: final.rotation }
-              : {}),
-            ...(final.isLayoutIndicator === true
-              ? { isLayoutIndicator: true }
-              : {}),
-            ...(final.isHoming === true ? { isHoming: true } : {}),
-          } satisfies KeyDefinition;
-        })
-        //filter skipped keys
-        .filter((it) => it !== undefined),
-    ]),
-  ) as KeyboardDefinition;
+  return options.keymap.map((keys) =>
+    keys
+      .map((keyDef) => {
+        const layoutLegend =
+          keyDef.layoutPosition?.row &&
+          options.legends[keyDef.layoutPosition.row]?.[
+            keyDef.layoutPosition.col
+          ];
+
+        const legends = keyDef.isLayoutIndicator
+          ? buildLegends([" "])
+          : buildLegends(
+              keyDef.legend !== undefined
+                ? [keyDef.legend]
+                : (layoutLegend as string[]),
+            );
+
+        if (keyDef.isExtraKey && !isShowAllKeys) {
+          return undefined;
+        }
+
+        const final = {
+          ...keyDef,
+          ...(isShowAllKeys ? keyDef.extraKeysOverride : {}),
+        };
+
+        return {
+          legends,
+          ...(final.height !== undefined ? { height: final.height } : {}),
+          ...(final.width !== undefined ? { width: final.width } : {}),
+          ...(final.x !== undefined ? { x: final.x } : {}),
+          ...(final.y !== undefined ? { y: final.y } : {}),
+          ...(final.rotation !== undefined ? { rotation: final.rotation } : {}),
+          ...(final.isLayoutIndicator === true
+            ? { isLayoutIndicator: true }
+            : {}),
+          ...(final.isHoming === true ? { isHoming: true } : {}),
+        } satisfies KeyDefinition;
+      })
+      //filter skipped keys
+      .filter((it) => it !== undefined),
+  );
 }
 
 function buildLegends(legends: KeyLegends): KeyLegends {
@@ -116,109 +98,3 @@ function buildLegends(legends: KeyLegends): KeyLegends {
       return legends;
   }
 }
-
-type LayoutPosition = {
-  row: keyof LayoutObject["keys"];
-  col: number;
-};
-type LayoutKey = Omit<KeyDefinition, "legends"> & {
-  isExtraKey?: boolean;
-  extraKeysOverride?: Omit<KeyDefinition, "legends">;
-} & OneOf<{
-    isLayoutIndicator: true;
-    layoutPosition: LayoutPosition;
-    legend: string;
-  }>;
-
-type KeymapLayout = Record<keyof LayoutObject["keys"], LayoutKey[]>;
-
-const staggeredAnsi: KeymapLayout = {
-  row1: [
-    { layoutPosition: { col: 0, row: "row1" }, isExtraKey: true },
-    { layoutPosition: { col: 1, row: "row1" } },
-    { layoutPosition: { col: 2, row: "row1" } },
-    { layoutPosition: { col: 3, row: "row1" } },
-    { layoutPosition: { col: 4, row: "row1" } },
-    { layoutPosition: { col: 5, row: "row1" } },
-    { layoutPosition: { col: 6, row: "row1" } },
-    { layoutPosition: { col: 7, row: "row1" } },
-    { layoutPosition: { col: 8, row: "row1" } },
-    { layoutPosition: { col: 9, row: "row1" } },
-    { layoutPosition: { col: 10, row: "row1" } },
-    { layoutPosition: { col: 11, row: "row1" } },
-    { layoutPosition: { col: 12, row: "row1" } },
-    { legend: "Backspace", width: 2, isExtraKey: true },
-  ],
-  row2: [
-    { legend: "Tab", width: 1.5, isExtraKey: true },
-    {
-      layoutPosition: { col: 0, row: "row2" },
-      x: 0.5,
-      extraKeysOverride: { x: 0 },
-    },
-    { layoutPosition: { col: 1, row: "row2" } },
-    { layoutPosition: { col: 2, row: "row2" } },
-    { layoutPosition: { col: 3, row: "row2" } },
-    { layoutPosition: { col: 4, row: "row2" } },
-    { layoutPosition: { col: 5, row: "row2" } },
-    { layoutPosition: { col: 6, row: "row2" } },
-    { layoutPosition: { col: 7, row: "row2" } },
-    { layoutPosition: { col: 8, row: "row2" } },
-    { layoutPosition: { col: 9, row: "row2" } },
-    { layoutPosition: { col: 10, row: "row2" } },
-    { layoutPosition: { col: 11, row: "row2" } },
-    { layoutPosition: { col: 12, row: "row2" }, width: 1.5, isExtraKey: true },
-  ],
-  row3: [
-    { legend: "Caps", width: 1.75, isExtraKey: true },
-    {
-      layoutPosition: { col: 0, row: "row3" },
-      x: 1,
-      extraKeysOverride: { x: 0 },
-    },
-    { layoutPosition: { col: 1, row: "row3" } },
-    { layoutPosition: { col: 2, row: "row3" } },
-    { layoutPosition: { col: 3, row: "row3" }, isHoming: true },
-    { layoutPosition: { col: 4, row: "row3" } },
-    { layoutPosition: { col: 5, row: "row3" } },
-    { layoutPosition: { col: 6, row: "row3" }, isHoming: true },
-    { layoutPosition: { col: 7, row: "row3" } },
-    { layoutPosition: { col: 8, row: "row3" } },
-    { layoutPosition: { col: 9, row: "row3" } },
-    { layoutPosition: { col: 10, row: "row3" } },
-    { legend: "Enter", width: 2.25, isExtraKey: true },
-  ],
-  row4: [
-    { legend: "Shift", width: 2.25, isExtraKey: true },
-    {
-      layoutPosition: { col: 0, row: "row4" },
-      x: 1.5,
-      extraKeysOverride: { x: 0 },
-    },
-    { layoutPosition: { col: 1, row: "row4" } },
-    { layoutPosition: { col: 2, row: "row4" } },
-    { layoutPosition: { col: 3, row: "row4" } },
-    { layoutPosition: { col: 4, row: "row4" } },
-    { layoutPosition: { col: 5, row: "row4" } },
-    { layoutPosition: { col: 6, row: "row4" } },
-    { layoutPosition: { col: 7, row: "row4" } },
-    { layoutPosition: { col: 8, row: "row4" } },
-    { layoutPosition: { col: 9, row: "row4" } },
-    { legend: "Shift", width: 2.75, isExtraKey: true },
-  ],
-  row5: [
-    { legend: "Ctrl", width: 1.25, isExtraKey: true },
-    { legend: "Monke", width: 1.25, isExtraKey: true },
-    { legend: "Alt", width: 1.25, isExtraKey: true },
-    {
-      isLayoutIndicator: true,
-      width: 6,
-      x: 3.5,
-      extraKeysOverride: { width: 6.25, x: 0 },
-    },
-    { legend: "Alt", width: 1.25, isExtraKey: true },
-    { legend: "Monke", width: 1.25, isExtraKey: true },
-    { legend: "Meta", width: 1.25, isExtraKey: true },
-    { legend: "Ctrl", width: 1.25, isExtraKey: true },
-  ],
-};
diff --git a/frontend/src/ts/components/pages/test/keymapLayouts.ts b/frontend/src/ts/components/pages/test/keymapLayouts.ts
new file mode 100644
index 000000000000..b5ae2cbdcefb
--- /dev/null
+++ b/frontend/src/ts/components/pages/test/keymapLayouts.ts
@@ -0,0 +1,180 @@
+import { KeymapStyle } from "@monkeytype/schemas/configs";
+import { KeyLegends, LayoutObject } from "@monkeytype/schemas/layouts";
+import { OneOf } from "../../../utils/types";
+
+export type KeyDefinition = {
+  legends: KeyLegends;
+  /** width in u  */
+  width?: number;
+  /** height in u  */
+  height?: number;
+  /** x-offset in u  */
+  x?: number;
+  /** y-offset in u  */
+  y?: number;
+  /** rotation in degrees  */
+  rotation?: number;
+
+  isLayoutIndicator?: boolean;
+  isHoming?: boolean;
+};
+export type KeyboardDefinition = KeyDefinition[][];
+
+type LayoutPosition = {
+  row?: keyof LayoutObject["keys"];
+  col: number;
+};
+type LayoutKey = Omit<KeyDefinition, "legends"> & {
+  isExtraKey?: boolean;
+  extraKeysOverride?: Omit<KeyDefinition, "legends">;
+  layoutPosition?: LayoutPosition;
+} & OneOf<{
+    isLayoutIndicator: true;
+    legend?: string;
+  }>;
+
+export type KeymapLayout = LayoutKey[][];
+
+function addLayoutKeys(
+  count: number,
+  options: { start?: number },
+): LayoutKey[] {
+  return new Array<LayoutKey>(count).fill({}).map((it, index) => {
+    return {
+      ...it,
+      layoutPosition: {
+        col: index + (options.start ?? 0),
+      },
+    };
+  });
+}
+
+const staggeredAnsi: KeymapLayout = [
+  buildRow("row1", [
+    { layoutPosition: { col: 0 }, isExtraKey: true },
+    ...addLayoutKeys(12, { start: 1 }),
+    { legend: "Backspace", width: 2, isExtraKey: true },
+  ]),
+  buildRow("row2", [
+    { legend: "Tab", width: 1.5, isExtraKey: true },
+    { layoutPosition: { col: 0 }, x: 0.5, extraKeysOverride: { x: 0 } },
+    ...addLayoutKeys(11, { start: 1 }),
+    { layoutPosition: { col: 12 }, width: 1.5, isExtraKey: true },
+  ]),
+  buildRow("row3", [
+    { legend: "Caps", width: 1.75, isExtraKey: true },
+    { layoutPosition: { col: 0 }, x: 1, extraKeysOverride: { x: 0 } },
+    { layoutPosition: { col: 1 } },
+    { layoutPosition: { col: 2 } },
+    { layoutPosition: { col: 3 }, isHoming: true },
+    { layoutPosition: { col: 4 } },
+    { layoutPosition: { col: 5 } },
+    { layoutPosition: { col: 6 }, isHoming: true },
+    { layoutPosition: { col: 7 } },
+    { layoutPosition: { col: 8 } },
+    { layoutPosition: { col: 9 } },
+    { layoutPosition: { col: 10 } },
+    { legend: "Enter", width: 2.25, isExtraKey: true },
+  ]),
+  buildRow("row4", [
+    { legend: "Shift", width: 2.25, isExtraKey: true },
+    { layoutPosition: { col: 0 }, x: 1.5, extraKeysOverride: { x: 0 } },
+    ...addLayoutKeys(9, { start: 1 }),
+    { legend: "Shift", width: 2.75, isExtraKey: true },
+  ]),
+  [
+    { legend: "Ctrl", width: 1.25, isExtraKey: true },
+    { legend: "Monke", width: 1.25, isExtraKey: true },
+    { legend: "Alt", width: 1.25, isExtraKey: true },
+    {
+      isLayoutIndicator: true,
+      width: 6,
+      x: 3.5,
+      extraKeysOverride: { width: 6.25, x: 0 },
+    },
+    { legend: "Alt", width: 1.25, isExtraKey: true },
+    { legend: "Monke", width: 1.25, isExtraKey: true },
+    { legend: "Meta", width: 1.25, isExtraKey: true },
+    { legend: "Ctrl", width: 1.25, isExtraKey: true },
+  ],
+];
+
+const staggeredIso: KeymapLayout = [
+  buildRow("row1", [
+    { layoutPosition: { col: 0 }, isExtraKey: true },
+    ...addLayoutKeys(12, { start: 1 }),
+    { legend: "Backspace", width: 2, isExtraKey: true },
+  ]),
+  buildRow("row2", [
+    { legend: "Tab", width: 1.5, isExtraKey: true },
+    { layoutPosition: { col: 0 }, x: 0.5, extraKeysOverride: { x: 0 } },
+    ...addLayoutKeys(11, { start: 1 }),
+    { legend: "Enter", width: 1.5, height: 2, isExtraKey: true },
+  ]),
+  buildRow("row3", [
+    { legend: "Caps", width: 1.75, isExtraKey: true },
+    { layoutPosition: { col: 0 }, x: 1, extraKeysOverride: { x: 0 } },
+    { layoutPosition: { col: 1 } },
+    { layoutPosition: { col: 2 } },
+    { layoutPosition: { col: 3 }, isHoming: true },
+    { layoutPosition: { col: 4 } },
+    { layoutPosition: { col: 5 } },
+    { layoutPosition: { col: 6 }, isHoming: true },
+    { layoutPosition: { col: 7 } },
+    { layoutPosition: { col: 8 } },
+    { layoutPosition: { col: 9 } },
+    { layoutPosition: { col: 10 } },
+    { layoutPosition: { col: 11 } },
+  ]),
+  buildRow("row4", [
+    { legend: "Shift", width: 1.25, isExtraKey: true },
+    { layoutPosition: { col: 0 }, x: 0.25, extraKeysOverride: { x: 0 } },
+    ...addLayoutKeys(10, { start: 1 }),
+    { legend: "Shift", width: 2.75, isExtraKey: true },
+  ]),
+  [
+    { legend: "Ctrl", width: 1.25, isExtraKey: true },
+    { legend: "Monke", width: 1.25, isExtraKey: true },
+    { legend: "Alt", width: 1.25, isExtraKey: true },
+    {
+      isLayoutIndicator: true,
+      width: 6,
+      x: 3.5,
+      extraKeysOverride: { width: 6.25, x: 0 },
+    },
+    { legend: "Alt", width: 1.25, isExtraKey: true },
+    { legend: "Monke", width: 1.25, isExtraKey: true },
+    { legend: "Meta", width: 1.25, isExtraKey: true },
+    { legend: "Ctrl", width: 1.25, isExtraKey: true },
+  ],
+];
+
+function buildRow(
+  row: keyof LayoutObject["keys"],
+  keys: (Omit<LayoutKey, "legends"> & { layoutPosition?: { col?: number } })[],
+): LayoutKey[] {
+  return keys.map((key, col) => {
+    const lp = key.layoutPosition;
+    return {
+      ...key,
+      ...(lp
+        ? {
+            layoutPosition: {
+              ...lp,
+              ...(lp.row !== undefined ? {} : { row }),
+              ...(lp.col !== undefined ? {} : { col }),
+            },
+          }
+        : {}),
+    } as LayoutKey;
+  });
+}
+
+export const keymapLayouts: Partial<
+  Record<KeymapStyle, Partial<Record<LayoutObject["type"], KeymapLayout>>>
+> = {
+  staggered: {
+    ansi: staggeredAnsi,
+    iso: staggeredIso,
+  },
+};

From 434782e5839b338681ccd8e35001088ec1ab8389 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sun, 21 Jun 2026 16:28:20 +0200
Subject: [PATCH 39/61] remove dynamic row5, remove matrix layout type, cleanup
 loop

---
 .../pages/test/keymapConverter.spec.ts        | 37 -------------------
 .../src/ts/components/pages/test/Keymap.tsx   | 17 ++++-----
 frontend/src/ts/elements/keymap.ts            |  2 +-
 packages/schemas/src/layouts.ts               | 18 +--------
 4 files changed, 9 insertions(+), 65 deletions(-)

diff --git a/frontend/__tests__/components/pages/test/keymapConverter.spec.ts b/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
index 0e904a0bb4ac..8d315cc2b626 100644
--- a/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
+++ b/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
@@ -323,43 +323,6 @@ describe("keymap converter", () => {
         expect(row3?.length, "row3 length").toBe(13);
         expect(row4?.length, "row4 length").toBe(13);
       });
-
-      it("converts handsdown", () => {
-        const [_row1, _row2, _row3, _row4, row5] = convertLayoutToKeymap(
-          handsdownLayout as LayoutObject,
-          {
-            keymapStyle: "staggered",
-            showAllKeys: false,
-          },
-        );
-
-        expect(row5, "row5").toEqual([
-          { legends: ["r", "R", "r", "R"], x: 4 },
-          {
-            legends: [" ", " ", " ", " "],
-            isLayoutIndicator: true,
-            width: 6,
-          },
-        ]);
-      });
-      it("converts handsdown full", () => {
-        const [_row1, _row2, _row3, _row4, row5] = convertLayoutToKeymap(
-          handsdownLayout as LayoutObject,
-          {
-            keymapStyle: "staggered",
-            showAllKeys: true,
-          },
-        );
-
-        expect(row5?.[3], "row5 extra key").toEqual({
-          legends: ["r", "R", "r", "R"],
-        });
-        expect(row5?.[4], "row5 space key").toEqual({
-          legends: [" ", " ", " ", " "],
-          isLayoutIndicator: true,
-          width: 5.25,
-        });
-      });
     });
 
     describe("split", () => {
diff --git a/frontend/src/ts/components/pages/test/Keymap.tsx b/frontend/src/ts/components/pages/test/Keymap.tsx
index f8d5ae8eb391..ead0cb809681 100644
--- a/frontend/src/ts/components/pages/test/Keymap.tsx
+++ b/frontend/src/ts/components/pages/test/Keymap.tsx
@@ -13,14 +13,11 @@ import {
 } from "../../../states/test";
 import { getTheme } from "../../../states/theme";
 import { cn } from "../../../utils/cn";
-import { isMacLike, typedEntries } from "../../../utils/misc";
+import { isMacLike } from "../../../utils/misc";
 import { Anime } from "../../common/anime";
 import { Button } from "../../common/Button";
-import {
-  convertLayoutToKeymap,
-  KeyboardDefinition,
-  KeyDefinition,
-} from "./keymapConverter";
+import { convertLayoutToKeymap } from "./keymapConverter";
+import { KeyboardDefinition, KeyDefinition } from "./keymapLayouts";
 
 type FlashEntry = { tick: number; correct: boolean };
 
@@ -118,15 +115,15 @@ function KeyboardDefinitionRenderer(props: {
   flashState: () => Map<string, FlashEntry>;
 }) {
   return (
-    <For each={typedEntries(props.keyboardDef)}>
-      {([rowId, keys]) => (
-        <Show when={rowId !== "row1" || props.showFirstRow}>
+    <For each={props.keyboardDef}>
+      {(keys, rowNum) => (
+        <Show when={rowNum() !== 0 || props.showFirstRow}>
           <div class="flex h-8 flex-row">
             <For each={keys}>
               {(key) => (
                 <Key
                   {...key}
-                  isNumRow={rowId === "row1"}
+                  isNumRow={rowNum() === 0}
                   layer={props.layer}
                   flashState={props.flashState}
                 />
diff --git a/frontend/src/ts/elements/keymap.ts b/frontend/src/ts/elements/keymap.ts
index f6c52c68a228..35150ef60ab1 100644
--- a/frontend/src/ts/elements/keymap.ts
+++ b/frontend/src/ts/elements/keymap.ts
@@ -26,7 +26,7 @@ const keymap = qsr("#keymap");
 
 const stenoKeys: LayoutObject = {
   keymapShowTopRow: true,
-  type: "matrix",
+  type: "ansi",
   keys: {
     row1: [],
     row2: [
diff --git a/packages/schemas/src/layouts.ts b/packages/schemas/src/layouts.ts
index aebbc943d185..590842e1d2f9 100644
--- a/packages/schemas/src/layouts.ts
+++ b/packages/schemas/src/layouts.ts
@@ -290,22 +290,6 @@ const isoLayoutSchema = commonLayoutSchema
   })
   .strict();
 
-const matrixLayoutSchema = commonLayoutSchema
-  .extend({
-    type: z.literal("matrix"),
-    keys: z
-      .object({
-        row1: z.array(KeyLegendsSchema).length(0),
-        row2: z.array(KeyLegendsSchema).length(10),
-        row3: z.array(KeyLegendsSchema).length(10),
-        row4: z.array(KeyLegendsSchema).length(4),
-        row5: z.array(row5CharDefinitionSchema).length(0),
-      })
-      .strict(),
-  })
-  .strict();
+export const LayoutObjectSchema = ansiLayoutSchema.or(isoLayoutSchema);
 
-export const LayoutObjectSchema = ansiLayoutSchema
-  .or(isoLayoutSchema)
-  .or(matrixLayoutSchema);
 export type LayoutObject = z.infer<typeof LayoutObjectSchema>;

From 48d6f48546c136f839161db44dec94521153898e Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sun, 21 Jun 2026 16:33:45 +0200
Subject: [PATCH 40/61] unknown keys

---
 frontend/src/ts/components/pages/test/keymapConverter.ts | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/frontend/src/ts/components/pages/test/keymapConverter.ts b/frontend/src/ts/components/pages/test/keymapConverter.ts
index 4b401eb98f93..31abcf5c21de 100644
--- a/frontend/src/ts/components/pages/test/keymapConverter.ts
+++ b/frontend/src/ts/components/pages/test/keymapConverter.ts
@@ -53,9 +53,7 @@ function convert(options: {
         const legends = keyDef.isLayoutIndicator
           ? buildLegends([" "])
           : buildLegends(
-              keyDef.legend !== undefined
-                ? [keyDef.legend]
-                : (layoutLegend as string[]),
+              keyDef.legend !== undefined ? [keyDef.legend] : layoutLegend,
             );
 
         if (keyDef.isExtraKey && !isShowAllKeys) {
@@ -85,8 +83,8 @@ function convert(options: {
   );
 }
 
-function buildLegends(legends: KeyLegends): KeyLegends {
-  if (legends === undefined) return ["error", "error", "error", "error"];
+function buildLegends(legends: KeyLegends | undefined): KeyLegends {
+  if (legends === undefined) return ["", "", "", ""];
   switch (legends.length) {
     case 1:
       return new Array<string>(4).fill(legends.at(0) as string);

From df5c8487e498ca24c38d12a4d12b42ae03b16dbc Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sun, 21 Jun 2026 17:00:46 +0200
Subject: [PATCH 41/61] steno and steno matrix

---
 .../pages/test/keymapConverter.spec.ts        |  6 +-
 .../components/pages/test/keymapConverter.ts  | 12 +--
 .../ts/components/pages/test/keymapLayouts.ts | 75 +++++++++++++++++--
 3 files changed, 80 insertions(+), 13 deletions(-)

diff --git a/frontend/__tests__/components/pages/test/keymapConverter.spec.ts b/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
index 8d315cc2b626..ef73e8f3e663 100644
--- a/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
+++ b/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
@@ -747,7 +747,7 @@ describe("keymap converter", () => {
     describe("steno", () => {
       it("converts steno", () => {
         const [row1, row2, row3, row4, row5] = convertLayoutToKeymap(
-          {} as any,
+          { type: "ansi" } as LayoutObject,
           {
             keymapStyle: "steno",
             showAllKeys: false,
@@ -783,12 +783,12 @@ describe("keymap converter", () => {
           { legends: ["e", "E", "e", "E"], x: 0.5 },
           { legends: ["u", "U", "u", "U"] },
         ]);
-        expect(row5, "row5").toEqual([]);
+        expect(row5, "row5").toBeUndefined();
       });
 
       it("converts steno matrix", () => {
         const [row1, row2, row3, row4, row5] = convertLayoutToKeymap(
-          {} as any,
+          { type: "ansi" } as LayoutObject,
           {
             keymapStyle: "steno_matrix",
             showAllKeys: false,
diff --git a/frontend/src/ts/components/pages/test/keymapConverter.ts b/frontend/src/ts/components/pages/test/keymapConverter.ts
index 31abcf5c21de..86dbfeeed278 100644
--- a/frontend/src/ts/components/pages/test/keymapConverter.ts
+++ b/frontend/src/ts/components/pages/test/keymapConverter.ts
@@ -51,10 +51,8 @@ function convert(options: {
           ];
 
         const legends = keyDef.isLayoutIndicator
-          ? buildLegends([" "])
-          : buildLegends(
-              keyDef.legend !== undefined ? [keyDef.legend] : layoutLegend,
-            );
+          ? buildLegends(" ")
+          : buildLegends(keyDef.legend ?? layoutLegend);
 
         if (keyDef.isExtraKey && !isShowAllKeys) {
           return undefined;
@@ -83,8 +81,12 @@ function convert(options: {
   );
 }
 
-function buildLegends(legends: KeyLegends | undefined): KeyLegends {
+function buildLegends(legends: string | KeyLegends | undefined): KeyLegends {
   if (legends === undefined) return ["", "", "", ""];
+  if (typeof legends === "string") {
+    return new Array<string>(4).fill(legends);
+  }
+
   switch (legends.length) {
     case 1:
       return new Array<string>(4).fill(legends.at(0) as string);
diff --git a/frontend/src/ts/components/pages/test/keymapLayouts.ts b/frontend/src/ts/components/pages/test/keymapLayouts.ts
index b5ae2cbdcefb..852fe548cf9a 100644
--- a/frontend/src/ts/components/pages/test/keymapLayouts.ts
+++ b/frontend/src/ts/components/pages/test/keymapLayouts.ts
@@ -30,7 +30,7 @@ type LayoutKey = Omit<KeyDefinition, "legends"> & {
   layoutPosition?: LayoutPosition;
 } & OneOf<{
     isLayoutIndicator: true;
-    legend?: string;
+    legend?: string | string[];
   }>;
 
 export type KeymapLayout = LayoutKey[][];
@@ -149,6 +149,72 @@ const staggeredIso: KeymapLayout = [
   ],
 ];
 
+const steno: KeymapLayout = [
+  [], //emtpy first row, avoid it to be hidden
+  [
+    { legend: ["s", "S"], height: 2 },
+    { legend: ["t", "T"] },
+    { legend: ["p", "P"] },
+    { legend: ["h", "H"] },
+    { legend: "*", height: 2 },
+    { legend: ["f", "F"] },
+    { legend: ["p", "P"] },
+    { legend: ["l", "L"] },
+    { legend: ["t", "T"] },
+    { legend: ["d", "D"] },
+  ],
+  [
+    { legend: ["k", "K"], x: 1 },
+    { legend: ["w", "W"] },
+    { legend: ["r", "R"] },
+    { legend: ["r", "R"], x: 1 },
+    { legend: ["b", "B"] },
+    { legend: ["g", "G"] },
+    { legend: ["s", "S"] },
+    { legend: ["z", "Z"] },
+  ],
+  [
+    { legend: ["a", "A"], x: 2.25 },
+    { legend: ["o", "O"] },
+    { legend: ["e", "E"], x: 0.5 },
+    { legend: ["u", "U"] },
+  ],
+];
+
+const stenoMatrix: KeymapLayout = [
+  [], //emtpy first row, avoid it to be hidden
+  [
+    { legend: ["s", "S"] },
+    { legend: ["t", "T"] },
+    { legend: ["p", "P"] },
+    { legend: ["h", "H"] },
+    { legend: "*" },
+    { legend: ["f", "F"], x: 1 },
+    { legend: ["p", "P"] },
+    { legend: ["l", "L"] },
+    { legend: ["t", "T"] },
+    { legend: ["d", "D"] },
+  ],
+  [
+    { legend: ["s", "S"] },
+    { legend: ["k", "K"] },
+    { legend: ["w", "W"] },
+    { legend: ["r", "R"] },
+    { legend: "*" },
+    { legend: ["r", "R"], x: 1 },
+    { legend: ["b", "B"] },
+    { legend: ["g", "G"] },
+    { legend: ["s", "S"] },
+    { legend: ["z", "Z"] },
+  ],
+  [
+    { legend: ["a", "A"], x: 3 },
+    { legend: ["o", "O"] },
+    { legend: ["e", "E"], x: 1 },
+    { legend: ["u", "U"] },
+  ],
+];
+
 function buildRow(
   row: keyof LayoutObject["keys"],
   keys: (Omit<LayoutKey, "legends"> & { layoutPosition?: { col?: number } })[],
@@ -173,8 +239,7 @@ function buildRow(
 export const keymapLayouts: Partial<
   Record<KeymapStyle, Partial<Record<LayoutObject["type"], KeymapLayout>>>
 > = {
-  staggered: {
-    ansi: staggeredAnsi,
-    iso: staggeredIso,
-  },
+  staggered: { ansi: staggeredAnsi, iso: staggeredIso },
+  steno: { iso: steno, ansi: steno },
+  steno_matrix: { iso: stenoMatrix, ansi: stenoMatrix },
 };

From 59652d4131dbf3703212acd46ff090da1dac657d Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sun, 21 Jun 2026 17:39:20 +0200
Subject: [PATCH 42/61] add split

---
 .../pages/test/keymapConverter.spec.ts        | 150 ++++++++++--------
 .../ts/components/pages/test/keymapLayouts.ts |  84 ++++++----
 2 files changed, 134 insertions(+), 100 deletions(-)

diff --git a/frontend/__tests__/components/pages/test/keymapConverter.spec.ts b/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
index ef73e8f3e663..ed855fd3e106 100644
--- a/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
+++ b/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
@@ -129,34 +129,42 @@ describe("keymap converter", () => {
         });
 
         // Row5: Ctrl, Monke, Alt at start; Alt, Monke, Meta, Ctrl at end
-        expect(row5?.[0], "row5 first").toEqual({
-          legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"],
-          width: 1.25,
-        });
-        expect(row5?.[1], "row5 second").toEqual({
-          legends: ["Monke", "Monke", "Monke", "Monke"],
-          width: 1.25,
-        });
-        expect(row5?.[2], "row5 third").toEqual({
-          legends: ["Alt", "Alt", "Alt", "Alt"],
-          width: 1.25,
-        });
-        expect(row5?.[row5.length - 4], "row5 Alt right").toEqual({
-          legends: ["Alt", "Alt", "Alt", "Alt"],
-          width: 1.25,
-        });
-        expect(row5?.[row5.length - 3], "row5 Monke right").toEqual({
-          legends: ["Monke", "Monke", "Monke", "Monke"],
-          width: 1.25,
-        });
-        expect(row5?.[row5.length - 2], "row5 Meta").toEqual({
-          legends: ["Meta", "Meta", "Meta", "Meta"],
-          width: 1.25,
-        });
-        expect(row5?.[row5.length - 1], "row5 last").toEqual({
-          legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"],
-          width: 1.25,
-        });
+        expect(row5, "row5").toEqual([
+          {
+            legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"],
+            width: 1.25,
+          },
+          {
+            legends: ["Monke", "Monke", "Monke", "Monke"],
+            width: 1.25,
+          },
+          {
+            legends: ["Alt", "Alt", "Alt", "Alt"],
+            width: 1.25,
+          },
+          {
+            isLayoutIndicator: true,
+            legends: [" ", " ", " ", " "],
+            width: 6.25,
+            x: 0,
+          },
+          {
+            legends: ["Alt", "Alt", "Alt", "Alt"],
+            width: 1.25,
+          },
+          {
+            legends: ["Monke", "Monke", "Monke", "Monke"],
+            width: 1.25,
+          },
+          {
+            legends: ["Meta", "Meta", "Meta", "Meta"],
+            width: 1.25,
+          },
+          {
+            legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"],
+            width: 1.25,
+          },
+        ]);
 
         // Also verify total counts are as expected with extra keys
         expect(row1?.length, "row1 length").toBe(14);
@@ -336,27 +344,27 @@ describe("keymap converter", () => {
         );
 
         // Test split-specific differences from staggered (not covered by basic test)
-        // Split adds x=8 gap after column 7 for rows 1-4, and row5 has 2 keys with gap
+        // Split adds x=1 gap after column 7 for rows 1-4, and row5 has 2 keys with gap
 
-        // Row 1: col7 (index 6) = '7' gets x=8
+        // Row 1: col7 (index 6) = '7' gets gap x=1
         expect(row1?.[6], "row1 key 7").toEqual({
           legends: ["7", "&", "7", "&"],
           x: 1,
         });
 
-        // Row 2: col6 (index 5) = 'y' gets x=8
+        // Row 2: col6 (index 5) = 'y' gets gap x=1
         expect(row2?.[5], "row2 key y").toEqual({
           legends: ["y", "Y", "y", "Y"],
           x: 1,
         });
 
-        // Row 3: col6 (index 5) = 'h' gets x=8
+        // Row 3: col6 (index 5) = 'h' gets gap x=1
         expect(row3?.[5], "row3 key h").toEqual({
           legends: ["h", "H", "h", "H"],
           x: 1,
         });
 
-        // Row 4: col6 (index 5) = 'n' gets x=8
+        // Row 4: col6 (index 5) = 'n' gets gap x=1
         expect(row4?.[5], "row4 key n").toEqual({
           legends: ["n", "N", "n", "N"],
           x: 1,
@@ -377,6 +385,27 @@ describe("keymap converter", () => {
         });
       });
 
+      it("converts qwerty split all keys", () => {
+        const [_row1, _row2, _row3, _row4, row5] = convertLayoutToKeymap(
+          qwertyLayout as LayoutObject,
+          {
+            keymapStyle: "split",
+            showAllKeys: true,
+          },
+        );
+        expect(row5?.[3], "row5 left shift").toEqual({
+          legends: [" ", " ", " ", " "],
+          width: 3,
+          x: 0,
+          isLayoutIndicator: true,
+        });
+        expect(row5?.[4], "row5 right shift").toEqual({
+          legends: [" ", " ", " ", " "],
+          width: 3,
+          x: 1,
+        });
+      });
+
       it("converts qwertz split", () => {
         const [row1, row2, row3, row4, row5] = convertLayoutToKeymap(
           qwertzLayout as LayoutObject,
@@ -388,27 +417,27 @@ describe("keymap converter", () => {
 
         // Test split-specific differences from staggered (not covered by basic test)
 
-        // Row 1: col7 (index 6) = '7' gets x=8
+        // Row 1: col7 (index 6) = '7' gets gap x=1
         expect(row1?.[6], "row1 key 7").toEqual({
           legends: ["7", "/", "7", "/"],
           x: 1,
         });
 
-        // Row 2: col6 (index 5) = 'z' gets x=8
+        // Row 2: col6 (index 5) = 'z' gets gap x=1
         expect(row2?.[5], "row2 key z").toEqual({
           legends: ["z", "Z", "z", "Z"],
           x: 1,
         });
 
-        // Row 3: col6 (index 5) = 'h' gets x=8
+        // Row 3: col6 (index 5) = 'h' gets gap x=1
         expect(row3?.[5], "row3 key h").toEqual({
           legends: ["h", "H", "h", "H"],
           x: 1,
         });
 
-        // Row 4: col5 (index 5) = 'b' gets x=8
-        expect(row4?.[5], "row4 key b").toEqual({
-          legends: ["b", "B", "b", "B"],
+        // Row 4: col5 (index 6) = 'b' gets gap x=1
+        expect(row4?.[6], "row4 key n").toEqual({
+          legends: ["n", "N", "n", "N"],
           x: 1,
         });
 
@@ -427,42 +456,23 @@ describe("keymap converter", () => {
         });
       });
 
-      it("converts handsdown", () => {
+      it("converts qwertz split all keys", () => {
         const [_row1, _row2, _row3, _row4, row5] = convertLayoutToKeymap(
-          handsdownLayout as LayoutObject,
-          {
-            keymapStyle: "split",
-            showAllKeys: false,
-          },
-        );
-
-        expect(row5, "row5").toEqual([
-          { legends: ["r", "R", "r", "R"], x: 5.5 },
-          {
-            legends: [" ", " ", " ", " "],
-            isLayoutIndicator: true,
-            width: 3,
-            x: 1,
-          },
-        ]);
-      });
-      it("converts handsdown full", () => {
-        const [_row1, _row2, _row3, _row4, row5] = convertLayoutToKeymap(
-          handsdownLayout as LayoutObject,
+          qwertzLayout as LayoutObject,
           {
             keymapStyle: "split",
             showAllKeys: true,
           },
         );
-
-        expect(row5?.[3], "row5 extra key").toEqual({
-          legends: ["r", "R", "r", "R"],
+        expect(row5?.[3], "row5 left shift").toEqual({
+          legends: [" ", " ", " ", " "],
           width: 3,
+          x: 0,
+          isLayoutIndicator: true,
         });
-        expect(row5?.[4], "row5 space key").toEqual({
+        expect(row5?.[4], "row5 right shift").toEqual({
           legends: [" ", " ", " ", " "],
-          isLayoutIndicator: true,
-          width: 3.5,
+          width: 3,
           x: 1,
         });
       });
@@ -664,25 +674,25 @@ describe("keymap converter", () => {
           },
         );
 
-        // Row 1: col6 (index 5) = '6' gets x=8
+        // Row 1: col6 (index 5) = '6' gets gap x=1
         expect(row1?.[5], "row1 key 7").toEqual({
           legends: ["6", "^", "6", "^"],
           x: 1,
         });
 
-        // Row 2: col6 (index 5) = 'y' gets x=8
+        // Row 2: col6 (index 5) = 'y' gets gap x=1
         expect(row2?.[5], "row2 key y").toEqual({
           legends: ["y", "Y", "y", "Y"],
           x: 1,
         });
 
-        // Row 3: col6 (index 5) = 'h' gets x=8
+        // Row 3: col6 (index 5) = 'h' gets gap x=1
         expect(row3?.[5], "row3 key h").toEqual({
           legends: ["h", "H", "h", "H"],
           x: 1,
         });
 
-        // Row 4: col6 (index 5) = 'n' gets x=8
+        // Row 4: col6 (index 5) = 'n' gets gap x=1
         expect(row4?.[5], "row4 key n").toEqual({
           legends: ["n", "N", "n", "N"],
           x: 1,
diff --git a/frontend/src/ts/components/pages/test/keymapLayouts.ts b/frontend/src/ts/components/pages/test/keymapLayouts.ts
index 852fe548cf9a..5a68d0df23ed 100644
--- a/frontend/src/ts/components/pages/test/keymapLayouts.ts
+++ b/frontend/src/ts/components/pages/test/keymapLayouts.ts
@@ -49,6 +49,34 @@ function addLayoutKeys(
   });
 }
 
+const staggeredBottomRow: LayoutKey[] = [
+  { legend: "Ctrl", width: 1.25, isExtraKey: true },
+  { legend: "Monke", width: 1.25, isExtraKey: true },
+  { legend: "Alt", width: 1.25, isExtraKey: true },
+  {
+    isLayoutIndicator: true,
+    width: 6,
+    x: 3.5,
+    extraKeysOverride: { width: 6.25, x: 0 },
+  },
+  { legend: "Alt", width: 1.25, isExtraKey: true },
+  { legend: "Monke", width: 1.25, isExtraKey: true },
+  { legend: "Meta", width: 1.25, isExtraKey: true },
+  { legend: "Ctrl", width: 1.25, isExtraKey: true },
+];
+
+const splitBottomRow: LayoutKey[] = [
+  ...staggeredBottomRow.slice(0, 3),
+  {
+    isLayoutIndicator: true,
+    width: 3,
+    x: 3.5,
+    extraKeysOverride: { x: 0 },
+  },
+  { legend: " ", width: 3, x: 1 },
+  ...staggeredBottomRow.slice(4),
+];
+
 const staggeredAnsi: KeymapLayout = [
   buildRow("row1", [
     { layoutPosition: { col: 0 }, isExtraKey: true },
@@ -82,21 +110,15 @@ const staggeredAnsi: KeymapLayout = [
     ...addLayoutKeys(9, { start: 1 }),
     { legend: "Shift", width: 2.75, isExtraKey: true },
   ]),
-  [
-    { legend: "Ctrl", width: 1.25, isExtraKey: true },
-    { legend: "Monke", width: 1.25, isExtraKey: true },
-    { legend: "Alt", width: 1.25, isExtraKey: true },
-    {
-      isLayoutIndicator: true,
-      width: 6,
-      x: 3.5,
-      extraKeysOverride: { width: 6.25, x: 0 },
-    },
-    { legend: "Alt", width: 1.25, isExtraKey: true },
-    { legend: "Monke", width: 1.25, isExtraKey: true },
-    { legend: "Meta", width: 1.25, isExtraKey: true },
-    { legend: "Ctrl", width: 1.25, isExtraKey: true },
-  ],
+  staggeredBottomRow,
+];
+
+const splitAnsi: KeymapLayout = [
+  insertGap(7, staggeredAnsi[0]),
+  insertGap(6, staggeredAnsi[1]),
+  insertGap(6, staggeredAnsi[2]),
+  insertGap(6, staggeredAnsi[3]),
+  splitBottomRow,
 ];
 
 const staggeredIso: KeymapLayout = [
@@ -132,21 +154,14 @@ const staggeredIso: KeymapLayout = [
     ...addLayoutKeys(10, { start: 1 }),
     { legend: "Shift", width: 2.75, isExtraKey: true },
   ]),
-  [
-    { legend: "Ctrl", width: 1.25, isExtraKey: true },
-    { legend: "Monke", width: 1.25, isExtraKey: true },
-    { legend: "Alt", width: 1.25, isExtraKey: true },
-    {
-      isLayoutIndicator: true,
-      width: 6,
-      x: 3.5,
-      extraKeysOverride: { width: 6.25, x: 0 },
-    },
-    { legend: "Alt", width: 1.25, isExtraKey: true },
-    { legend: "Monke", width: 1.25, isExtraKey: true },
-    { legend: "Meta", width: 1.25, isExtraKey: true },
-    { legend: "Ctrl", width: 1.25, isExtraKey: true },
-  ],
+  staggeredBottomRow,
+];
+const splitIso: KeymapLayout = [
+  insertGap(7, staggeredIso[0]),
+  insertGap(6, staggeredIso[1]),
+  insertGap(6, staggeredIso[2]),
+  insertGap(7, staggeredIso[3]),
+  splitBottomRow,
 ];
 
 const steno: KeymapLayout = [
@@ -240,6 +255,15 @@ export const keymapLayouts: Partial<
   Record<KeymapStyle, Partial<Record<LayoutObject["type"], KeymapLayout>>>
 > = {
   staggered: { ansi: staggeredAnsi, iso: staggeredIso },
+  split: { ansi: splitAnsi, iso: splitIso },
+
   steno: { iso: steno, ansi: steno },
   steno_matrix: { iso: stenoMatrix, ansi: stenoMatrix },
 };
+
+function insertGap(gapCol: number, row: LayoutKey[] | undefined): LayoutKey[] {
+  return (row as LayoutKey[]).map((def, col) => ({
+    ...def,
+    x: col === gapCol ? 1 : def.x,
+  }));
+}

From 3480564d038828d00d3263dda87554eb8f719238 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sun, 21 Jun 2026 18:13:18 +0200
Subject: [PATCH 43/61] matrix and split matrix

---
 .../pages/test/keymapConverter.spec.ts        | 186 ++++++------------
 .../ts/components/pages/test/keymapLayouts.ts | 136 +++++++++----
 2 files changed, 163 insertions(+), 159 deletions(-)

diff --git a/frontend/__tests__/components/pages/test/keymapConverter.spec.ts b/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
index ed855fd3e106..1873b205ded6 100644
--- a/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
+++ b/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
@@ -3,7 +3,6 @@ import { convertLayoutToKeymap } from "../../../../src/ts/components/pages/test/
 
 import qwertyLayout from "../../../../static/layouts/qwerty.json";
 import qwertzLayout from "../../../../static/layouts/qwertz.json";
-import handsdownLayout from "../../../../static/layouts/handsdown_promethium.json";
 
 import { LayoutObject } from "@monkeytype/schemas/layouts";
 
@@ -296,34 +295,42 @@ describe("keymap converter", () => {
         });
 
         // Row5: Ctrl, Monke, Alt at start; Alt, Monke, Meta, Ctrl at end
-        expect(row5?.[0], "row5 first").toEqual({
-          legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"],
-          width: 1.25,
-        });
-        expect(row5?.[1], "row5 second").toEqual({
-          legends: ["Monke", "Monke", "Monke", "Monke"],
-          width: 1.25,
-        });
-        expect(row5?.[2], "row5 third").toEqual({
-          legends: ["Alt", "Alt", "Alt", "Alt"],
-          width: 1.25,
-        });
-        expect(row5?.[row5.length - 4], "row5 Alt right").toEqual({
-          legends: ["Alt", "Alt", "Alt", "Alt"],
-          width: 1.25,
-        });
-        expect(row5?.[row5.length - 3], "row5 Monke right").toEqual({
-          legends: ["Monke", "Monke", "Monke", "Monke"],
-          width: 1.25,
-        });
-        expect(row5?.[row5.length - 2], "row5 Meta").toEqual({
-          legends: ["Meta", "Meta", "Meta", "Meta"],
-          width: 1.25,
-        });
-        expect(row5?.[row5.length - 1], "row5 last").toEqual({
-          legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"],
-          width: 1.25,
-        });
+        expect(row5, "row5").toEqual([
+          {
+            legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"],
+            width: 1.25,
+          },
+          {
+            legends: ["Monke", "Monke", "Monke", "Monke"],
+            width: 1.25,
+          },
+          {
+            legends: ["Alt", "Alt", "Alt", "Alt"],
+            width: 1.25,
+          },
+          {
+            isLayoutIndicator: true,
+            legends: [" ", " ", " ", " "],
+            width: 6.25,
+            x: 0,
+          },
+          {
+            legends: ["Alt", "Alt", "Alt", "Alt"],
+            width: 1.25,
+          },
+          {
+            legends: ["Monke", "Monke", "Monke", "Monke"],
+            width: 1.25,
+          },
+          {
+            legends: ["Meta", "Meta", "Meta", "Meta"],
+            width: 1.25,
+          },
+          {
+            legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"],
+            width: 1.25,
+          },
+        ]);
 
         // Also verify total counts are as expected with extra keys
         expect(row1?.length, "row1 length").toBe(14);
@@ -599,68 +606,37 @@ describe("keymap converter", () => {
         });
 
         // Row5: Ctrl, Monke, Alt at start; Alt,  Meta, Ctrl at end
-        expect(row5?.[0], "row5 first").toEqual({
-          legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"],
-        });
-        expect(row5?.[1], "row5 second").toEqual({
-          legends: ["Monke", "Monke", "Monke", "Monke"],
-        });
-        expect(row5?.[2], "row5 third").toEqual({
-          legends: ["Alt", "Alt", "Alt", "Alt"],
-        });
-        expect(row5?.[row5.length - 3], "row5 Alt right").toEqual({
-          legends: ["Alt", "Alt", "Alt", "Alt"],
-        });
-        expect(row5?.[row5.length - 2], "row5 Meta").toEqual({
-          legends: ["Meta", "Meta", "Meta", "Meta"],
-        });
-        expect(row5?.[row5.length - 1], "row5 last").toEqual({
-          legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"],
-        });
-
-        // Also verify total counts are as expected with extra keys
-        expect(row1?.length, "row1 length").toBe(12);
-        expect(row2?.length, "row2 length").toBe(12);
-        expect(row3?.length, "row3 length").toBe(12);
-        expect(row4?.length, "row4 length").toBe(12);
-      });
-
-      it("converts handsdown", () => {
-        const [_row1, _row2, _row3, _row4, row5] = convertLayoutToKeymap(
-          handsdownLayout as LayoutObject,
+        expect(row5, "row5").toEqual([
           {
-            keymapStyle: "matrix",
-            showAllKeys: false,
+            legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"],
+          },
+          {
+            legends: ["Monke", "Monke", "Monke", "Monke"],
+          },
+          {
+            legends: ["Alt", "Alt", "Alt", "Alt"],
           },
-        );
-
-        expect(row5, "row5").toEqual([
-          { legends: ["r", "R", "r", "R"], width: 3, x: 2 },
           {
-            legends: [" ", " ", " ", " "],
             isLayoutIndicator: true,
-            width: 3,
+            legends: [" ", " ", " ", " "],
+            width: 6,
+            x: 0,
           },
-        ]);
-      });
-      it("converts handsdown full", () => {
-        const [_row1, _row2, _row3, _row4, row5] = convertLayoutToKeymap(
-          handsdownLayout as LayoutObject,
           {
-            keymapStyle: "matrix",
-            showAllKeys: true,
+            legends: ["Alt", "Alt", "Alt", "Alt"],
           },
-        );
-
-        expect(row5?.[3], "row5 extra key").toEqual({
-          legends: ["r", "R", "r", "R"],
-          width: 3,
-        });
-        expect(row5?.[4], "row5 space key").toEqual({
-          legends: [" ", " ", " ", " "],
-          isLayoutIndicator: true,
-          width: 3,
-        });
+          {
+            legends: ["Meta", "Meta", "Meta", "Meta"],
+          },
+          {
+            legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"],
+          },
+        ]);
+        // Also verify total counts are as expected with extra keys
+        expect(row1?.length, "row1 length").toBe(12);
+        expect(row2?.length, "row2 length").toBe(12);
+        expect(row3?.length, "row3 length").toBe(12);
+        expect(row4?.length, "row4 length").toBe(12);
       });
     });
 
@@ -712,46 +688,6 @@ describe("keymap converter", () => {
           x: 1,
         });
       });
-
-      it("converts handsdown", () => {
-        const [_row1, _row2, _row3, _row4, row5] = convertLayoutToKeymap(
-          handsdownLayout as LayoutObject,
-          {
-            keymapStyle: "split_matrix",
-            showAllKeys: false,
-          },
-        );
-
-        expect(row5, "row5").toEqual([
-          { legends: ["r", "R", "r", "R"], width: 3, x: 2 },
-          {
-            legends: [" ", " ", " ", " "],
-            isLayoutIndicator: true,
-            width: 3,
-            x: 1,
-          },
-        ]);
-      });
-      it("converts handsdown full", () => {
-        const [_row1, _row2, _row3, _row4, row5] = convertLayoutToKeymap(
-          handsdownLayout as LayoutObject,
-          {
-            keymapStyle: "split_matrix",
-            showAllKeys: true,
-          },
-        );
-
-        expect(row5?.[3], "row5 extra key").toEqual({
-          legends: ["r", "R", "r", "R"],
-          width: 3,
-        });
-        expect(row5?.[4], "row5 space key").toEqual({
-          legends: [" ", " ", " ", " "],
-          isLayoutIndicator: true,
-          width: 3,
-          x: 1,
-        });
-      });
     });
 
     describe("steno", () => {
@@ -836,7 +772,7 @@ describe("keymap converter", () => {
           { legends: ["e", "E", "e", "E"], x: 1 },
           { legends: ["u", "U", "u", "U"] },
         ]);
-        expect(row5, "row5").toEqual([]);
+        expect(row5, "row5").toBeUndefined();
       });
     });
   });
diff --git a/frontend/src/ts/components/pages/test/keymapLayouts.ts b/frontend/src/ts/components/pages/test/keymapLayouts.ts
index 5a68d0df23ed..e7de55436a75 100644
--- a/frontend/src/ts/components/pages/test/keymapLayouts.ts
+++ b/frontend/src/ts/components/pages/test/keymapLayouts.ts
@@ -35,20 +35,6 @@ type LayoutKey = Omit<KeyDefinition, "legends"> & {
 
 export type KeymapLayout = LayoutKey[][];
 
-function addLayoutKeys(
-  count: number,
-  options: { start?: number },
-): LayoutKey[] {
-  return new Array<LayoutKey>(count).fill({}).map((it, index) => {
-    return {
-      ...it,
-      layoutPosition: {
-        col: index + (options.start ?? 0),
-      },
-    };
-  });
-}
-
 const staggeredBottomRow: LayoutKey[] = [
   { legend: "Ctrl", width: 1.25, isExtraKey: true },
   { legend: "Monke", width: 1.25, isExtraKey: true },
@@ -65,18 +51,6 @@ const staggeredBottomRow: LayoutKey[] = [
   { legend: "Ctrl", width: 1.25, isExtraKey: true },
 ];
 
-const splitBottomRow: LayoutKey[] = [
-  ...staggeredBottomRow.slice(0, 3),
-  {
-    isLayoutIndicator: true,
-    width: 3,
-    x: 3.5,
-    extraKeysOverride: { x: 0 },
-  },
-  { legend: " ", width: 3, x: 1 },
-  ...staggeredBottomRow.slice(4),
-];
-
 const staggeredAnsi: KeymapLayout = [
   buildRow("row1", [
     { layoutPosition: { col: 0 }, isExtraKey: true },
@@ -113,14 +87,6 @@ const staggeredAnsi: KeymapLayout = [
   staggeredBottomRow,
 ];
 
-const splitAnsi: KeymapLayout = [
-  insertGap(7, staggeredAnsi[0]),
-  insertGap(6, staggeredAnsi[1]),
-  insertGap(6, staggeredAnsi[2]),
-  insertGap(6, staggeredAnsi[3]),
-  splitBottomRow,
-];
-
 const staggeredIso: KeymapLayout = [
   buildRow("row1", [
     { layoutPosition: { col: 0 }, isExtraKey: true },
@@ -156,6 +122,27 @@ const staggeredIso: KeymapLayout = [
   ]),
   staggeredBottomRow,
 ];
+
+const splitBottomRow: LayoutKey[] = [
+  ...staggeredBottomRow.slice(0, 3),
+  {
+    isLayoutIndicator: true,
+    width: 3,
+    x: 3.5,
+    extraKeysOverride: { x: 0 },
+  },
+  { legend: " ", width: 3, x: 1 },
+  ...staggeredBottomRow.slice(4),
+];
+
+const splitAnsi: KeymapLayout = [
+  insertGap(7, staggeredAnsi[0]),
+  insertGap(6, staggeredAnsi[1]),
+  insertGap(6, staggeredAnsi[2]),
+  insertGap(6, staggeredAnsi[3]),
+  splitBottomRow,
+];
+
 const splitIso: KeymapLayout = [
   insertGap(7, staggeredIso[0]),
   insertGap(6, staggeredIso[1]),
@@ -230,6 +217,70 @@ const stenoMatrix: KeymapLayout = [
   ],
 ];
 
+const matrixBottomRow: LayoutKey[] = [
+  { legend: "Ctrl", isExtraKey: true },
+  { legend: "Monke", isExtraKey: true },
+  { legend: "Alt", isExtraKey: true },
+  {
+    isLayoutIndicator: true,
+    width: 4,
+    x: 3,
+    extraKeysOverride: { width: 6, x: 0 },
+  },
+  { legend: "Alt", isExtraKey: true },
+  { legend: "Meta", isExtraKey: true },
+  { legend: "Ctrl", isExtraKey: true },
+];
+
+const matrix: KeymapLayout = [
+  buildRow("row1", [
+    { layoutPosition: { col: 0 }, isExtraKey: true },
+    ...addLayoutKeys(10, { start: 1 }),
+    { legend: "BS", isExtraKey: true },
+  ]),
+  buildRow("row2", [
+    { legend: "Tab", isExtraKey: true },
+    ...addLayoutKeys(10),
+    { legend: "Del", isExtraKey: true },
+  ]),
+  buildRow("row3", [
+    { legend: "Esc", isExtraKey: true },
+    ...addLayoutKeys(3),
+    { layoutPosition: { col: 3 }, isHoming: true },
+    { layoutPosition: { col: 4 } },
+    { layoutPosition: { col: 5 } },
+    { layoutPosition: { col: 6 }, isHoming: true },
+    ...addLayoutKeys(3, { start: 7 }),
+    { layoutPosition: { col: 10 }, isExtraKey: true },
+  ]),
+  buildRow("row4", [
+    { legend: "Shift", isExtraKey: true },
+    ...addLayoutKeys(10),
+    { legend: "Enter", isExtraKey: true },
+  ]),
+  matrixBottomRow,
+];
+
+const splitMatrixBottomRow: LayoutKey[] = [
+  ...matrixBottomRow.slice(0, 3),
+  {
+    isLayoutIndicator: true,
+    width: 3,
+    x: 2,
+    extraKeysOverride: { x: 0 },
+  },
+  { legend: " ", width: 3, x: 1 },
+  ...matrixBottomRow.slice(4),
+];
+
+const splitMatrix: KeymapLayout = [
+  insertGap(6, matrix[0]),
+  insertGap(6, matrix[1]),
+  insertGap(6, matrix[2]),
+  insertGap(6, matrix[3]),
+  splitMatrixBottomRow,
+];
+
 function buildRow(
   row: keyof LayoutObject["keys"],
   keys: (Omit<LayoutKey, "legends"> & { layoutPosition?: { col?: number } })[],
@@ -259,6 +310,9 @@ export const keymapLayouts: Partial<
 
   steno: { iso: steno, ansi: steno },
   steno_matrix: { iso: stenoMatrix, ansi: stenoMatrix },
+
+  matrix: { iso: matrix, ansi: matrix },
+  split_matrix: { iso: splitMatrix, ansi: splitMatrix },
 };
 
 function insertGap(gapCol: number, row: LayoutKey[] | undefined): LayoutKey[] {
@@ -267,3 +321,17 @@ function insertGap(gapCol: number, row: LayoutKey[] | undefined): LayoutKey[] {
     x: col === gapCol ? 1 : def.x,
   }));
 }
+
+function addLayoutKeys(
+  count: number,
+  options?: { start?: number },
+): LayoutKey[] {
+  return new Array<LayoutKey>(count).fill({}).map((it, index) => {
+    return {
+      ...it,
+      layoutPosition: {
+        col: index + (options?.start ?? 0),
+      },
+    };
+  });
+}

From 174fdbce3fd55fefbff07f4c480d20dacbff3e0f Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sun, 21 Jun 2026 23:39:12 +0200
Subject: [PATCH 44/61] alice

---
 .../pages/test/keymapConverter.spec.ts        |  45 +++---
 .../src/ts/components/pages/test/Keymap.tsx   |   2 +-
 .../ts/components/pages/test/keymapLayouts.ts | 138 +++++++++++++++---
 3 files changed, 146 insertions(+), 39 deletions(-)

diff --git a/frontend/__tests__/components/pages/test/keymapConverter.spec.ts b/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
index 1873b205ded6..c50a6298ce97 100644
--- a/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
+++ b/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
@@ -5,6 +5,11 @@ import qwertyLayout from "../../../../static/layouts/qwerty.json";
 import qwertzLayout from "../../../../static/layouts/qwertz.json";
 
 import { LayoutObject } from "@monkeytype/schemas/layouts";
+import {
+  Alt,
+  Ctrl,
+  Meta,
+} from "../../../../src/ts/components/pages/test/keymapLayouts";
 
 describe("keymap converter", () => {
   describe("convertLayoutToKeymap", () => {
@@ -130,15 +135,15 @@ describe("keymap converter", () => {
         // Row5: Ctrl, Monke, Alt at start; Alt, Monke, Meta, Ctrl at end
         expect(row5, "row5").toEqual([
           {
-            legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"],
+            legends: [Ctrl, Ctrl, Ctrl, Ctrl],
             width: 1.25,
           },
           {
-            legends: ["Monke", "Monke", "Monke", "Monke"],
+            legends: [Meta, Meta, Meta, Meta],
             width: 1.25,
           },
           {
-            legends: ["Alt", "Alt", "Alt", "Alt"],
+            legends: [Alt, Alt, Alt, Alt],
             width: 1.25,
           },
           {
@@ -148,19 +153,19 @@ describe("keymap converter", () => {
             x: 0,
           },
           {
-            legends: ["Alt", "Alt", "Alt", "Alt"],
+            legends: [Alt, Alt, Alt, Alt],
             width: 1.25,
           },
           {
-            legends: ["Monke", "Monke", "Monke", "Monke"],
+            legends: [Meta, Meta, Meta, Meta],
             width: 1.25,
           },
           {
-            legends: ["Meta", "Meta", "Meta", "Meta"],
+            legends: ["Monke", "Monke", "Monke", "Monke"],
             width: 1.25,
           },
           {
-            legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"],
+            legends: [Ctrl, Ctrl, Ctrl, Ctrl],
             width: 1.25,
           },
         ]);
@@ -297,15 +302,15 @@ describe("keymap converter", () => {
         // Row5: Ctrl, Monke, Alt at start; Alt, Monke, Meta, Ctrl at end
         expect(row5, "row5").toEqual([
           {
-            legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"],
+            legends: [Ctrl, Ctrl, Ctrl, Ctrl],
             width: 1.25,
           },
           {
-            legends: ["Monke", "Monke", "Monke", "Monke"],
+            legends: [Meta, Meta, Meta, Meta],
             width: 1.25,
           },
           {
-            legends: ["Alt", "Alt", "Alt", "Alt"],
+            legends: [Alt, Alt, Alt, Alt],
             width: 1.25,
           },
           {
@@ -315,19 +320,19 @@ describe("keymap converter", () => {
             x: 0,
           },
           {
-            legends: ["Alt", "Alt", "Alt", "Alt"],
+            legends: [Alt, Alt, Alt, Alt],
             width: 1.25,
           },
           {
-            legends: ["Monke", "Monke", "Monke", "Monke"],
+            legends: [Meta, Meta, Meta, Meta],
             width: 1.25,
           },
           {
-            legends: ["Meta", "Meta", "Meta", "Meta"],
+            legends: ["Monke", "Monke", "Monke", "Monke"],
             width: 1.25,
           },
           {
-            legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"],
+            legends: [Ctrl, Ctrl, Ctrl, Ctrl],
             width: 1.25,
           },
         ]);
@@ -608,13 +613,13 @@ describe("keymap converter", () => {
         // Row5: Ctrl, Monke, Alt at start; Alt,  Meta, Ctrl at end
         expect(row5, "row5").toEqual([
           {
-            legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"],
+            legends: [Ctrl, Ctrl, Ctrl, Ctrl],
           },
           {
-            legends: ["Monke", "Monke", "Monke", "Monke"],
+            legends: [Meta, Meta, Meta, Meta],
           },
           {
-            legends: ["Alt", "Alt", "Alt", "Alt"],
+            legends: [Alt, Alt, Alt, Alt],
           },
           {
             isLayoutIndicator: true,
@@ -623,13 +628,13 @@ describe("keymap converter", () => {
             x: 0,
           },
           {
-            legends: ["Alt", "Alt", "Alt", "Alt"],
+            legends: [Alt, Alt, Alt, Alt],
           },
           {
-            legends: ["Meta", "Meta", "Meta", "Meta"],
+            legends: ["Monke", "Monke", "Monke", "Monke"],
           },
           {
-            legends: ["Ctrl", "Ctrl", "Ctrl", "Ctrl"],
+            legends: [Ctrl, Ctrl, Ctrl, Ctrl],
           },
         ]);
         // Also verify total counts are as expected with extra keys
diff --git a/frontend/src/ts/components/pages/test/Keymap.tsx b/frontend/src/ts/components/pages/test/Keymap.tsx
index ead0cb809681..1e7152172a5d 100644
--- a/frontend/src/ts/components/pages/test/Keymap.tsx
+++ b/frontend/src/ts/components/pages/test/Keymap.tsx
@@ -171,7 +171,7 @@ function Key(
     <Anime
       class={cn(
         "relative flex items-center justify-center rounded border-2 border-bg bg-sub-alt",
-        (label() ?? "").length >= 3 && "text-em-xs",
+        (label() ?? "").length >= 2 && "text-em-xs",
       )}
       style={{
         "--keybgcolor": isNext() ? getTheme().main : getTheme().subAlt,
diff --git a/frontend/src/ts/components/pages/test/keymapLayouts.ts b/frontend/src/ts/components/pages/test/keymapLayouts.ts
index e7de55436a75..9485fe45c3b2 100644
--- a/frontend/src/ts/components/pages/test/keymapLayouts.ts
+++ b/frontend/src/ts/components/pages/test/keymapLayouts.ts
@@ -1,7 +1,14 @@
 import { KeymapStyle } from "@monkeytype/schemas/configs";
 import { KeyLegends, LayoutObject } from "@monkeytype/schemas/layouts";
+import { formatForDisplay } from "@tanstack/solid-hotkeys";
 import { OneOf } from "../../../utils/types";
 
+export const Ctrl = formatForDisplay("Mod");
+export const Shift = formatForDisplay("Shift");
+export const Alt = formatForDisplay("Alt");
+export const Hyper = "Monke";
+export const Meta = formatForDisplay("meta");
+
 export type KeyDefinition = {
   legends: KeyLegends;
   /** width in u  */
@@ -36,19 +43,19 @@ type LayoutKey = Omit<KeyDefinition, "legends"> & {
 export type KeymapLayout = LayoutKey[][];
 
 const staggeredBottomRow: LayoutKey[] = [
-  { legend: "Ctrl", width: 1.25, isExtraKey: true },
-  { legend: "Monke", width: 1.25, isExtraKey: true },
-  { legend: "Alt", width: 1.25, isExtraKey: true },
+  { legend: Ctrl, width: 1.25, isExtraKey: true },
+  { legend: Meta, width: 1.25, isExtraKey: true },
+  { legend: Alt, width: 1.25, isExtraKey: true },
   {
     isLayoutIndicator: true,
     width: 6,
     x: 3.5,
     extraKeysOverride: { width: 6.25, x: 0 },
   },
-  { legend: "Alt", width: 1.25, isExtraKey: true },
-  { legend: "Monke", width: 1.25, isExtraKey: true },
-  { legend: "Meta", width: 1.25, isExtraKey: true },
-  { legend: "Ctrl", width: 1.25, isExtraKey: true },
+  { legend: Alt, width: 1.25, isExtraKey: true },
+  { legend: Meta, width: 1.25, isExtraKey: true },
+  { legend: Hyper, width: 1.25, isExtraKey: true },
+  { legend: Ctrl, width: 1.25, isExtraKey: true },
 ];
 
 const staggeredAnsi: KeymapLayout = [
@@ -79,10 +86,10 @@ const staggeredAnsi: KeymapLayout = [
     { legend: "Enter", width: 2.25, isExtraKey: true },
   ]),
   buildRow("row4", [
-    { legend: "Shift", width: 2.25, isExtraKey: true },
+    { legend: Shift, width: 2.25, isExtraKey: true },
     { layoutPosition: { col: 0 }, x: 1.5, extraKeysOverride: { x: 0 } },
     ...addLayoutKeys(9, { start: 1 }),
-    { legend: "Shift", width: 2.75, isExtraKey: true },
+    { legend: Shift, width: 2.75, isExtraKey: true },
   ]),
   staggeredBottomRow,
 ];
@@ -115,10 +122,10 @@ const staggeredIso: KeymapLayout = [
     { layoutPosition: { col: 11 } },
   ]),
   buildRow("row4", [
-    { legend: "Shift", width: 1.25, isExtraKey: true },
+    { legend: Shift, width: 1.25, isExtraKey: true },
     { layoutPosition: { col: 0 }, x: 0.25, extraKeysOverride: { x: 0 } },
     ...addLayoutKeys(10, { start: 1 }),
-    { legend: "Shift", width: 2.75, isExtraKey: true },
+    { legend: Shift, width: 2.75, isExtraKey: true },
   ]),
   staggeredBottomRow,
 ];
@@ -218,18 +225,18 @@ const stenoMatrix: KeymapLayout = [
 ];
 
 const matrixBottomRow: LayoutKey[] = [
-  { legend: "Ctrl", isExtraKey: true },
-  { legend: "Monke", isExtraKey: true },
-  { legend: "Alt", isExtraKey: true },
+  { legend: Ctrl, isExtraKey: true },
+  { legend: Meta, isExtraKey: true },
+  { legend: Alt, isExtraKey: true },
   {
     isLayoutIndicator: true,
     width: 4,
     x: 3,
     extraKeysOverride: { width: 6, x: 0 },
   },
-  { legend: "Alt", isExtraKey: true },
-  { legend: "Meta", isExtraKey: true },
-  { legend: "Ctrl", isExtraKey: true },
+  { legend: Alt, isExtraKey: true },
+  { legend: Hyper, isExtraKey: true },
+  { legend: Ctrl, isExtraKey: true },
 ];
 
 const matrix: KeymapLayout = [
@@ -254,7 +261,7 @@ const matrix: KeymapLayout = [
     { layoutPosition: { col: 10 }, isExtraKey: true },
   ]),
   buildRow("row4", [
-    { legend: "Shift", isExtraKey: true },
+    { legend: Shift, isExtraKey: true },
     ...addLayoutKeys(10),
     { legend: "Enter", isExtraKey: true },
   ]),
@@ -302,6 +309,99 @@ function buildRow(
   });
 }
 
+const aliceBottomRow: LayoutKey[] = [
+  { legend: Ctrl, width: 1.5, isExtraKey: true, x: 1 },
+  { legend: Alt, width: 1.5, isExtraKey: true, rotation: 10, x: 1, y: 0.1 },
+  {
+    legend: " ",
+    width: 3,
+    rotation: 10,
+    y: 0.55,
+    x: 2.3,
+    extraKeysOverride: { x: 0, y: 0.4, width: 2 },
+  },
+  { legend: Meta, width: 1.5, isExtraKey: true, rotation: 10, y: 0.7 },
+  {
+    isLayoutIndicator: true,
+    width: 3,
+    rotation: -10,
+    x: 1.1,
+    y: 0.6,
+    extraKeysOverride: { x: 0.65, y: 0.5, width: 2.75 },
+  },
+  { legend: Alt, width: 1.5, isExtraKey: true, rotation: -10, y: 0.1 },
+  { legend: Ctrl, width: 1.5, isExtraKey: true, x: 2.25 },
+];
+
+const alice: KeymapLayout = [
+  buildRow("row1", [
+    { legend: "Esc", isExtraKey: true, x: 0.4 },
+    { layoutPosition: { col: 0 }, isExtraKey: true, x: 0.15 },
+    { layoutPosition: { col: 1 } },
+    { layoutPosition: { col: 2 }, y: -0.1 },
+    { layoutPosition: { col: 3 }, rotation: 10, y: 0.1 },
+    { layoutPosition: { col: 4 }, rotation: 10, y: 0.3 },
+    { layoutPosition: { col: 5 }, rotation: 10, y: 0.5 },
+    { layoutPosition: { col: 6 }, rotation: 10, y: 0.7 },
+    { layoutPosition: { col: 7 }, rotation: -10, y: 0.6, x: 0.15 },
+    { layoutPosition: { col: 8 }, rotation: -10, y: 0.4 },
+    { layoutPosition: { col: 9 }, rotation: -10, y: 0.2 },
+    { layoutPosition: { col: 10 }, rotation: -10 },
+    { layoutPosition: { col: 11 }, y: -0.1 },
+    { layoutPosition: { col: 12 } },
+    { legend: "Backspace", width: 2, isExtraKey: true },
+  ]),
+  buildRow("row2", [
+    { legend: "PgUp", isExtraKey: true, x: 0.2 },
+    { legend: "Tab", width: 1.5, isExtraKey: true, x: 0.15 },
+    { layoutPosition: { col: 0 }, x: 0.15, extraKeysOverride: { x: 0 } },
+    { layoutPosition: { col: 1 }, rotation: 10 },
+    { layoutPosition: { col: 2 }, rotation: 10, y: 0.2 },
+    { layoutPosition: { col: 3 }, rotation: 10, y: 0.4 },
+    { layoutPosition: { col: 4 }, rotation: 10, y: 0.6 },
+    { layoutPosition: { col: 5 }, rotation: -10, y: 0.7, x: 0.75 },
+    { layoutPosition: { col: 6 }, rotation: -10, y: 0.5 },
+    { layoutPosition: { col: 7 }, rotation: -10, y: 0.3 },
+    { layoutPosition: { col: 8 }, rotation: -10, y: 0.1 },
+    { layoutPosition: { col: 9 }, y: -0.1 },
+    { layoutPosition: { col: 10 } },
+    { layoutPosition: { col: 11 } },
+    { layoutPosition: { col: 12 }, width: 1.5, isExtraKey: true },
+  ]),
+  buildRow("row3", [
+    { legend: "PgDn", isExtraKey: true },
+    { legend: "Caps", width: 1.75, isExtraKey: true, x: 0.15 },
+    { layoutPosition: { col: 0 }, x: 0.3, extraKeysOverride: { x: 0 } },
+    { layoutPosition: { col: 1 }, rotation: 10 },
+    { layoutPosition: { col: 2 }, rotation: 10, y: 0.2 },
+    { layoutPosition: { col: 3 }, rotation: 10, y: 0.4 },
+    { layoutPosition: { col: 4 }, rotation: 10, y: 0.6 },
+    { layoutPosition: { col: 5 }, rotation: -10, y: 0.7, x: 1.15 },
+    { layoutPosition: { col: 6 }, rotation: -10, y: 0.5 },
+    { layoutPosition: { col: 7 }, rotation: -10, y: 0.3 },
+    { layoutPosition: { col: 8 }, rotation: -10, y: 0.1 },
+    { layoutPosition: { col: 9 } },
+    { layoutPosition: { col: 10 } },
+    { legend: "Enter", width: 2.25, isExtraKey: true },
+  ]),
+  buildRow("row4", [
+    { legend: Shift, width: 2.25, isExtraKey: true, x: 1 },
+    { layoutPosition: { col: 0 }, x: 0.45, extraKeysOverride: { x: 0 } },
+    { layoutPosition: { col: 1 }, rotation: 10, y: 0.1 },
+    { layoutPosition: { col: 2 }, rotation: 10, y: 0.3 },
+    { layoutPosition: { col: 3 }, rotation: 10, y: 0.5 },
+    { layoutPosition: { col: 4 }, rotation: 10, y: 0.7 },
+    { layoutPosition: { col: 4 }, rotation: -10, y: 0.7, x: 0.75 },
+    { layoutPosition: { col: 5 }, rotation: -10, y: 0.5 },
+    { layoutPosition: { col: 6 }, rotation: -10, y: 0.3 },
+    { layoutPosition: { col: 7 }, rotation: -10, y: 0.1 },
+    { layoutPosition: { col: 8 } },
+    { layoutPosition: { col: 9 } },
+    { legend: Shift, width: 1.75, isExtraKey: true },
+    { legend: "fn", isExtraKey: true },
+  ]),
+  aliceBottomRow,
+];
 export const keymapLayouts: Partial<
   Record<KeymapStyle, Partial<Record<LayoutObject["type"], KeymapLayout>>>
 > = {
@@ -313,6 +413,8 @@ export const keymapLayouts: Partial<
 
   matrix: { iso: matrix, ansi: matrix },
   split_matrix: { iso: splitMatrix, ansi: splitMatrix },
+
+  alice: { iso: alice, ansi: alice },
 };
 
 function insertGap(gapCol: number, row: LayoutKey[] | undefined): LayoutKey[] {

From cac0e71dfc3d89dd3c27fd39f0b355e7cda2c013 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Mon, 22 Jun 2026 01:23:25 +0200
Subject: [PATCH 45/61] remove structuredClone, we don't modify the layout
 anymore

---
 frontend/src/ts/components/pages/test/keymapConverter.ts | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/frontend/src/ts/components/pages/test/keymapConverter.ts b/frontend/src/ts/components/pages/test/keymapConverter.ts
index 86dbfeeed278..74e0dca094d6 100644
--- a/frontend/src/ts/components/pages/test/keymapConverter.ts
+++ b/frontend/src/ts/components/pages/test/keymapConverter.ts
@@ -14,16 +14,14 @@ type ConvertOptions = {
 };
 
 export function convertLayoutToKeymap(
-  rawLayout: LayoutObject,
+  layout: LayoutObject,
   options: ConvertOptions,
 ): KeyboardDefinition {
-  const layout = structuredClone(rawLayout);
-
-  const keymapLayout = keymapLayouts[options.keymapStyle]?.[rawLayout.type];
+  const keymapLayout = keymapLayouts[options.keymapStyle]?.[layout.type];
 
   if (keymapLayout === undefined) {
     throw new Error(
-      `not supported style ${options.keymapStyle} and layout type ${rawLayout.type}`,
+      `not supported style ${options.keymapStyle} and layout type ${layout.type}`,
     );
   }
 

From e6a4e48ddd7c0028647e95d286f47deda43d5fcc Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Mon, 22 Jun 2026 10:11:23 +0200
Subject: [PATCH 46/61] optimise flashState by using store, extract to states

---
 .../src/ts/components/pages/test/Keymap.tsx   | 42 +++++--------------
 frontend/src/ts/states/test.ts                | 19 ++++++++-
 2 files changed, 29 insertions(+), 32 deletions(-)

diff --git a/frontend/src/ts/components/pages/test/Keymap.tsx b/frontend/src/ts/components/pages/test/Keymap.tsx
index 1e7152172a5d..fdba93472f2f 100644
--- a/frontend/src/ts/components/pages/test/Keymap.tsx
+++ b/frontend/src/ts/components/pages/test/Keymap.tsx
@@ -1,11 +1,12 @@
 import { LayoutObject } from "@monkeytype/schemas/layouts";
-import { createMemo, createSignal, For, Show } from "solid-js";
+import { createMemo, For, Show } from "solid-js";
 
 import { getConfig } from "../../../config/store";
-import { keymapEvent } from "../../../events/keymap";
 import { showCommandLineForConfig } from "../../../states/core";
 import { getModifierState, isCapsLockOn } from "../../../states/modifiers";
 import {
+  FlashEntry,
+  getKeymapFlashState,
   getKeymapHighlightKey,
   getKeymapLayout,
   keymapLayoutObject,
@@ -19,8 +20,6 @@ import { Button } from "../../common/Button";
 import { convertLayoutToKeymap } from "./keymapConverter";
 import { KeyboardDefinition, KeyDefinition } from "./keymapLayouts";
 
-type FlashEntry = { tick: number; correct: boolean };
-
 export function Keymap() {
   return (
     <Show when={keymapLayoutObject()}>
@@ -56,27 +55,6 @@ function Keyboard(props: { displayName: string; layoutData: LayoutObject }) {
     }
   });
 
-  const [flashState, setFlashState] = createSignal<Map<string, FlashEntry>>(
-    new Map(),
-  );
-
-  keymapEvent.useListener((event) => {
-    if (event.mode === "flash") {
-      const key = event.key || " ";
-      const current = flashState();
-      const next = new Map<string, FlashEntry>();
-      const existing = current.get(key);
-      next.set(key, {
-        tick: existing ? existing.tick + 1 : 1,
-        correct: event.correct ?? true,
-      });
-      setFlashState(next);
-    } else {
-      // highlight event — reset flash state
-      setFlashState(new Map());
-    }
-  });
-
   const showFirstRow = createMemo(
     () =>
       (wordsHaveNumbers() && getConfig.keymapMode === "next") ||
@@ -101,7 +79,7 @@ function Keyboard(props: { displayName: string; layoutData: LayoutObject }) {
           keyboardDef={keyboardDef()}
           layer={layer()}
           showFirstRow={showFirstRow()}
-          flashState={flashState}
+          flashState={getKeymapFlashState}
         />
       </Show>
     </div>
@@ -112,7 +90,7 @@ function KeyboardDefinitionRenderer(props: {
   keyboardDef: KeyboardDefinition;
   layer: number;
   showFirstRow: boolean;
-  flashState: () => Map<string, FlashEntry>;
+  flashState: Record<string, FlashEntry>;
 }) {
   return (
     <For each={props.keyboardDef}>
@@ -140,7 +118,7 @@ function Key(
   props: {
     isNumRow: boolean;
     layer: number;
-    flashState: () => Map<string, FlashEntry>;
+    flashState: Record<string, FlashEntry>;
   } & KeyDefinition,
 ) {
   const isSteno = () =>
@@ -155,11 +133,13 @@ function Key(
     return props.legends[layer] ?? "";
   };
 
-  // Read from centralized flash state instead of managing per-key signals.
   // Steno keys never flash.
   const flashInfo = createMemo(() => {
-    if (isSteno()) return { tick: 0, correct: true };
-    const entry = props.flashState().get(label());
+    if (isSteno() || getConfig.keymapMode !== "react") {
+      return { tick: 0, correct: true };
+    }
+
+    const entry = props.flashState[label()];
     return { tick: entry?.tick ?? 0, correct: entry?.correct ?? true };
   });
 
diff --git a/frontend/src/ts/states/test.ts b/frontend/src/ts/states/test.ts
index d2421db7f614..6fa12147bd2f 100644
--- a/frontend/src/ts/states/test.ts
+++ b/frontend/src/ts/states/test.ts
@@ -4,6 +4,7 @@ import {
   createMemo,
   createResource,
 } from "solid-js";
+import { createStore } from "solid-js/store";
 import { Challenge } from "@monkeytype/schemas/challenges";
 import { getConfig } from "../config/store";
 
@@ -88,7 +89,23 @@ const [getKeymapHighlightKey, setKeymapHighlightKey] = createSignal<
 
 export { getKeymapHighlightKey };
 
-keymapEvent.subscribe(({ mode, key }) => {
+export type FlashEntry = { tick: number; correct: boolean };
+
+const [getKeymapFlashState, setKeymapFlashState] = createStore<
+  Record<string, FlashEntry>
+>({});
+
+export { getKeymapFlashState, setKeymapFlashState };
+
+keymapEvent.subscribe(({ mode, key, correct }) => {
   const mappedKey = key === "" ? " " : key;
   setKeymapHighlightKey(mode === "highlight" ? mappedKey : undefined);
+
+  if (mode === "flash" && getConfig.keymapMode === "react") {
+    const existing = getKeymapFlashState[mappedKey];
+    setKeymapFlashState(mappedKey, {
+      tick: existing ? existing.tick + 1 : 1,
+      correct: correct ?? true,
+    });
+  }
 });

From 683f37f03620527d6b57346f5e7531fbf705fe74 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Mon, 22 Jun 2026 10:17:39 +0200
Subject: [PATCH 47/61] useListener

---
 frontend/src/ts/states/test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/ts/states/test.ts b/frontend/src/ts/states/test.ts
index 6fa12147bd2f..34cff363facb 100644
--- a/frontend/src/ts/states/test.ts
+++ b/frontend/src/ts/states/test.ts
@@ -97,7 +97,7 @@ const [getKeymapFlashState, setKeymapFlashState] = createStore<
 
 export { getKeymapFlashState, setKeymapFlashState };
 
-keymapEvent.subscribe(({ mode, key, correct }) => {
+keymapEvent.useListener(({ mode, key, correct }) => {
   const mappedKey = key === "" ? " " : key;
   setKeymapHighlightKey(mode === "highlight" ? mappedKey : undefined);
 

From 2548f0d28c412468918a2a053dd4e272036310c2 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Mon, 22 Jun 2026 11:00:45 +0200
Subject: [PATCH 48/61] layout from single source

---
 .../src/ts/components/pages/test/Keymap.tsx   |  1 -
 frontend/src/ts/input/handlers/keydown.ts     | 19 ++-----
 frontend/src/ts/states/test.ts                | 49 +++++++++++++++----
 frontend/src/ts/test/layout-emulator.ts       | 12 +----
 4 files changed, 47 insertions(+), 34 deletions(-)

diff --git a/frontend/src/ts/components/pages/test/Keymap.tsx b/frontend/src/ts/components/pages/test/Keymap.tsx
index fdba93472f2f..c9668aa5c992 100644
--- a/frontend/src/ts/components/pages/test/Keymap.tsx
+++ b/frontend/src/ts/components/pages/test/Keymap.tsx
@@ -64,7 +64,6 @@ function Keyboard(props: { displayName: string; layoutData: LayoutObject }) {
         props.layoutData.keymapShowTopRow),
   );
 
-  //TODO handle funbox layout_mirror
   const keyboardDef = createMemo(() =>
     convertLayoutToKeymap(props.layoutData, {
       keymapStyle: getConfig.keymapStyle,
diff --git a/frontend/src/ts/input/handlers/keydown.ts b/frontend/src/ts/input/handlers/keydown.ts
index 780e8dd8f997..4c62c7b90424 100644
--- a/frontend/src/ts/input/handlers/keydown.ts
+++ b/frontend/src/ts/input/handlers/keydown.ts
@@ -5,7 +5,6 @@ import { getCharFromEvent } from "../../test/layout-emulator";
 import * as Monkey from "../../test/monkey";
 import { emulateInsertText } from "./insert-text";
 import * as TestState from "../../test/test-state";
-import * as JSONData from "../../utils/json-data";
 import {
   showNoticeNotification,
   showErrorNotification,
@@ -19,12 +18,9 @@ import {
   setCorrectShiftUsed,
   setLastBailoutAttempt,
 } from "../state";
-import {
-  getActiveFunboxesWithFunction,
-  getActiveFunboxNames,
-} from "../../test/funbox/list";
+import { getActiveFunboxesWithFunction } from "../../test/funbox/list";
 import { Keycode } from "../../constants/keys";
-import { wordsHaveTab } from "../../states/test";
+import { __nonReactive, wordsHaveTab } from "../../states/test";
 
 import { getCustomTextIndicator } from "../../states/core";
 import { logTestEvent } from "../../test/events/data";
@@ -83,20 +79,15 @@ export async function handleOppositeShift(event: KeyboardEvent): Promise<void> {
     Config.oppositeShiftMode === "keymap" &&
     Config.keymapLayout !== "overrideSync"
   ) {
-    let keymapLayout = await JSONData.getLayout(Config.keymapLayout).catch(
-      () => undefined,
-    );
+    let keymapLayout = await __nonReactive
+      .getKeymapLayout()
+      .catch(() => undefined);
     if (keymapLayout === undefined) {
       showErrorNotification("Failed to load keymap layout");
 
       return;
     }
 
-    const funbox = getActiveFunboxNames().includes("layout_mirror");
-    if (funbox) {
-      keymapLayout = KeyConverter.mirrorLayoutKeys(keymapLayout);
-    }
-
     const keycode = KeyConverter.layoutKeyToKeycode(event.key, keymapLayout);
 
     setCorrectShiftUsed(
diff --git a/frontend/src/ts/states/test.ts b/frontend/src/ts/states/test.ts
index 34cff363facb..00e6e82dbd51 100644
--- a/frontend/src/ts/states/test.ts
+++ b/frontend/src/ts/states/test.ts
@@ -1,22 +1,25 @@
+import { Challenge } from "@monkeytype/schemas/challenges";
 import {
-  createSignal,
   createEffect,
   createMemo,
   createResource,
+  createSignal,
 } from "solid-js";
 import { createStore } from "solid-js/store";
-import { Challenge } from "@monkeytype/schemas/challenges";
 import { getConfig } from "../config/store";
 
-import { canQuickRestart } from "../utils/quick-restart";
-import { getData as getCustomTextData } from "../test/custom-text";
-import { getActivePage, getCustomTextIndicator } from "./core";
-import { QuoteWithTextSplit } from "../types/quotes";
+import { LayoutObject } from "@monkeytype/schemas/layouts";
 import { CompletedEvent, IncompleteTest } from "@monkeytype/schemas/results";
+import { keymapEvent } from "../events/keymap";
 import { createSignalWithSetters } from "../hooks/createSignalWithSetters";
+import { getData as getCustomTextData } from "../test/custom-text";
+import { QuoteWithTextSplit } from "../types/quotes";
 import { getLayout } from "../utils/json-data";
+import { mirrorLayoutKeys } from "../utils/key-converter";
+import { sleep } from "../utils/misc";
+import { canQuickRestart } from "../utils/quick-restart";
 import { replaceUnderscoresWithSpaces } from "../utils/strings";
-import { keymapEvent } from "../events/keymap";
+import { getActivePage, getCustomTextIndicator } from "./core";
 
 export const [wordsHaveNewline, setWordsHaveNewline] = createSignal(false);
 export const [wordsHaveTab, setWordsHaveTab] = createSignal(false);
@@ -68,19 +71,27 @@ createEffect(() => {
 export const getKeymapLayout = createMemo<{
   layout: string;
   layoutNameDisplayString: string;
+  isMirrored: boolean;
 }>(() => {
   const isOverride = getConfig.keymapLayout === "overrideSync";
   const raw = isOverride ? getConfig.layout : getConfig.keymapLayout;
 
   const layout = raw === "default" ? "qwerty" : raw;
   const layoutNameDisplayString = replaceUnderscoresWithSpaces(raw);
+  const isMirrored = getConfig.funbox.includes("layout_mirror");
 
-  return { layout: layout, layoutNameDisplayString };
+  return { layout: layout, layoutNameDisplayString, isMirrored };
 });
 
 export const [keymapLayoutObject] = createResource(
   getKeymapLayout,
-  async (layout) => await getLayout(layout.layout),
+  async (layout) => {
+    const result = await getLayout(layout.layout);
+    if (layout.isMirrored) {
+      return mirrorLayoutKeys(result);
+    }
+    return result;
+  },
 );
 
 const [getKeymapHighlightKey, setKeymapHighlightKey] = createSignal<
@@ -109,3 +120,23 @@ keymapEvent.useListener(({ mode, key, correct }) => {
     });
   }
 });
+
+async function _getKeymapLayout(): Promise<LayoutObject> {
+  while (
+    keymapLayoutObject.state !== "ready" &&
+    keymapLayoutObject.state !== "errored"
+  ) {
+    await sleep(10);
+  }
+  if (keymapLayoutObject.state === "errored") {
+    throw new Error("Failed to load keymap layout");
+  }
+  return keymapLayoutObject();
+}
+
+/**
+ * Used for non reactive access. Do not use in Solid components.
+ */
+export const __nonReactive = {
+  getKeymapLayout: _getKeymapLayout,
+};
diff --git a/frontend/src/ts/test/layout-emulator.ts b/frontend/src/ts/test/layout-emulator.ts
index 088398f261a0..6fadb61d5602 100644
--- a/frontend/src/ts/test/layout-emulator.ts
+++ b/frontend/src/ts/test/layout-emulator.ts
@@ -1,10 +1,7 @@
-import { Config } from "../config/store";
-import * as JSONData from "../utils/json-data";
 import { isCapsLockOn } from "@leonabcd123/modern-caps-lock";
 import { showErrorNotification } from "../states/notifications";
-import * as KeyConverter from "../utils/key-converter";
 
-import { getActiveFunboxNames } from "./funbox/list";
+import { __nonReactive } from "../states/test";
 
 let isAltGrPressed = false;
 const isPunctuationPattern = /\p{P}/u;
@@ -34,17 +31,12 @@ export async function getCharFromEvent(
 
   let layout;
   try {
-    layout = await JSONData.getLayout(Config.layout);
+    layout = await __nonReactive.getKeymapLayout();
   } catch (e) {
     showErrorNotification("Failed to emulate event", { error: e });
     return null;
   }
 
-  const funbox = getActiveFunboxNames().includes("layout_mirror");
-  if (funbox) {
-    layout = KeyConverter.mirrorLayoutKeys(layout);
-  }
-
   let keyEventCodes: string[] = [];
 
   if (layout.type === "ansi") {

From d8b17625f3c2054f9f195a5c31ab5cb74a22a894 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Mon, 22 Jun 2026 11:17:26 +0200
Subject: [PATCH 49/61] remove leftover from alt/shift tracker

---
 .../src/ts/components/pages/test/Keymap.tsx   |  7 +++--
 .../src/ts/controllers/sound-controller.ts    |  6 ++--
 frontend/src/ts/elements/keymap.ts            |  5 ++-
 frontend/src/ts/states/modifiers.ts           | 19 +++++++++---
 frontend/src/ts/test/alt-tracker.ts           | 23 --------------
 frontend/src/ts/test/shift-tracker.ts         | 31 +++----------------
 frontend/src/ts/test/test-logic.ts            |  6 ++--
 7 files changed, 29 insertions(+), 68 deletions(-)
 delete mode 100644 frontend/src/ts/test/alt-tracker.ts

diff --git a/frontend/src/ts/components/pages/test/Keymap.tsx b/frontend/src/ts/components/pages/test/Keymap.tsx
index c9668aa5c992..9fd496339abb 100644
--- a/frontend/src/ts/components/pages/test/Keymap.tsx
+++ b/frontend/src/ts/components/pages/test/Keymap.tsx
@@ -33,6 +33,7 @@ export function Keymap() {
 
 function Keyboard(props: { displayName: string; layoutData: LayoutObject }) {
   const layer = createMemo(() => {
+    const { alt, shift } = getModifierState();
     switch (getConfig.keymapLegendStyle) {
       case "blank":
         return -1;
@@ -41,11 +42,11 @@ function Keyboard(props: { displayName: string; layoutData: LayoutObject }) {
       case "uppercase":
         return 1;
       case "dynamic": {
-        if (getModifierState().shift && getModifierState().altGr) {
+        if (shift && alt) {
           return 3;
-        } else if (getModifierState().altGr) {
+        } else if (alt) {
           return 2;
-        } else if (getModifierState().shift || isCapsLockOn()) {
+        } else if (shift || isCapsLockOn()) {
           return 1;
         }
         return 0;
diff --git a/frontend/src/ts/controllers/sound-controller.ts b/frontend/src/ts/controllers/sound-controller.ts
index 48c3d7536ac7..fd4da3a0cb56 100644
--- a/frontend/src/ts/controllers/sound-controller.ts
+++ b/frontend/src/ts/controllers/sound-controller.ts
@@ -1,7 +1,6 @@
 import { Config } from "../config/store";
 import { configEvent } from "../events/config";
 import { randomElementFromArray } from "../utils/arrays";
-import { leftState, rightState } from "../test/shift-tracker";
 import { isCapsLockOn } from "@leonabcd123/modern-caps-lock";
 import { showErrorNotification } from "../states/notifications";
 
@@ -18,6 +17,7 @@ import {
   SupportedOscillatorTypes,
   ValidNotes,
 } from "../constants/sounds";
+import { getModifierState } from "../states/modifiers";
 
 let howlerModulePromise: Promise<typeof import("howler")> | null = null;
 async function getHowlerModule(): Promise<typeof import("howler")> {
@@ -335,8 +335,8 @@ function playNote(options: {
   }
 
   const baseOctave = 3;
-  const octave =
-    baseOctave + (leftState || rightState || isCapsLockOn() ? 1 : 0);
+  const { shift } = getModifierState();
+  const octave = baseOctave + (shift || isCapsLockOn() ? 1 : 0);
   const currentFrequency = codeToNote[currentCode]?.(octave);
 
   const oscillatorNode = audioCtx.createOscillator();
diff --git a/frontend/src/ts/elements/keymap.ts b/frontend/src/ts/elements/keymap.ts
index 35150ef60ab1..83baaf868686 100644
--- a/frontend/src/ts/elements/keymap.ts
+++ b/frontend/src/ts/elements/keymap.ts
@@ -8,7 +8,6 @@ import { showErrorNotification } from "../states/notifications";
 import { getActivePage } from "../states/core";
 import { onCapsLockChange, isCapsLockOn } from "@leonabcd123/modern-caps-lock";
 import * as ShiftTracker from "../test/shift-tracker";
-import * as AltTracker from "../test/alt-tracker";
 import * as KeyConverter from "../utils/key-converter";
 import { getActiveFunboxNames } from "../test/funbox/list";
 import { areSortedArraysEqual } from "../utils/arrays";
@@ -20,6 +19,7 @@ import { getTheme } from "../states/theme";
 
 import { createEffectOn } from "../hooks/effects";
 import { wordsHaveNumbers } from "../states/test";
+import { getModifierState } from "../states/modifiers";
 
 export const keyDataDelimiter = "\uE000";
 const keymap = qsr("#keymap");
@@ -502,8 +502,7 @@ function getLegendStates(): KeymapLegendStates | undefined {
   // pressed, but not both at once.
   // MacOS instead capitalizes when either or both are pressed,
   // so we have to check for that.
-  const shiftState = ShiftTracker.leftState || ShiftTracker.rightState;
-  const altState = AltTracker.leftState || AltTracker.rightState;
+  const { shift: shiftState, alt: altState } = getModifierState();
   const capsState = isCapsLockOn();
 
   const osDependentLettersState = isMacLike
diff --git a/frontend/src/ts/states/modifiers.ts b/frontend/src/ts/states/modifiers.ts
index 66215de03cf5..734829daec03 100644
--- a/frontend/src/ts/states/modifiers.ts
+++ b/frontend/src/ts/states/modifiers.ts
@@ -9,7 +9,7 @@ import { getActivePage } from "./core";
 
 type ModifierState = {
   shift: boolean;
-  altGr: boolean;
+  alt: boolean;
   leftShift: boolean;
   rightShift: boolean;
 };
@@ -17,18 +17,27 @@ type ModifierState = {
 export const [getModifierState, { updateModifierState }] =
   createSignalWithSetters<ModifierState>({
     shift: false,
-    altGr: false,
+    alt: false,
     leftShift: false,
     rightShift: false,
   })({
-    updateModifierState: (set, val: Partial<Omit<ModifierState, "shift">>) =>
+    updateModifierState: (set, val: Partial<ModifierState>) =>
       set((prev) => ({
         ...prev,
         ...val,
-        shift: val.leftShift ?? val.rightShift ?? prev.shift,
+        shift: val.shift ?? val.leftShift ?? val.rightShift ?? prev.shift,
       })),
   });
 
+export function resetModifierState(): void {
+  updateModifierState({
+    shift: false,
+    alt: false,
+    leftShift: false,
+    rightShift: false,
+  });
+}
+
 const [isCapsLockOn, setCapsLockOn] = createSignal<boolean>(checkCapsLockOn());
 export { isCapsLockOn };
 
@@ -63,6 +72,6 @@ function handleModifierState(e: KeyboardEvent, updateValue: boolean): void {
   if (e.code === "ShiftLeft") updateModifierState({ leftShift: updateValue });
   if (e.code === "ShiftRight") updateModifierState({ rightShift: updateValue });
   if (e.code === "AltRight" || e.code === "AltLeft") {
-    updateModifierState({ altGr: updateValue });
+    updateModifierState({ alt: updateValue });
   }
 }
diff --git a/frontend/src/ts/test/alt-tracker.ts b/frontend/src/ts/test/alt-tracker.ts
deleted file mode 100644
index fa13933921e8..000000000000
--- a/frontend/src/ts/test/alt-tracker.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-export let leftState = false;
-export let rightState = false;
-
-document.addEventListener("keydown", (e: KeyboardEvent) => {
-  if (e.code === "AltLeft") {
-    leftState = true;
-  } else if (e.code === "AltRight") {
-    rightState = true;
-  }
-});
-
-document.addEventListener("keyup", (e: KeyboardEvent) => {
-  if (e.code === "AltLeft") {
-    leftState = false;
-  } else if (e.code === "AltRight") {
-    rightState = false;
-  }
-});
-
-export function reset(): void {
-  leftState = false;
-  rightState = false;
-}
diff --git a/frontend/src/ts/test/shift-tracker.ts b/frontend/src/ts/test/shift-tracker.ts
index cb803bf0532a..6022e356ce08 100644
--- a/frontend/src/ts/test/shift-tracker.ts
+++ b/frontend/src/ts/test/shift-tracker.ts
@@ -1,34 +1,11 @@
 import { Config } from "../config/store";
 import { Keycode } from "../constants/keys";
+import { getModifierState } from "../states/modifiers";
 import * as KeyConverter from "../utils/key-converter";
 
-export let leftState = false;
-export let rightState = false;
-
-document.addEventListener("keydown", (e: KeyboardEvent) => {
-  if (e.code === "ShiftLeft") {
-    leftState = true;
-    rightState = false;
-  } else if (e.code === "ShiftRight") {
-    leftState = false;
-    rightState = true;
-  }
-});
-
-document.addEventListener("keyup", (e: KeyboardEvent) => {
-  if (e.code === "ShiftLeft" || e.code === "ShiftRight") {
-    leftState = false;
-    rightState = false;
-  }
-});
-
-export function reset(): void {
-  leftState = false;
-  rightState = false;
-}
-
 export function isUsingOppositeShift(keycode: Keycode): boolean {
-  if (!leftState && !rightState) {
+  const { leftShift, rightShift } = getModifierState();
+  if (!leftShift && !rightShift) {
     return true;
   }
 
@@ -41,7 +18,7 @@ export function isUsingOppositeShift(keycode: Keycode): boolean {
     return true;
   }
 
-  if ((leftState && rightSide) || (rightState && leftSide)) {
+  if ((leftShift && rightSide) || (rightShift && leftSide)) {
     return true;
   }
 
diff --git a/frontend/src/ts/test/test-logic.ts b/frontend/src/ts/test/test-logic.ts
index 778df2ed89e2..c58585f8d5d9 100644
--- a/frontend/src/ts/test/test-logic.ts
+++ b/frontend/src/ts/test/test-logic.ts
@@ -13,8 +13,6 @@ import {
 import * as CustomText from "./custom-text";
 import * as TestStats from "./test-stats";
 import * as PractiseWords from "./practise-words";
-import * as ShiftTracker from "./shift-tracker";
-import * as AltTracker from "./alt-tracker";
 import * as Funbox from "./funbox/funbox";
 import * as PaceCaret from "./pace-caret";
 import * as Caret from "./caret";
@@ -126,6 +124,7 @@ import {
 import { calculateWpm } from "../utils/numbers";
 import { isDevEnvironment } from "../utils/env";
 import { EventLog } from "./events/types";
+import { resetModifierState } from "../states/modifiers";
 
 let failReason = "";
 
@@ -346,8 +345,7 @@ export function restart(options = {} as RestartOptions): void {
   TestStats.restart();
   TestInput.restart();
   TestInput.corrected.reset();
-  ShiftTracker.reset();
-  AltTracker.reset();
+  resetModifierState();
   Caret.hide();
   TestState.setActive(false);
   Replay.stopReplayRecording();

From 1045372bdd152c22ada9793a318fc350b148c347 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Mon, 22 Jun 2026 11:40:36 +0200
Subject: [PATCH 50/61] showw all case if extra keys are needed, swedish
 use-case

---
 frontend/src/ts/components/pages/test/Keymap.tsx       | 4 +++-
 frontend/src/ts/components/pages/test/keymapLayouts.ts | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/src/ts/components/pages/test/Keymap.tsx b/frontend/src/ts/components/pages/test/Keymap.tsx
index 9fd496339abb..800a60d6c701 100644
--- a/frontend/src/ts/components/pages/test/Keymap.tsx
+++ b/frontend/src/ts/components/pages/test/Keymap.tsx
@@ -68,7 +68,9 @@ function Keyboard(props: { displayName: string; layoutData: LayoutObject }) {
   const keyboardDef = createMemo(() =>
     convertLayoutToKeymap(props.layoutData, {
       keymapStyle: getConfig.keymapStyle,
-      showAllKeys: getConfig.keymapLayoutStyle === "full",
+      showAllKeys:
+        getConfig.keymapLayoutStyle === "full" ||
+        props.layoutData.matrixShowRightColumn === true,
     }),
   );
 
diff --git a/frontend/src/ts/components/pages/test/keymapLayouts.ts b/frontend/src/ts/components/pages/test/keymapLayouts.ts
index 9485fe45c3b2..195378bce09b 100644
--- a/frontend/src/ts/components/pages/test/keymapLayouts.ts
+++ b/frontend/src/ts/components/pages/test/keymapLayouts.ts
@@ -248,7 +248,7 @@ const matrix: KeymapLayout = [
   buildRow("row2", [
     { legend: "Tab", isExtraKey: true },
     ...addLayoutKeys(10),
-    { legend: "Del", isExtraKey: true },
+    { layoutPosition: { col: 10 }, isExtraKey: true },
   ]),
   buildRow("row3", [
     { legend: "Esc", isExtraKey: true },

From b6b626df0b7a44d773e2a12f6b140719c967fa6e Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Mon, 22 Jun 2026 12:12:10 +0200
Subject: [PATCH 51/61] optimize react

---
 .../src/ts/components/pages/test/Keymap.tsx   | 42 +++++++++----------
 frontend/src/ts/states/test.ts                |  2 +-
 2 files changed, 20 insertions(+), 24 deletions(-)

diff --git a/frontend/src/ts/components/pages/test/Keymap.tsx b/frontend/src/ts/components/pages/test/Keymap.tsx
index 800a60d6c701..721348357d05 100644
--- a/frontend/src/ts/components/pages/test/Keymap.tsx
+++ b/frontend/src/ts/components/pages/test/Keymap.tsx
@@ -10,6 +10,7 @@ import {
   getKeymapHighlightKey,
   getKeymapLayout,
   keymapLayoutObject,
+  setKeymapFlashState,
   wordsHaveNumbers,
 } from "../../../states/test";
 import { getTheme } from "../../../states/theme";
@@ -92,7 +93,7 @@ function KeyboardDefinitionRenderer(props: {
   keyboardDef: KeyboardDefinition;
   layer: number;
   showFirstRow: boolean;
-  flashState: Record<string, FlashEntry>;
+  flashState: Record<string, FlashEntry | undefined>;
 }) {
   return (
     <For each={props.keyboardDef}>
@@ -100,14 +101,17 @@ function KeyboardDefinitionRenderer(props: {
         <Show when={rowNum() !== 0 || props.showFirstRow}>
           <div class="flex h-8 flex-row">
             <For each={keys}>
-              {(key) => (
-                <Key
-                  {...key}
-                  isNumRow={rowNum() === 0}
-                  layer={props.layer}
-                  flashState={props.flashState}
-                />
-              )}
+              {(key) => {
+                const label = () => {
+                  const layer =
+                    rowNum() === 0 && isMacLike() && isCapsLockOn()
+                      ? props.layer - 1
+                      : props.layer;
+                  return key.legends[layer] ?? "";
+                };
+                const flashEntry = () => props.flashState[label()];
+                return <Key {...key} label={label()} flashEntry={flashEntry} />;
+              }}
             </For>
           </div>
         </Show>
@@ -118,30 +122,21 @@ function KeyboardDefinitionRenderer(props: {
 
 function Key(
   props: {
-    isNumRow: boolean;
-    layer: number;
-    flashState: Record<string, FlashEntry>;
+    label: string;
+    flashEntry: () => FlashEntry | undefined;
   } & KeyDefinition,
 ) {
   const isSteno = () =>
     getConfig.keymapStyle === "steno" ||
     getConfig.keymapStyle === "steno_matrix";
 
-  const label = () => {
-    const layer =
-      props.isNumRow && isMacLike() && isCapsLockOn()
-        ? props.layer - 1
-        : props.layer;
-    return props.legends[layer] ?? "";
-  };
-
   // Steno keys never flash.
   const flashInfo = createMemo(() => {
     if (isSteno() || getConfig.keymapMode !== "react") {
       return { tick: 0, correct: true };
     }
 
-    const entry = props.flashState[label()];
+    const entry = props.flashEntry();
     return { tick: entry?.tick ?? 0, correct: entry?.correct ?? true };
   });
 
@@ -153,7 +148,7 @@ function Key(
     <Anime
       class={cn(
         "relative flex items-center justify-center rounded border-2 border-bg bg-sub-alt",
-        (label() ?? "").length >= 2 && "text-em-xs",
+        (props.label ?? "").length >= 2 && "text-em-xs",
       )}
       style={{
         "--keybgcolor": isNext() ? getTheme().main : getTheme().subAlt,
@@ -180,13 +175,14 @@ function Key(
             ? [isNext() ? getTheme().bg : getTheme().sub]
             : [getTheme().bg, isNext() ? getTheme().bg : getTheme().sub],
         duration: isNext() ? 0 : 250,
+        onComplete: () => setKeymapFlashState(props.label, undefined),
       }}
     >
       <Show
         when={props.isLayoutIndicator}
         fallback={
           <>
-            {label()}
+            {props.label}
             <Show when={props.isHoming}>
               <div
                 class={cn(
diff --git a/frontend/src/ts/states/test.ts b/frontend/src/ts/states/test.ts
index 00e6e82dbd51..7c27526627ca 100644
--- a/frontend/src/ts/states/test.ts
+++ b/frontend/src/ts/states/test.ts
@@ -103,7 +103,7 @@ export { getKeymapHighlightKey };
 export type FlashEntry = { tick: number; correct: boolean };
 
 const [getKeymapFlashState, setKeymapFlashState] = createStore<
-  Record<string, FlashEntry>
+  Record<string, FlashEntry | undefined>
 >({});
 
 export { getKeymapFlashState, setKeymapFlashState };

From 7fc79447a47170b97da5bb9cd755296ef4e0a753 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Mon, 22 Jun 2026 12:25:02 +0200
Subject: [PATCH 52/61] center keymap, apply zoom

---
 frontend/src/ts/components/pages/test/Keymap.tsx       | 8 +++++++-
 frontend/src/ts/components/pages/test/keymapLayouts.ts | 2 +-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/frontend/src/ts/components/pages/test/Keymap.tsx b/frontend/src/ts/components/pages/test/Keymap.tsx
index 721348357d05..cb671b730b87 100644
--- a/frontend/src/ts/components/pages/test/Keymap.tsx
+++ b/frontend/src/ts/components/pages/test/Keymap.tsx
@@ -76,7 +76,13 @@ function Keyboard(props: { displayName: string; layoutData: LayoutObject }) {
   );
 
   return (
-    <div data-ui-element="keymap" class="flex flex-col text-sm text-sub">
+    <div
+      data-ui-element="keymap"
+      class="flex w-full flex-col items-center py-8 text-sm text-sub debug"
+      style={{
+        zoom: getConfig.keymapSize,
+      }}
+    >
       <Show when={keyboardDef()} fallback={<div>Loading...</div>}>
         <KeyboardDefinitionRenderer
           keyboardDef={keyboardDef()}
diff --git a/frontend/src/ts/components/pages/test/keymapLayouts.ts b/frontend/src/ts/components/pages/test/keymapLayouts.ts
index 195378bce09b..943b7f01c171 100644
--- a/frontend/src/ts/components/pages/test/keymapLayouts.ts
+++ b/frontend/src/ts/components/pages/test/keymapLayouts.ts
@@ -138,7 +138,7 @@ const splitBottomRow: LayoutKey[] = [
     x: 3.5,
     extraKeysOverride: { x: 0 },
   },
-  { legend: " ", width: 3, x: 1 },
+  { legend: " ", width: 3, x: 1, extraKeysOverride: { x: 1.25 } },
   ...staggeredBottomRow.slice(4),
 ];
 

From 573b1b446a9f6882a3f0eb500b4ebf1cd87f6975 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Mon, 22 Jun 2026 12:53:51 +0200
Subject: [PATCH 53/61] out with the old, test fix

---
 .../pages/test/keymapConverter.spec.ts        |   6 +-
 frontend/src/html/pages/test.html             |   2 -
 frontend/src/styles/index.scss                |   4 +-
 frontend/src/styles/keymap.scss               | 546 --------------
 frontend/src/styles/media-queries-brown.scss  |  11 -
 frontend/src/styles/media-queries-purple.scss |  10 -
 .../src/ts/components/pages/test/Keymap.tsx   |   2 +-
 frontend/src/ts/elements/keymap.ts            | 710 ------------------
 frontend/src/ts/event-handlers/keymap.ts      |   8 -
 frontend/src/ts/index.ts                      |   1 -
 frontend/src/ts/pages/test.ts                 |   2 -
 frontend/src/ts/test/test-ui.ts               |   2 -
 frontend/static/funbox/crt.css                |  15 +-
 13 files changed, 10 insertions(+), 1309 deletions(-)
 delete mode 100644 frontend/src/styles/keymap.scss
 delete mode 100644 frontend/src/ts/elements/keymap.ts
 delete mode 100644 frontend/src/ts/event-handlers/keymap.ts

diff --git a/frontend/__tests__/components/pages/test/keymapConverter.spec.ts b/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
index c50a6298ce97..0085259d9f1e 100644
--- a/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
+++ b/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
@@ -414,7 +414,7 @@ describe("keymap converter", () => {
         expect(row5?.[4], "row5 right shift").toEqual({
           legends: [" ", " ", " ", " "],
           width: 3,
-          x: 1,
+          x: 1.25,
         });
       });
 
@@ -485,7 +485,7 @@ describe("keymap converter", () => {
         expect(row5?.[4], "row5 right shift").toEqual({
           legends: [" ", " ", " ", " "],
           width: 3,
-          x: 1,
+          x: 1.25,
         });
       });
     });
@@ -589,7 +589,7 @@ describe("keymap converter", () => {
 
         // Row2: Del added at end
         expect(row2?.[row2.length - 1], "row2 last").toEqual({
-          legends: ["Del", "Del", "Del", "Del"],
+          legends: ["[", "{", "[", "{"],
         });
 
         // Row3: Esc added at start
diff --git a/frontend/src/html/pages/test.html b/frontend/src/html/pages/test.html
index 2e990ee3e70a..55ea01f92bc1 100644
--- a/frontend/src/html/pages/test.html
+++ b/frontend/src/html/pages/test.html
@@ -64,9 +64,7 @@
     </div>
 
     <div id="compositionDisplay"></div>
-
     <mount data-component="keymap"></mount>
-    <div id="keymap" class="hidden"></div>
 
     <button
       id="restartTestButton"
diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss
index 1b1dc6632a16..fb1d10a1859f 100644
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@@ -17,8 +17,8 @@
 
 @layer custom-styles {
   @import "buttons", "ads", "test-activity", "animations", "caret",
-    "commandline", "core", "fonts", "inputs", "keymap", "monkey", "popups",
-    "scroll", "account-settings", "test", "loading", "media-queries";
+    "commandline", "core", "fonts", "inputs", "monkey", "popups", "scroll",
+    "account-settings", "test", "loading", "media-queries";
 
   .chartCanvas {
     width: 100% !important;
diff --git a/frontend/src/styles/keymap.scss b/frontend/src/styles/keymap.scss
deleted file mode 100644
index 30ce0988f5b4..000000000000
--- a/frontend/src/styles/keymap.scss
+++ /dev/null
@@ -1,546 +0,0 @@
-#keymap {
-  font-size: 1rem;
-  display: grid;
-  grid-template-rows: 1fr 1fr 1fr;
-  justify-content: center;
-  white-space: nowrap;
-  // height: 140px;
-  gap: 0.25rem;
-  margin-top: 1rem;
-  user-select: none;
-
-  .row {
-    height: 2rem;
-    gap: 0.25rem;
-  }
-
-  .keymapKey {
-    display: flex;
-    background-color: var(--sub-alt-color);
-    color: var(--sub-color);
-    border-radius: var(--roundness);
-    // border: 0.05rem solid;
-    // border-color: var(--sub-color);
-    text-align: center;
-    justify-content: center;
-    align-items: center;
-    width: 2rem;
-    height: 2rem;
-    position: relative;
-
-    .bump {
-      width: 0.5em;
-      height: 0.1em;
-      background: var(--bg-color);
-      position: absolute;
-      border-radius: 0.1em;
-      // margin-top: 1.5rem;
-      bottom: 0.2em;
-    }
-
-    &.activeKey {
-      color: var(--bg-color);
-      background-color: var(--main-color);
-      border-color: var(--main-color);
-
-      .bump {
-        background: var(--bg-color);
-      }
-    }
-
-    &.layoutIndicator {
-      width: 100%;
-      &:hover {
-        cursor: pointer;
-        color: var(--main-color);
-      }
-    }
-
-    &.keySpace.right {
-      width: 100%;
-      opacity: 0;
-    }
-
-    &.flash {
-      animation: flashKey 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
-    }
-  }
-
-  .hiddenKey,
-  .hideKey {
-    opacity: 0;
-  }
-
-  .keymapSplitSpacer,
-  .keymapStaggerSplitSpacer,
-  .keymapMatrixSplitSpacer {
-    display: none;
-  }
-
-  .r1 {
-    display: grid;
-    grid-template-columns: 0fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
-  }
-
-  .r2 {
-    display: grid;
-    grid-template-columns: 0.5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1rem;
-  }
-
-  .r3 {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
-  }
-
-  .r4 {
-    display: grid;
-    grid-template-columns: 0.5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 2.75fr;
-  }
-
-  .r5 {
-    display: grid;
-    grid-template-columns: 3.5fr 6fr 3.5fr;
-    font-size: 1rem;
-    // &.matrixSpace {
-    //   // grid-template-columns: 6.75fr 1.9fr 6.75fr;
-    //   grid-template-columns: 6.9fr 4.6fr 6.9fr; // wider spacebar
-    // }
-    // &.splitSpace {
-    //   // grid-template-columns: 6.75fr 1.9fr 6.75fr;
-    //   grid-template-columns: 4fr 7.5fr 4fr;
-    // }
-    .keySpace {
-      // since we can potentially have alphas in r5,
-      // we keep font-size: 1rem; for alphas to look the same as other rows,
-      // but reduce it again to 0.5rem for space, so layout name fits.
-      font-size: 0.5rem;
-    }
-
-    &[data-row5-has-alpha="true"] {
-      // space-alpha
-      &[data-row5-grid="3-1"] {
-        grid-template-columns: 4fr 4fr 1fr 4fr;
-      }
-
-      // alpha-space
-      &[data-row5-grid="1-3"] {
-        grid-template-columns: 4fr 1fr 4fr 4fr;
-      }
-    }
-  }
-  &.matrix {
-    .r1,
-    .r2,
-    .r3,
-    .r4 {
-      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
-    }
-
-    .r5 {
-      grid-template-columns: 1fr 3fr 4fr 3fr 1fr;
-
-      &[data-row5-has-alpha="true"] {
-        // space-alpha
-        &[data-row5-grid="3-1"] {
-          grid-template-columns: 1fr 2fr 3fr 1fr 5fr;
-        }
-
-        // alpha-space
-        &[data-row5-grid="1-3"] {
-          grid-template-columns: 2fr 3fr 1fr 3fr 3fr;
-        }
-      }
-    }
-  }
-  &.split {
-    .keymapSplitSpacer {
-      display: block;
-    }
-    .keymapStaggerSplitSpacer {
-      display: block;
-    }
-
-    .r1 {
-      display: grid;
-      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1.5fr;
-    }
-
-    .r2 {
-      display: grid;
-      grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
-    }
-
-    .r3 {
-      display: grid;
-      grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1.5fr;
-    }
-
-    .r4 {
-      display: grid;
-      grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 2fr;
-    }
-    .r5 {
-      grid-template-columns: 5fr 3fr 1fr 3fr 4.5fr;
-
-      &[data-row5-has-alpha="true"] {
-        // space-alpha
-        &[data-row5-grid="3-1"] {
-          grid-template-columns: 5fr 3fr 1fr 1fr 6.5fr;
-        }
-
-        // alpha-space
-        &[data-row5-grid="1-3"] {
-          grid-template-columns: 7fr 1fr 1fr 3fr 4.5fr;
-        }
-      }
-    }
-    .keySpace.right {
-      opacity: 1;
-    }
-  }
-  &.split_matrix {
-    .keymapSplitSpacer {
-      display: block;
-      width: 2rem;
-      height: 2rem;
-    }
-    .keymapStaggerSplitSpacer {
-      display: none;
-    }
-    .keymapMatrixSplitSpacer {
-      display: block;
-      width: 2rem;
-      height: 2rem;
-    }
-    .r1,
-    .r2,
-    .r3,
-    .r4 {
-      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
-    }
-
-    .r5 {
-      grid-template-columns: 1fr 2fr 3fr 1fr 3fr 2fr 1fr;
-
-      &[data-row5-has-alpha="true"] {
-        // space-alpha
-        &[data-row5-grid="3-1"] {
-          grid-template-columns: 2fr 1fr 3fr 1fr 1fr 2fr 3fr;
-        }
-
-        // alpha-space
-        &[data-row5-grid="1-3"] {
-          grid-template-columns: 4fr 1fr 1fr 1fr 3fr 1fr 2fr;
-        }
-      }
-    }
-    .keySpace.right {
-      opacity: 1;
-    }
-  }
-  &.steno,
-  &.steno_matrix {
-    .r2,
-    .r3 {
-      display: grid;
-      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
-    }
-    .r4 {
-      display: grid;
-      grid-template-columns: 3.25fr 1fr 1fr 1fr 1fr 1fr 3.25fr;
-    }
-    &.steno {
-      .r2,
-      .r3 {
-        display: grid;
-        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
-      }
-      .r4 {
-        display: grid;
-        grid-template-columns: 2.6fr 1fr 1fr 0.1fr 1fr 1fr 3.65fr;
-        .keymapSplitSpacer {
-          display: block;
-        }
-      }
-      .r2 .keymapKey:nth-child(1),
-      .r2 .keymapKey:nth-child(5) {
-        height: 4.25rem;
-      }
-      .r3 .keymapKey:nth-child(1),
-      .r3 .keymapKey:nth-child(5) {
-        visibility: hidden;
-      }
-    }
-    &.steno_matrix {
-      .keymapSplitSpacer {
-        display: block;
-      }
-    }
-  }
-  &.alice {
-    .keymapSplitSpacer {
-      display: block;
-    }
-    .r4 .keymapSplitSpacer {
-      display: none;
-    }
-    .keymapStaggerSplitSpacer {
-      display: block;
-    }
-
-    .r1 {
-      display: grid;
-      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1.5fr;
-      .keymapKey:nth-child(2) {
-        //1
-        margin-left: 45%;
-      }
-      .keymapKey:nth-child(3) {
-        //2
-        margin-top: -2px;
-        margin-left: 45%;
-      }
-      .keymapKey:nth-child(4),
-      .keymapKey:nth-child(5),
-      .keymapKey:nth-child(6),
-      .keymapKey:nth-child(7) {
-        //3456
-        transform: rotate(10deg);
-        margin-left: 45%;
-      }
-      .keymapKey:nth-child(4) {
-        //3
-        margin-top: 3px;
-      }
-      .keymapKey:nth-child(5) {
-        //4
-        margin-top: 10px;
-      }
-      .keymapKey:nth-child(6) {
-        //5
-        margin-top: 17px;
-      }
-      .keymapKey:nth-child(7) {
-        //6
-        margin-top: 24px;
-      }
-      .keymapKey:nth-child(9),
-      .keymapKey:nth-child(10),
-      .keymapKey:nth-child(11),
-      .keymapKey:nth-child(12) {
-        //7890
-        transform: rotate(-10deg);
-        margin-left: -48%;
-      }
-      .keymapKey:nth-child(12) {
-        //7
-        margin-top: -1px;
-      }
-      .keymapKey:nth-child(11) {
-        //8
-        margin-top: 6px;
-      }
-      .keymapKey:nth-child(10) {
-        //9
-        margin-top: 13px;
-      }
-      .keymapKey:nth-child(9) {
-        //10
-        margin-top: 20px;
-      }
-      .keymapKey:nth-child(13),
-      .keymapKey:nth-child(14) {
-        //-=
-        margin-left: -40%;
-      }
-    }
-
-    .r2 {
-      display: grid;
-      grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
-      .keymapKey:nth-child(2) {
-        //Q
-        margin-left: 20%;
-      }
-      .keymapKey:nth-child(3),
-      .keymapKey:nth-child(4),
-      .keymapKey:nth-child(5),
-      .keymapKey:nth-child(6) {
-        //WERT
-        transform: rotate(10deg);
-        margin-left: 45%;
-      }
-      .keymapKey:nth-child(4),
-      .keymapKey:nth-child(10) {
-        //EI
-        margin-top: 8px;
-      }
-      .keymapKey:nth-child(5),
-      .keymapKey:nth-child(9) {
-        //RU
-        margin-top: 15px;
-      }
-      .keymapKey:nth-child(6),
-      .keymapKey:nth-child(8) {
-        //TY
-        margin-top: 22px;
-      }
-
-      .keymapKey:nth-child(8),
-      .keymapKey:nth-child(9),
-      .keymapKey:nth-child(10),
-      .keymapKey:nth-child(11) {
-        //YUIO
-        transform: rotate(-10deg);
-        margin-left: -12%;
-      }
-    }
-
-    .r3 {
-      display: grid;
-      grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1.5fr;
-      .keymapKey:nth-child(2) {
-        //A
-        margin-left: -5px;
-      }
-      .keymapKey:nth-child(3),
-      .keymapKey:nth-child(4),
-      .keymapKey:nth-child(5),
-      .keymapKey:nth-child(6) {
-        //SDFG
-        margin-left: -1px;
-        transform: rotate(10deg);
-      }
-      .keymapKey:nth-child(4),
-      .keymapKey:nth-child(10) {
-        //DK
-        margin-top: 8px;
-      }
-      .keymapKey:nth-child(5),
-      .keymapKey:nth-child(9) {
-        //FJ
-        margin-top: 15px;
-      }
-      .keymapKey:nth-child(6),
-      .keymapKey:nth-child(8) {
-        //GH
-        margin-top: 22px;
-      }
-
-      .keymapKey:nth-child(8),
-      .keymapKey:nth-child(9),
-      .keymapKey:nth-child(10),
-      .keymapKey:nth-child(11) {
-        //HJKL
-        transform: rotate(-10deg);
-        margin-left: -25%;
-      }
-    }
-
-    .r4 {
-      display: grid;
-      grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 2fr;
-      .keymapKey:nth-child(2) {
-        margin-left: -18px;
-      }
-      .keymapKey:nth-child(3) {
-        //Z
-        margin-left: -15px;
-      }
-      .keymapKey:nth-child(4),
-      .keymapKey:nth-child(5),
-      .keymapKey:nth-child(6),
-      .keymapKey:nth-child(7) {
-        //XCVB
-        margin-left: -11px;
-        transform: rotate(10deg);
-        margin-top: 2px;
-      }
-      .keymapKey:nth-child(12) {
-        //,
-        margin-top: 4px;
-        margin-left: -5px;
-      }
-      .keymapKey:nth-child(5),
-      .keymapKey:nth-child(11) {
-        //CM
-        margin-top: 10px;
-      }
-      .keymapKey:nth-child(6),
-      .keymapKey:nth-child(10) {
-        //VN
-        margin-top: 18px;
-      }
-      .keymapKey:nth-child(7) {
-        //B
-        margin-top: 24px;
-      }
-
-      .keymapKey:nth-child(10),
-      .keymapKey:nth-child(11),
-      .keymapKey:nth-child(12) {
-        //NM,
-        transform: rotate(-10deg);
-        margin-left: -25%;
-      }
-    }
-    .r5 {
-      grid-template-columns: 5fr 3fr 1fr 3fr 4.5fr;
-
-      // rotation/position of r5 keys moved under .r5 styles
-      // and made generic to left/right to account for alphas
-      div.keymapKey.left {
-        transform: rotate(10deg);
-        margin-left: -5%;
-        margin-top: 21%;
-      }
-      div.keymapKey.right {
-        opacity: 1;
-        transform: rotate(-10deg);
-        margin-left: -33%;
-        margin-top: 20%;
-      }
-
-      &[data-row5-has-alpha="true"] {
-        // space-alpha
-        &[data-row5-grid="3-1"] {
-          grid-template-columns: 5fr 3fr 1fr 3fr 4.5fr;
-
-          div.keymapKey.right {
-            margin-left: -30%;
-            margin-top: 25%;
-          }
-        }
-
-        // alpha-space
-        &[data-row5-grid="1-3"] {
-          grid-template-columns: 5fr 3fr 1fr 3fr 4.5fr;
-
-          div.keymapKey.left {
-            margin-left: 50%;
-            margin-top: 25%;
-          }
-        }
-      }
-    }
-    div#KeyBackslash.keymapKey {
-      visibility: hidden;
-    }
-
-    div.extraKey {
-      margin-top: 25px;
-      transform: rotate(-10deg) !important;
-      margin-left: -7px !important;
-      display: flex;
-      background-color: var(--sub-alt-color);
-      color: var(--sub-color);
-      border-radius: var(--roundness);
-      text-align: center;
-      justify-content: center;
-      align-items: center;
-      width: 2rem;
-      height: 2rem;
-      position: relative;
-    }
-  }
-}
diff --git a/frontend/src/styles/media-queries-brown.scss b/frontend/src/styles/media-queries-brown.scss
index f4bfb5a4839f..12b81d2a5a25 100644
--- a/frontend/src/styles/media-queries-brown.scss
+++ b/frontend/src/styles/media-queries-brown.scss
@@ -17,17 +17,6 @@
       }
     }
   }
-  #keymap .row {
-    height: 1rem;
-    gap: 0.1rem;
-  }
-  #keymap .keymapKey,
-  #keymap.split_matrix .keymapSplitSpacer {
-    width: 1rem;
-    height: 1rem;
-    border-radius: 0.3rem;
-    font-size: 0.5rem;
-  }
   .testActivity {
     display: none;
   }
diff --git a/frontend/src/styles/media-queries-purple.scss b/frontend/src/styles/media-queries-purple.scss
index 66b689896cee..c6dc189eb372 100644
--- a/frontend/src/styles/media-queries-purple.scss
+++ b/frontend/src/styles/media-queries-purple.scss
@@ -56,16 +56,6 @@
       }
     }
   }
-  #keymap .row {
-    height: 1.25rem;
-  }
-  #keymap .keymapKey,
-  #keymap.split_matrix .keymapSplitSpacer {
-    width: 1.25rem;
-    height: 1.25rem;
-    border-radius: 0.3rem;
-    font-size: 0.6rem;
-  }
 
   .popupWrapper .modal,
   .modalWrapper .modal {
diff --git a/frontend/src/ts/components/pages/test/Keymap.tsx b/frontend/src/ts/components/pages/test/Keymap.tsx
index cb671b730b87..3f9bbf9063e6 100644
--- a/frontend/src/ts/components/pages/test/Keymap.tsx
+++ b/frontend/src/ts/components/pages/test/Keymap.tsx
@@ -78,7 +78,7 @@ function Keyboard(props: { displayName: string; layoutData: LayoutObject }) {
   return (
     <div
       data-ui-element="keymap"
-      class="flex w-full flex-col items-center py-8 text-sm text-sub debug"
+      class="flex w-full flex-col items-center py-8 text-sm text-sub"
       style={{
         zoom: getConfig.keymapSize,
       }}
diff --git a/frontend/src/ts/elements/keymap.ts b/frontend/src/ts/elements/keymap.ts
deleted file mode 100644
index 83baaf868686..000000000000
--- a/frontend/src/ts/elements/keymap.ts
+++ /dev/null
@@ -1,710 +0,0 @@
-import { Config } from "../config/store";
-import { configEvent } from "../events/config";
-import { keymapEvent } from "../events/keymap";
-import * as Misc from "../utils/misc";
-import * as JSONData from "../utils/json-data";
-import * as Hangul from "hangul-js";
-import { showErrorNotification } from "../states/notifications";
-import { getActivePage } from "../states/core";
-import { onCapsLockChange, isCapsLockOn } from "@leonabcd123/modern-caps-lock";
-import * as ShiftTracker from "../test/shift-tracker";
-import * as KeyConverter from "../utils/key-converter";
-import { getActiveFunboxNames } from "../test/funbox/list";
-import { areSortedArraysEqual } from "../utils/arrays";
-import { LayoutObject } from "@monkeytype/schemas/layouts";
-import { animate } from "animejs";
-import { ElementsWithUtils, qsr } from "../utils/dom";
-import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
-import { getTheme } from "../states/theme";
-
-import { createEffectOn } from "../hooks/effects";
-import { wordsHaveNumbers } from "../states/test";
-import { getModifierState } from "../states/modifiers";
-
-export const keyDataDelimiter = "\uE000";
-const keymap = qsr("#keymap");
-
-const stenoKeys: LayoutObject = {
-  keymapShowTopRow: true,
-  type: "ansi",
-  keys: {
-    row1: [],
-    row2: [
-      ["s", "S"],
-      ["t", "T"],
-      ["p", "P"],
-      ["h", "H"],
-      ["*", "*"],
-      ["f", "F"],
-      ["p", "P"],
-      ["l", "L"],
-      ["t", "T"],
-      ["d", "D"],
-    ],
-    row3: [
-      ["s", "S"],
-      ["k", "K"],
-      ["w", "W"],
-      ["r", "R"],
-      ["*", "*"],
-      ["r", "R"],
-      ["b", "B"],
-      ["g", "G"],
-      ["s", "S"],
-      ["z", "Z"],
-    ],
-    row4: [
-      ["a", "A"],
-      ["o", "O"],
-      ["e", "E"],
-      ["u", "U"],
-    ],
-    row5: [],
-  },
-};
-
-createEffectOn(getTheme, () => {
-  //reset calculated style on all keys
-  keymap.qsa(".keymapKey").setStyle({});
-});
-
-function findKeyElements(char: string): ElementsWithUtils | null {
-  if (char === "\n") return null;
-
-  if (char === " ") {
-    return keymap.qsa(".keySpace");
-  }
-
-  if (char === '"') {
-    return keymap.qsa(`.keymapKey[data-key*='${char}']`);
-  }
-
-  return keymap.qsa(`.keymapKey[data-key*="${char}"]`);
-}
-
-function highlightKey(currentKey: string): void {
-  if (Config.mode === "zen") return;
-  requestDebouncedAnimationFrame("keymap.highlightKey", async () => {
-    if (currentKey === "") currentKey = " ";
-    try {
-      document
-        .querySelectorAll(".activeKey")
-        .forEach((el) => el.classList.remove("activeKey"));
-
-      if (Config.language.startsWith("korean")) {
-        currentKey = Hangul.disassemble(currentKey)[0] ?? currentKey;
-      }
-
-      const $target = findKeyElements(currentKey);
-      if ($target === null || $target.length === 0) return;
-
-      $target.addClass("activeKey");
-    } catch (e) {
-      if (e instanceof Error) {
-        console.log(`could not update highlighted keymap key: ${e.message}`);
-      }
-    }
-  });
-}
-
-async function flashKey(key: string, correct?: boolean): Promise<void> {
-  if (key === undefined) return;
-  requestDebouncedAnimationFrame(`keymap.flashKey.${key}`, async () => {
-    const elements = findKeyElements(key);
-    if (elements === null || elements.length === 0) return;
-
-    const themecolors = getTheme();
-
-    try {
-      let startingStyle = {
-        color: themecolors.bg,
-        backgroundColor: themecolors.sub,
-        borderColor: themecolors.sub,
-      };
-
-      if (correct || Config.blindMode) {
-        startingStyle = {
-          color: themecolors.bg,
-          backgroundColor: themecolors.main,
-          borderColor: themecolors.main,
-        };
-      } else {
-        startingStyle = {
-          color: themecolors.bg,
-          backgroundColor: themecolors.error,
-          borderColor: themecolors.error,
-        };
-      }
-
-      animate(elements.native, {
-        color: [startingStyle.color, themecolors.sub],
-        backgroundColor: [startingStyle.backgroundColor, themecolors.subAlt],
-        borderColor: [startingStyle.borderColor, themecolors.sub],
-        duration: 250,
-        easing: "out(5)",
-      });
-    } catch (e) {}
-  });
-}
-
-export function hide(): void {
-  keymap.hide();
-}
-
-export function show(): void {
-  keymap.show();
-}
-
-function buildRow(options: {
-  layoutData: LayoutObject;
-  rowId: string;
-  rowKeys: string[][];
-  layoutNameDisplayString: string;
-  showTopRow: boolean;
-  isMatrix: boolean;
-  isSteno: boolean;
-  isISO: boolean;
-  isAlice: boolean;
-}): string {
-  const {
-    layoutData,
-    rowId,
-    isMatrix,
-    showTopRow,
-    isSteno,
-    isISO,
-    layoutNameDisplayString,
-    isAlice,
-  } = options;
-  let { rowKeys } = options;
-
-  let hasAlphas = false;
-  let r5Grid = "";
-  let rowHtml = "";
-  let keysHtml = "";
-
-  if (rowId === "row1" && (isMatrix || Config.keymapStyle === "staggered")) {
-    rowKeys = rowKeys.slice(1);
-  }
-  if (rowId === "row1" && (!showTopRow || isSteno)) {
-    return "";
-  }
-
-  if (
-    (rowId === "row2" || rowId === "row3" || rowId === "row4") &&
-    !isMatrix &&
-    !isSteno
-  ) {
-    keysHtml += "<div></div>";
-  }
-
-  if (rowId === "row4" && !isISO && !isMatrix && !isSteno) {
-    keysHtml += "<div></div>";
-  }
-
-  if (isMatrix) {
-    if (rowId !== "row5" && layoutData.matrixShowRightColumn) {
-      keysHtml += `<div class="keymapKey"></div>`;
-    } else {
-      keysHtml += `<div></div>`;
-    }
-  }
-
-  if (rowId === "row5") {
-    if (isSteno) return "";
-    let layoutDisplay = layoutNameDisplayString.replace(/_/g, " ");
-    let letterStyle = "";
-    if (Config.keymapLegendStyle === "blank") {
-      letterStyle = `style="display: none;"`;
-    }
-    /* ROW 5 in alternate keymaps allow for alphas in thumb keys.
-     * These keymaps MUST include two keys in row 5,
-     * an alpha and a space, or a space and an alpha.
-     * Alpha key is rendered with the regular alpha size.
-     * Layout name is automatically added in the space key.
-     * Visual keymap will be:
-     * 1-3 for 1 alpha and 1 space
-     * 3-1 for 1 space and 1 alpha
-     * Together with the data-row5-has-alpha="true",
-     * these two will be used to edit the CSS grid layout.
-     * 3-3 for two spaces of size 3. This will not be used to edit CSS,
-     * since it means a traditional layout, can keep current CSS grid.
-     * It is just created for simplicity in the for loop below.
-     * */
-    // If only one space, add another
-    const isRowEmpty = (row: string[] | undefined): boolean =>
-      areSortedArraysEqual(row ?? [], [" "]);
-
-    if (rowKeys.length === 1 && isRowEmpty(rowKeys[0])) {
-      rowKeys[1] = rowKeys[0] ?? [];
-    }
-    // If only one alpha, add one space and place it on the left
-    if (rowKeys.length === 1 && !isRowEmpty(rowKeys[0])) {
-      rowKeys[1] = [" "];
-      rowKeys.reverse();
-    }
-    // If two alphas equal, replace one with a space on the left
-    if (
-      rowKeys.length > 1 &&
-      !isRowEmpty(rowKeys[0]) &&
-      areSortedArraysEqual(rowKeys[0] as string[], rowKeys[1] as string[])
-    ) {
-      rowKeys[0] = [" "];
-    }
-    const alphas = (v: string[]): boolean => v.some((key) => key !== " ");
-    hasAlphas = rowKeys.some(alphas);
-
-    keysHtml += "<div></div>";
-
-    for (let keyId = 0; keyId < rowKeys.length; keyId++) {
-      const key = rowKeys[keyId] as string[];
-      let keyDisplay = key[0] as string;
-      if (Config.keymapLegendStyle === "uppercase") {
-        keyDisplay = keyDisplay.toUpperCase();
-      }
-      const keyVisualValue = key.map((it) => it.replace('"', "&quot;"));
-      // these are used to keep grid layout but magically hide keys using opacity:
-      let side = keyId < 1 ? "left" : "right";
-      // we won't use this trick for alternate layouts, unless Alice (for rotation):
-      if (hasAlphas && !isAlice) side = "";
-      if (keyId === 1) {
-        keysHtml += `<div class="keymapSplitSpacer"></div>`;
-        r5Grid += "-";
-      }
-      if (isRowEmpty(keyVisualValue)) {
-        keysHtml += `<div class="keymapKey keySpace layoutIndicator ${side}">
-              <div class="letter" ${letterStyle}>${layoutDisplay}</div>
-            </div>`;
-        r5Grid += "3";
-        // potential second space in next loop iterations will be empty:
-        layoutDisplay = "";
-      } else {
-        keysHtml += `<div class="keymapKey ${side}">
-              <div class="letter">${keyDisplay}</div>
-            </div>`;
-        r5Grid += "1";
-      }
-    }
-  } else {
-    for (let keyId = 0; keyId < rowKeys.length; keyId++) {
-      if (rowId === "row2" && keyId === 12) continue;
-      if (rowId === "row4" && isMatrix && isISO && keyId === 0) continue;
-
-      let colLimit = 10;
-      if (layoutData.matrixShowRightColumn) {
-        colLimit = 11;
-      }
-      if (rowId === "row4" && isMatrix && isISO) {
-        colLimit += 1;
-      }
-
-      if (
-        (Config.keymapStyle === "matrix" ||
-          Config.keymapStyle === "split_matrix") &&
-        keyId >= colLimit
-      ) {
-        continue;
-      }
-
-      const key = rowKeys[keyId] as string[];
-      const bump = rowId === "row3" && (keyId === 3 || keyId === 6);
-      let keyDisplay = key[0] as string;
-      let letterStyle = "";
-
-      if (Config.keymapLegendStyle === "blank") {
-        letterStyle = `style="display: none;"`;
-      } else if (Config.keymapLegendStyle === "uppercase") {
-        keyDisplay = keyDisplay.toUpperCase();
-      }
-
-      let hide = "";
-      if (
-        rowId === "row1" &&
-        keyId === 0 &&
-        !isMatrix &&
-        Config.keymapStyle !== "staggered"
-      ) {
-        hide = ` invisible`;
-      }
-
-      const keyElement = `<div class="keymapKey${hide}" data-key="${key
-        .map((it) => it.replace('"', "&quot;"))
-        .join(
-          keyDataDelimiter,
-        )}"><span class="letter" ${letterStyle}>${keyDisplay}</span>${
-        bump ? "<div class='bump'></div>" : ""
-      }</div>`;
-
-      let splitSpacer = "";
-      if (
-        Config.keymapStyle === "split" ||
-        Config.keymapStyle === "split_matrix" ||
-        Config.keymapStyle === "alice" ||
-        isSteno
-      ) {
-        if (
-          rowId === "row4" &&
-          isSteno &&
-          (keyId === 0 || keyId === 2 || keyId === 4)
-        ) {
-          splitSpacer += `<div class="keymapSplitSpacer"></div>`;
-        } else if (
-          rowId === "row4" &&
-          (Config.keymapStyle === "split" || Config.keymapStyle === "alice") &&
-          isISO
-        ) {
-          if (keyId === 6) {
-            splitSpacer += `<div class="keymapSplitSpacer"></div>`;
-          }
-        } else if (
-          rowId === "row1" &&
-          (Config.keymapStyle === "split" || Config.keymapStyle === "alice")
-        ) {
-          if (keyId === 7) {
-            splitSpacer += `<div class="keymapSplitSpacer"></div>`;
-          }
-        } else if (rowId === "row4" && isMatrix && isISO) {
-          if (keyId === 6) {
-            splitSpacer += `<div class="keymapSplitSpacer"></div>`;
-          }
-        } else {
-          if (keyId === 5) {
-            splitSpacer += `<div class="keymapSplitSpacer"></div>`;
-          }
-        }
-      }
-
-      if (Config.keymapStyle === "alice" && rowId === "row4") {
-        if ((isISO && keyId === 6) || (!isISO && keyId === 5)) {
-          splitSpacer += `<div class="extraKey"><span class="letter"></span></div>`;
-        }
-      }
-
-      keysHtml += splitSpacer + keyElement;
-    }
-  }
-
-  if (rowId === "row5") {
-    rowHtml += `<div
-          class="row r5"
-          data-row5-grid="${r5Grid}"
-          data-row5-has-alpha="${hasAlphas}"
-        >${keysHtml}</div>`;
-  } else {
-    const rowIndex = parseInt(rowId.replace("row", ""));
-    rowHtml += `<div class="row r${rowIndex}">${keysHtml}</div>`;
-  }
-
-  return rowHtml;
-}
-
-export async function refresh(): Promise<void> {
-  const layoutName =
-    Config.keymapLayout === "overrideSync"
-      ? Config.keymapLayout
-      : Config.layout;
-
-  if (Config.keymapMode === "off") return;
-  if (getActivePage() !== "test") return;
-  if (!layoutName) return;
-  try {
-    let layoutNameDisplayString = layoutName;
-    let layoutData: LayoutObject;
-    try {
-      if (Config.keymapLayout === "overrideSync") {
-        if (Config.layout === "default") {
-          layoutData = await JSONData.getLayout("qwerty");
-          layoutNameDisplayString = "default";
-        } else {
-          layoutData = await JSONData.getLayout(Config.layout);
-          layoutNameDisplayString = Config.layout;
-        }
-      } else {
-        layoutData = await JSONData.getLayout(Config.keymapLayout);
-        layoutNameDisplayString = Config.keymapLayout;
-      }
-    } catch (e) {
-      showErrorNotification(`Failed to load keymap ${layoutName}`, {
-        error: e,
-      });
-      return;
-    }
-
-    const showTopRow =
-      (wordsHaveNumbers() && Config.keymapMode === "next") ||
-      Config.keymapLayoutStyle === "minimal_numrow" ||
-      (layoutData.keymapShowTopRow && Config.keymapLayoutStyle !== "minimal");
-
-    const isMatrix =
-      Config.keymapStyle === "matrix" || Config.keymapStyle === "split_matrix";
-
-    const isSteno =
-      Config.keymapStyle === "steno" || Config.keymapStyle === "steno_matrix";
-
-    const isAlice = Config.keymapStyle === "alice";
-
-    if (isSteno) {
-      layoutData = stenoKeys;
-    }
-
-    const funbox = getActiveFunboxNames().includes("layout_mirror");
-    if (funbox) {
-      layoutData = KeyConverter.mirrorLayoutKeys(layoutData);
-    }
-
-    const isISO = layoutData.type === "iso";
-
-    let keymapElement = "";
-    for (const [rowId, rowKeys] of Object.entries(layoutData.keys)) {
-      keymapElement += buildRow({
-        layoutData,
-        rowId,
-        rowKeys,
-        isMatrix,
-        showTopRow,
-        isSteno,
-        isISO,
-        layoutNameDisplayString,
-        isAlice,
-      });
-    }
-
-    keymap.setHtml(keymapElement);
-
-    keymap.removeClass([
-      "staggered",
-      "matrix",
-      "split",
-      "split_matrix",
-      "alice",
-      "steno",
-      "steno_matrix",
-    ]);
-    keymap.addClass(Config.keymapStyle);
-  } catch (e) {
-    if (e instanceof Error) {
-      console.log(
-        `something went wrong when changing layout, resettings: ${e.message}`,
-      );
-      // UpdateConfig.setConfig("keymapLayout", "qwerty",true);
-    }
-  }
-}
-
-const isMacLike = Misc.isMacLike();
-const symbolsPattern = /^[^\p{L}\p{N}]{1}$/u;
-type KeymapLegendStates = [letters: 0 | 1 | 2 | 3, symbols: 0 | 1 | 2 | 3];
-let keymapLegendStates: KeymapLegendStates = [0, 0];
-
-function getLegendStates(): KeymapLegendStates | undefined {
-  // MacOS has different CapsLock and Shift logic than other operating systems
-  // Windows and Linux only capitalize letters if either Shift OR CapsLock are
-  // pressed, but not both at once.
-  // MacOS instead capitalizes when either or both are pressed,
-  // so we have to check for that.
-  const { shift: shiftState, alt: altState } = getModifierState();
-  const capsState = isCapsLockOn();
-
-  const osDependentLettersState = isMacLike
-    ? shiftState || capsState
-    : shiftState !== capsState;
-
-  const lettersState = (osDependentLettersState ? 1 : 0) + (altState ? 2 : 0);
-  const symbolsState = (shiftState ? 1 : 0) + (altState ? 2 : 0);
-
-  const [previousLettersState, previousSymbolsState] = keymapLegendStates;
-
-  if (
-    previousLettersState === lettersState &&
-    previousSymbolsState === symbolsState
-  ) {
-    return;
-  }
-
-  keymapLegendStates = [
-    lettersState as 0 | 1 | 2 | 3,
-    symbolsState as 0 | 1 | 2 | 3,
-  ];
-  return keymapLegendStates;
-}
-
-async function updateLegends(): Promise<void> {
-  const states = getLegendStates();
-  if (states === undefined) return;
-
-  const keymapKeys = [...document.getElementsByClassName("keymapKey")].filter(
-    (el) => {
-      const isKeymapKey = el.classList.contains("keymapKey");
-      const isNotSpace = !el.classList.contains("keySpace");
-
-      return isKeymapKey && isNotSpace;
-    },
-  ) as HTMLElement[];
-
-  const layoutKeys = keymapKeys.map((el) =>
-    el.dataset["key"]?.split(keyDataDelimiter),
-  );
-  if (layoutKeys.includes(undefined)) return;
-
-  const keys = keymapKeys.map((el) => el.childNodes[0]);
-
-  const [lettersState, symbolsState] = states;
-
-  const layoutName =
-    Config.keymapLayout === "overrideSync"
-      ? Config.layout === "default"
-        ? "qwerty"
-        : Config.layout
-      : Config.keymapLayout;
-
-  const layout = await JSONData.getLayout(layoutName).catch(() => undefined);
-  if (layout === undefined) {
-    showErrorNotification("Failed to load keymap layout");
-
-    return;
-  }
-
-  for (let i = 0; i < layoutKeys.length; i++) {
-    const layoutKey = layoutKeys[i] as string[];
-    const key = keys[i];
-    const lowerCaseCharacter = layoutKey[0];
-    const upperCaseCharacter = layoutKey[1];
-
-    if (
-      key === undefined ||
-      layoutKey === undefined ||
-      lowerCaseCharacter === undefined ||
-      upperCaseCharacter === undefined
-    ) {
-      continue;
-    }
-
-    const keyIsSymbol = [lowerCaseCharacter, upperCaseCharacter].some(
-      (character) => symbolsPattern.test(character ?? ""),
-    );
-
-    const keycode = KeyConverter.layoutKeyToKeycode(lowerCaseCharacter, layout);
-    if (keycode === undefined) {
-      return;
-    }
-    const oppositeShift = ShiftTracker.isUsingOppositeShift(keycode);
-
-    const state = keyIsSymbol ? symbolsState : lettersState;
-    const characterIndex = oppositeShift ? state : 0;
-
-    //if the character at the index is undefined, try without alt
-    const character =
-      layoutKey[characterIndex] ?? layoutKey[characterIndex - 2];
-
-    key.textContent = character ?? "";
-  }
-}
-let ignoreConfigEvent = false;
-
-configEvent.subscribe(({ key }) => {
-  const handleMode = (): void => {
-    keymap.qsa(".activeKey").removeClass("activeKey");
-    keymap.qsa(".keymapKey").setAttribute("style", "");
-    Config.keymapMode === "off" ? hide() : show();
-  };
-  const handleSize = (): void => {
-    keymap.setStyle({ zoom: Config.keymapSize.toString() });
-  };
-  const handleLegendStyle = (): void => {
-    let style = Config.keymapLegendStyle;
-
-    // Remove existing styles
-    const keymapLegendStyles = ["lowercase", "uppercase", "blank", "dynamic"];
-    keymapLegendStyles.forEach((name) => {
-      keymap.qsa(".keymapLegendStyle").removeClass(name);
-    });
-
-    style = style || "lowercase";
-
-    // Mutate the keymap in the DOM, if it exists.
-    // 1. Remove everything
-    keymap.qsa(".keymapKey > .letter").setStyle({ display: "" });
-    keymap.qsa(".keymapKey > .letter").setStyle({ textTransform: "" });
-
-    // 2. Append special styles onto the DOM elements
-    if (style === "uppercase") {
-      keymap
-        .qsa(".keymapKey > .letter")
-        .setStyle({ textTransform: "capitalize" });
-    }
-    if (style === "blank") {
-      keymap.qsa(".keymapKey > .letter").setStyle({ display: "none" });
-    }
-
-    // Update and save to cookie for persistence
-    keymap.qsa(".keymapLegendStyle").addClass(style);
-  };
-
-  if (key === "fullConfigChange") {
-    ignoreConfigEvent = true;
-  }
-  if (key === "fullConfigChangeFinished") {
-    ignoreConfigEvent = false;
-    void refresh();
-    handleMode();
-    handleSize();
-    handleLegendStyle();
-  }
-  if (ignoreConfigEvent) return;
-
-  if (
-    (key === "layout" && Config.keymapLayout === "overrideSync") ||
-    key === "keymapLayout" ||
-    key === "keymapStyle" ||
-    key === "keymapLayoutStyle" ||
-    key === "keymapMode"
-  ) {
-    void refresh();
-  }
-  if (key === "keymapMode") {
-    handleMode();
-  }
-  if (key === "keymapSize") {
-    handleSize();
-  }
-  if (key === "keymapLegendStyle") {
-    handleLegendStyle();
-  }
-});
-
-keymapEvent.subscribe(({ mode, key, correct }) => {
-  if (mode === "highlight") {
-    highlightKey(key);
-  }
-  if (mode === "flash") {
-    void flashKey(key, correct);
-  }
-});
-
-document.addEventListener("keydown", (e) => {
-  if (
-    Config.keymapLegendStyle === "dynamic" &&
-    (e.code === "ShiftLeft" ||
-      e.code === "ShiftRight" ||
-      e.code === "AltRight" ||
-      e.code === "AltLeft")
-  ) {
-    void updateLegends();
-  }
-});
-
-document.addEventListener("keyup", (e) => {
-  if (
-    Config.keymapLegendStyle === "dynamic" &&
-    (e.code === "ShiftLeft" ||
-      e.code === "ShiftRight" ||
-      e.code === "AltRight" ||
-      e.code === "AltLeft")
-  ) {
-    void updateLegends();
-  }
-});
-
-onCapsLockChange(() => {
-  if (Config.keymapLegendStyle === "dynamic") void updateLegends();
-});
diff --git a/frontend/src/ts/event-handlers/keymap.ts b/frontend/src/ts/event-handlers/keymap.ts
deleted file mode 100644
index da67f60e37e7..000000000000
--- a/frontend/src/ts/event-handlers/keymap.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import * as Commandline from "../commandline/commandline";
-import { qs } from "../utils/dom";
-
-qs("#keymap")?.onChild("click", ".r5 .layoutIndicator", async () => {
-  Commandline.show({
-    subgroupOverride: "keymapLayout",
-  });
-});
diff --git a/frontend/src/ts/index.ts b/frontend/src/ts/index.ts
index a358f76bfdb1..15ce6ca9f435 100644
--- a/frontend/src/ts/index.ts
+++ b/frontend/src/ts/index.ts
@@ -5,7 +5,6 @@ import "./dev/signal-tracker";
 import "solid-devtools";
 
 import "./event-handlers/global";
-import "./event-handlers/keymap";
 import "./event-handlers/test";
 import "./modals/google-sign-up";
 
diff --git a/frontend/src/ts/pages/test.ts b/frontend/src/ts/pages/test.ts
index 8482c7511528..bd0f0e67e724 100644
--- a/frontend/src/ts/pages/test.ts
+++ b/frontend/src/ts/pages/test.ts
@@ -2,7 +2,6 @@ import * as TestLogic from "../test/test-logic";
 import * as Funbox from "../test/funbox/funbox";
 import Page from "./page";
 import { updateFooterAndVerticalAds } from "../controllers/ad-controller";
-import * as Keymap from "../elements/keymap";
 import { blurInputElement } from "../input/input-element";
 import { qsr } from "../utils/dom";
 import { resetIncompleteTests } from "../states/test";
@@ -27,6 +26,5 @@ export const page = new Page({
     TestLogic.restart({
       noAnim: true,
     });
-    void Keymap.refresh();
   },
 });
diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts
index 3035080af0c3..997ac8242016 100644
--- a/frontend/src/ts/test/test-ui.ts
+++ b/frontend/src/ts/test/test-ui.ts
@@ -54,7 +54,6 @@ import * as CompositionDisplay from "../elements/composition-display";
 import * as AdController from "../controllers/ad-controller";
 import * as Joining from "./break-joining";
 import * as LayoutfluidFunboxTimer from "../test/funbox/layoutfluid-funbox-timer";
-import * as Keymap from "../elements/keymap";
 import * as ThemeController from "../controllers/theme-controller";
 import * as MemoryFunboxTimer from "./funbox/memory-funbox-timer";
 import {
@@ -1916,7 +1915,6 @@ export function onTestRestart(source: "testPage" | "resultPage"): void {
   LayoutfluidFunboxTimer.instantHide();
   updatePremid();
   focusWords(true);
-  void Keymap.refresh();
   ResultWordHighlight.destroy();
   MonkeyPower.reset();
   MemoryFunboxTimer.reset();
diff --git a/frontend/static/funbox/crt.css b/frontend/static/funbox/crt.css
index 855f21cd6654..a3167c70e8dd 100644
--- a/frontend/static/funbox/crt.css
+++ b/frontend/static/funbox/crt.css
@@ -131,16 +131,9 @@ body.crtmode .scrollToTopButton:hover {
     0 0 3px;
 }
 
-body.crtmode #keymap .keymapKey {
+body.crtmode [data-ui-element="keymap"] div div {
   box-shadow:
-    3px 0 1px var(--crt-sub-color-glow),
-    -3px 0 var(--crt-sub-color-glow),
-    0 0 3px;
-}
-
-body.crtmode #keymap .keymapKey.activeKey {
-  box-shadow:
-    3px 0 1px var(--crt-main-color-glow),
-    -3px 0 var(--crt-main-color-glow),
-    0 0 3px;
+    3px 0 1px var(--crt-sub-alt-color-glow),
+    -3px 0 var(--crt-sub-alt-color-glow),
+    0 0 3px var(--crt-sub-alt-color-glow);
 }

From 2a6e7eb568381aa299688077a0ac7797be2ba63c Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Mon, 22 Jun 2026 13:01:57 +0200
Subject: [PATCH 54/61] cleanup

---
 frontend/src/ts/utils/json-data.ts | 5 +----
 frontend/static/funbox/crt.css     | 2 +-
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/frontend/src/ts/utils/json-data.ts b/frontend/src/ts/utils/json-data.ts
index 221524f31c5b..7b773eb19a20 100644
--- a/frontend/src/ts/utils/json-data.ts
+++ b/frontend/src/ts/utils/json-data.ts
@@ -76,10 +76,7 @@ export const cachedFetchJson = memoizeAsync(fetchJson);
  * @throws {Error} If the layout list or layout doesn't exist.
  */
 export async function getLayout(layoutName: string): Promise<LayoutObject> {
-  //TODO remove structuredClone, should not be needed with the new keymap implementation
-  return structuredClone(
-    await cachedFetchJson<LayoutObject>(`/layouts/${layoutName}.json`),
-  );
+  return await cachedFetchJson<LayoutObject>(`/layouts/${layoutName}.json`);
 }
 
 // used for polyglot wordset language-specific properties
diff --git a/frontend/static/funbox/crt.css b/frontend/static/funbox/crt.css
index a3167c70e8dd..71f1bcb7471d 100644
--- a/frontend/static/funbox/crt.css
+++ b/frontend/static/funbox/crt.css
@@ -131,7 +131,7 @@ body.crtmode .scrollToTopButton:hover {
     0 0 3px;
 }
 
-body.crtmode [data-ui-element="keymap"] div div {
+body.crtmode [data-ui-element="keymap"] > div > div {
   box-shadow:
     3px 0 1px var(--crt-sub-alt-color-glow),
     -3px 0 var(--crt-sub-alt-color-glow),

From d8d4d0f75e32b1f18b6d6e36a9dcbc6a3619dd35 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Mon, 22 Jun 2026 09:59:40 +0200
Subject: [PATCH 55/61] reduce size

---
 frontend/src/ts/components/pages/test/Keymap.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/ts/components/pages/test/Keymap.tsx b/frontend/src/ts/components/pages/test/Keymap.tsx
index 3f9bbf9063e6..84e4524ffa23 100644
--- a/frontend/src/ts/components/pages/test/Keymap.tsx
+++ b/frontend/src/ts/components/pages/test/Keymap.tsx
@@ -204,7 +204,7 @@ function Key(
       >
         <Button
           variant="text"
-          class="text-xs [--themable-button-bg:transparent] [--themable-button-text:var(--keycolor)]"
+          class="text-[0.5em] [--themable-button-bg:transparent] [--themable-button-text:var(--keycolor)]"
           text={getKeymapLayout().layoutNameDisplayString}
           onClick={() => showCommandLineForConfig("keymapLayout")}
           tabIndex={-1}

From 22e2f73dc32550330ab7084b2de41ddca5cbf99f Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Fri, 26 Jun 2026 11:33:25 +0200
Subject: [PATCH 56/61] fix x offsets, bit better alice layout

---
 .../src/ts/components/pages/test/Keymap.tsx   | 46 ++++++++++---------
 .../ts/components/pages/test/keymapLayouts.ts | 40 ++++++++--------
 2 files changed, 45 insertions(+), 41 deletions(-)

diff --git a/frontend/src/ts/components/pages/test/Keymap.tsx b/frontend/src/ts/components/pages/test/Keymap.tsx
index 84e4524ffa23..6da05f4493e4 100644
--- a/frontend/src/ts/components/pages/test/Keymap.tsx
+++ b/frontend/src/ts/components/pages/test/Keymap.tsx
@@ -102,27 +102,31 @@ function KeyboardDefinitionRenderer(props: {
   flashState: Record<string, FlashEntry | undefined>;
 }) {
   return (
-    <For each={props.keyboardDef}>
-      {(keys, rowNum) => (
-        <Show when={rowNum() !== 0 || props.showFirstRow}>
-          <div class="flex h-8 flex-row">
-            <For each={keys}>
-              {(key) => {
-                const label = () => {
-                  const layer =
-                    rowNum() === 0 && isMacLike() && isCapsLockOn()
-                      ? props.layer - 1
-                      : props.layer;
-                  return key.legends[layer] ?? "";
-                };
-                const flashEntry = () => props.flashState[label()];
-                return <Key {...key} label={label()} flashEntry={flashEntry} />;
-              }}
-            </For>
-          </div>
-        </Show>
-      )}
-    </For>
+    <div class="w-fit">
+      <For each={props.keyboardDef}>
+        {(keys, rowNum) => (
+          <Show when={rowNum() !== 0 || props.showFirstRow}>
+            <div class="flex h-8 flex-row">
+              <For each={keys}>
+                {(key) => {
+                  const label = () => {
+                    const layer =
+                      rowNum() === 0 && isMacLike() && isCapsLockOn()
+                        ? props.layer - 1
+                        : props.layer;
+                    return key.legends[layer] ?? "";
+                  };
+                  const flashEntry = () => props.flashState[label()];
+                  return (
+                    <Key {...key} label={label()} flashEntry={flashEntry} />
+                  );
+                }}
+              </For>
+            </div>
+          </Show>
+        )}
+      </For>
+    </div>
   );
 }
 
diff --git a/frontend/src/ts/components/pages/test/keymapLayouts.ts b/frontend/src/ts/components/pages/test/keymapLayouts.ts
index 943b7f01c171..8008915724fb 100644
--- a/frontend/src/ts/components/pages/test/keymapLayouts.ts
+++ b/frontend/src/ts/components/pages/test/keymapLayouts.ts
@@ -311,25 +311,25 @@ function buildRow(
 
 const aliceBottomRow: LayoutKey[] = [
   { legend: Ctrl, width: 1.5, isExtraKey: true, x: 1 },
-  { legend: Alt, width: 1.5, isExtraKey: true, rotation: 10, x: 1, y: 0.1 },
+  { legend: Alt, width: 1.5, isExtraKey: true, rotation: 10, x: 1, y: 0.25 },
   {
     legend: " ",
     width: 3,
     rotation: 10,
-    y: 0.55,
+    y: 0.7,
     x: 2.3,
-    extraKeysOverride: { x: 0, y: 0.4, width: 2 },
+    extraKeysOverride: { x: 0, y: 0.6, width: 2 },
   },
-  { legend: Meta, width: 1.5, isExtraKey: true, rotation: 10, y: 0.7 },
+  { legend: Meta, width: 1.5, isExtraKey: true, rotation: 10, y: 0.9 },
   {
     isLayoutIndicator: true,
     width: 3,
     rotation: -10,
-    x: 1.1,
-    y: 0.6,
-    extraKeysOverride: { x: 0.65, y: 0.5, width: 2.75 },
+    x: 1,
+    y: 0.7,
+    extraKeysOverride: { x: 0.65, y: 0.7, width: 2.75 },
   },
-  { legend: Alt, width: 1.5, isExtraKey: true, rotation: -10, y: 0.1 },
+  { legend: Alt, width: 1.5, isExtraKey: true, rotation: -10, y: 0.3 },
   { legend: Ctrl, width: 1.5, isExtraKey: true, x: 2.25 },
 ];
 
@@ -372,10 +372,10 @@ const alice: KeymapLayout = [
     { legend: "PgDn", isExtraKey: true },
     { legend: "Caps", width: 1.75, isExtraKey: true, x: 0.15 },
     { layoutPosition: { col: 0 }, x: 0.3, extraKeysOverride: { x: 0 } },
-    { layoutPosition: { col: 1 }, rotation: 10 },
-    { layoutPosition: { col: 2 }, rotation: 10, y: 0.2 },
-    { layoutPosition: { col: 3 }, rotation: 10, y: 0.4 },
-    { layoutPosition: { col: 4 }, rotation: 10, y: 0.6 },
+    { layoutPosition: { col: 1 }, rotation: 10, y: 0.1 },
+    { layoutPosition: { col: 2 }, rotation: 10, y: 0.3 },
+    { layoutPosition: { col: 3 }, rotation: 10, y: 0.5 },
+    { layoutPosition: { col: 4 }, rotation: 10, y: 0.7 },
     { layoutPosition: { col: 5 }, rotation: -10, y: 0.7, x: 1.15 },
     { layoutPosition: { col: 6 }, rotation: -10, y: 0.5 },
     { layoutPosition: { col: 7 }, rotation: -10, y: 0.3 },
@@ -387,14 +387,14 @@ const alice: KeymapLayout = [
   buildRow("row4", [
     { legend: Shift, width: 2.25, isExtraKey: true, x: 1 },
     { layoutPosition: { col: 0 }, x: 0.45, extraKeysOverride: { x: 0 } },
-    { layoutPosition: { col: 1 }, rotation: 10, y: 0.1 },
-    { layoutPosition: { col: 2 }, rotation: 10, y: 0.3 },
-    { layoutPosition: { col: 3 }, rotation: 10, y: 0.5 },
-    { layoutPosition: { col: 4 }, rotation: 10, y: 0.7 },
-    { layoutPosition: { col: 4 }, rotation: -10, y: 0.7, x: 0.75 },
-    { layoutPosition: { col: 5 }, rotation: -10, y: 0.5 },
-    { layoutPosition: { col: 6 }, rotation: -10, y: 0.3 },
-    { layoutPosition: { col: 7 }, rotation: -10, y: 0.1 },
+    { layoutPosition: { col: 1 }, rotation: 10, y: 0.25 },
+    { layoutPosition: { col: 2 }, rotation: 10, y: 0.45 },
+    { layoutPosition: { col: 3 }, rotation: 10, y: 0.65 },
+    { layoutPosition: { col: 4 }, rotation: 10, y: 0.85 },
+    { layoutPosition: { col: 4 }, rotation: -10, y: 0.8, x: 0.7 },
+    { layoutPosition: { col: 5 }, rotation: -10, y: 0.6 },
+    { layoutPosition: { col: 6 }, rotation: -10, y: 0.4 },
+    { layoutPosition: { col: 7 }, rotation: -10, y: 0.2 },
     { layoutPosition: { col: 8 } },
     { layoutPosition: { col: 9 } },
     { legend: Shift, width: 1.75, isExtraKey: true },

From 83965530fd5edf074fdcaeb024558ac5d43050a0 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Fri, 26 Jun 2026 11:40:54 +0200
Subject: [PATCH 57/61] alice homing key

---
 frontend/src/ts/components/pages/test/keymapLayouts.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/ts/components/pages/test/keymapLayouts.ts b/frontend/src/ts/components/pages/test/keymapLayouts.ts
index 8008915724fb..f625f7f22c92 100644
--- a/frontend/src/ts/components/pages/test/keymapLayouts.ts
+++ b/frontend/src/ts/components/pages/test/keymapLayouts.ts
@@ -374,10 +374,10 @@ const alice: KeymapLayout = [
     { layoutPosition: { col: 0 }, x: 0.3, extraKeysOverride: { x: 0 } },
     { layoutPosition: { col: 1 }, rotation: 10, y: 0.1 },
     { layoutPosition: { col: 2 }, rotation: 10, y: 0.3 },
-    { layoutPosition: { col: 3 }, rotation: 10, y: 0.5 },
+    { layoutPosition: { col: 3 }, rotation: 10, y: 0.5, isHoming: true },
     { layoutPosition: { col: 4 }, rotation: 10, y: 0.7 },
     { layoutPosition: { col: 5 }, rotation: -10, y: 0.7, x: 1.15 },
-    { layoutPosition: { col: 6 }, rotation: -10, y: 0.5 },
+    { layoutPosition: { col: 6 }, rotation: -10, y: 0.5, isHoming: true },
     { layoutPosition: { col: 7 }, rotation: -10, y: 0.3 },
     { layoutPosition: { col: 8 }, rotation: -10, y: 0.1 },
     { layoutPosition: { col: 9 } },

From 99e1138b9024fd2144de9d1bd7304f6755d17bef Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Fri, 26 Jun 2026 12:08:03 +0200
Subject: [PATCH 58/61] await keymap

---
 .../components/pages/test/keymapConverter.ts  |  3 +-
 .../ts/components/pages/test/keymapLayouts.ts | 42 +++++++++----------
 frontend/src/ts/input/handlers/keydown.ts     |  1 -
 frontend/src/ts/states/test.ts                | 38 ++++++++++++-----
 frontend/src/ts/test/shift-tracker.ts         |  1 +
 5 files changed, 52 insertions(+), 33 deletions(-)

diff --git a/frontend/src/ts/components/pages/test/keymapConverter.ts b/frontend/src/ts/components/pages/test/keymapConverter.ts
index 74e0dca094d6..bab2a0ab182f 100644
--- a/frontend/src/ts/components/pages/test/keymapConverter.ts
+++ b/frontend/src/ts/components/pages/test/keymapConverter.ts
@@ -79,8 +79,9 @@ function convert(options: {
   );
 }
 
+const emptyLegends = ["", "", "", ""];
 function buildLegends(legends: string | KeyLegends | undefined): KeyLegends {
-  if (legends === undefined) return ["", "", "", ""];
+  if (legends === undefined) return emptyLegends;
   if (typeof legends === "string") {
     return new Array<string>(4).fill(legends);
   }
diff --git a/frontend/src/ts/components/pages/test/keymapLayouts.ts b/frontend/src/ts/components/pages/test/keymapLayouts.ts
index f625f7f22c92..95f18e4b77f6 100644
--- a/frontend/src/ts/components/pages/test/keymapLayouts.ts
+++ b/frontend/src/ts/components/pages/test/keymapLayouts.ts
@@ -288,27 +288,6 @@ const splitMatrix: KeymapLayout = [
   splitMatrixBottomRow,
 ];
 
-function buildRow(
-  row: keyof LayoutObject["keys"],
-  keys: (Omit<LayoutKey, "legends"> & { layoutPosition?: { col?: number } })[],
-): LayoutKey[] {
-  return keys.map((key, col) => {
-    const lp = key.layoutPosition;
-    return {
-      ...key,
-      ...(lp
-        ? {
-            layoutPosition: {
-              ...lp,
-              ...(lp.row !== undefined ? {} : { row }),
-              ...(lp.col !== undefined ? {} : { col }),
-            },
-          }
-        : {}),
-    } as LayoutKey;
-  });
-}
-
 const aliceBottomRow: LayoutKey[] = [
   { legend: Ctrl, width: 1.5, isExtraKey: true, x: 1 },
   { legend: Alt, width: 1.5, isExtraKey: true, rotation: 10, x: 1, y: 0.25 },
@@ -417,6 +396,27 @@ export const keymapLayouts: Partial<
   alice: { iso: alice, ansi: alice },
 };
 
+function buildRow(
+  row: keyof LayoutObject["keys"],
+  keys: (Omit<LayoutKey, "legends"> & { layoutPosition?: { col?: number } })[],
+): LayoutKey[] {
+  return keys.map((key, col) => {
+    const lp = key.layoutPosition;
+    return {
+      ...key,
+      ...(lp
+        ? {
+            layoutPosition: {
+              ...lp,
+              ...(lp.row !== undefined ? {} : { row }),
+              ...(lp.col !== undefined ? {} : { col }),
+            },
+          }
+        : {}),
+    } as LayoutKey;
+  });
+}
+
 function insertGap(gapCol: number, row: LayoutKey[] | undefined): LayoutKey[] {
   return (row as LayoutKey[]).map((def, col) => ({
     ...def,
diff --git a/frontend/src/ts/input/handlers/keydown.ts b/frontend/src/ts/input/handlers/keydown.ts
index 2d74f05b6a8e..c63b94a503bf 100644
--- a/frontend/src/ts/input/handlers/keydown.ts
+++ b/frontend/src/ts/input/handlers/keydown.ts
@@ -88,7 +88,6 @@ export async function handleOppositeShift(event: KeyboardEvent): Promise<void> {
     }
 
     const keycode = KeyConverter.layoutKeyToKeycode(event.key, keymapLayout);
-
     setCorrectShiftUsed(
       keycode === undefined ? true : ShiftTracker.isUsingOppositeShift(keycode),
     );
diff --git a/frontend/src/ts/states/test.ts b/frontend/src/ts/states/test.ts
index 7c27526627ca..4724fdf40db8 100644
--- a/frontend/src/ts/states/test.ts
+++ b/frontend/src/ts/states/test.ts
@@ -16,8 +16,8 @@ import { getData as getCustomTextData } from "../test/custom-text";
 import { QuoteWithTextSplit } from "../types/quotes";
 import { getLayout } from "../utils/json-data";
 import { mirrorLayoutKeys } from "../utils/key-converter";
-import { sleep } from "../utils/misc";
 import { canQuickRestart } from "../utils/quick-restart";
+import { promiseWithResolvers } from "../utils/misc";
 import { replaceUnderscoresWithSpaces } from "../utils/strings";
 import { getActivePage, getCustomTextIndicator } from "./core";
 
@@ -121,22 +121,40 @@ keymapEvent.useListener(({ mode, key, correct }) => {
   }
 });
 
-async function _getKeymapLayout(): Promise<LayoutObject> {
-  while (
-    keymapLayoutObject.state !== "ready" &&
-    keymapLayoutObject.state !== "errored"
-  ) {
-    await sleep(10);
-  }
+let layoutPromise = promiseWithResolvers();
+
+async function waitForLayoutReady(): Promise<void> {
+  if (keymapLayoutObject.state === "ready") return;
+
   if (keymapLayoutObject.state === "errored") {
     throw new Error("Failed to load keymap layout");
   }
-  return keymapLayoutObject();
+
+  await layoutPromise.promise;
 }
 
+createEffect(() => {
+  const state = keymapLayoutObject.state;
+  if (state === "ready") {
+    layoutPromise.resolve();
+    layoutPromise.reset();
+  }
+  if (state === "errored") {
+    layoutPromise.reject(new Error("Failed to load keymap layout"));
+    layoutPromise.reset();
+  }
+});
+
 /**
  * Used for non reactive access. Do not use in Solid components.
  */
 export const __nonReactive = {
-  getKeymapLayout: _getKeymapLayout,
+  getKeymapLayout: async (): Promise<LayoutObject> => {
+    await waitForLayoutReady();
+    const result = keymapLayoutObject();
+    if (result === undefined) {
+      throw new Error("Failed to load keymap layout");
+    }
+    return result;
+  },
 };
diff --git a/frontend/src/ts/test/shift-tracker.ts b/frontend/src/ts/test/shift-tracker.ts
index 6022e356ce08..094fd5ee7c8c 100644
--- a/frontend/src/ts/test/shift-tracker.ts
+++ b/frontend/src/ts/test/shift-tracker.ts
@@ -14,6 +14,7 @@ export function isUsingOppositeShift(keycode: Keycode): boolean {
   }
 
   const { leftSide, rightSide } = KeyConverter.keycodeToKeyboardSide(keycode);
+
   if (!leftSide && !rightSide) {
     return true;
   }

From 89004151deed4ae95a31fc9f70a764aadceceff4 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Fri, 26 Jun 2026 14:16:41 +0200
Subject: [PATCH 59/61] fix tests

---
 frontend/__tests__/__harness__/mock-static.ts | 21 +++++++++++++++++++
 frontend/vitest.config.ts                     |  1 +
 2 files changed, 22 insertions(+)
 create mode 100644 frontend/__tests__/__harness__/mock-static.ts

diff --git a/frontend/__tests__/__harness__/mock-static.ts b/frontend/__tests__/__harness__/mock-static.ts
new file mode 100644
index 000000000000..e3de6fac6082
--- /dev/null
+++ b/frontend/__tests__/__harness__/mock-static.ts
@@ -0,0 +1,21 @@
+import { readFileSync } from "fs";
+import { resolve } from "path";
+import { fileURLToPath } from "url";
+import { vi } from "vitest";
+
+const BASE_DIR = resolve(fileURLToPath(import.meta.url), "../../../static");
+
+async function readJson<T>(filePath: string): Promise<T> {
+  const fullPath = resolve(BASE_DIR, filePath.replace(/^\//, ""));
+  const data = readFileSync(fullPath, "utf-8");
+  return JSON.parse(data) as T;
+}
+
+vi.mock("../../src/ts/utils/json-data", async (importOriginal) => {
+  const original = (await importOriginal()) as Record<string, unknown>;
+
+  return {
+    ...original,
+    getLayout: async (name: string) => readJson(`/layouts/${name}.json`),
+  };
+});
diff --git a/frontend/vitest.config.ts b/frontend/vitest.config.ts
index bd7b19d3f543..2ec39aa7c064 100644
--- a/frontend/vitest.config.ts
+++ b/frontend/vitest.config.ts
@@ -29,6 +29,7 @@ export const projects: UserWorkspaceConfig[] = [
         "__tests__/__harness__/mock-dom.ts",
         "__tests__/__harness__/mock-firebase.ts",
         "__tests__/__harness__/mock-env-config.ts",
+        "__tests__/__harness__/mock-static.ts",
       ],
     },
     plugins,

From 32ae0c0ddc0f9fdff9e579c72e1e370aab1af4d9 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Fri, 26 Jun 2026 14:24:39 +0200
Subject: [PATCH 60/61] homing indicator

---
 frontend/src/ts/components/pages/test/Keymap.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/frontend/src/ts/components/pages/test/Keymap.tsx b/frontend/src/ts/components/pages/test/Keymap.tsx
index 6da05f4493e4..abcb1361c193 100644
--- a/frontend/src/ts/components/pages/test/Keymap.tsx
+++ b/frontend/src/ts/components/pages/test/Keymap.tsx
@@ -196,11 +196,8 @@ function Key(
             <Show when={props.isHoming}>
               <div
                 class={cn(
-                  "bg-em-xs absolute bottom-1 left-auto h-px w-2 rounded",
+                  "bg-em-xs absolute bottom-0.75 left-auto h-0.5 w-2 rounded bg-bg",
                 )}
-                style={{
-                  "background-color": "var(--keycolor)",
-                }}
               ></div>
             </Show>
           </>

From 9ef09f0bbe89da4769dc405265c520f008723344 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Fri, 26 Jun 2026 14:28:43 +0200
Subject: [PATCH 61/61] trigger