feat: Export keymap as ZMK .keymap file snippet

[Copilot]

Adds a popup export dialog on the Keymap page that generates a ZMK DTS .keymap snippet from the current in-memory keymap, with a copy-to-clipboard button.

Changes

• src/lib/zmkExport.ts — Core export logic:

  • getZMKKeycodeName(hidUsage) — HID usage → ZMK keycode name (letters, N1–N0 number row, F1–F24, modifiers, consumer/media, modifier wrapping e.g. LS(A))
  • bindingToZMKString(binding, behavior) — binding → ZMK DTS token (&kp A, &mo 1, &lt 1 A, &bt BT_CLR, &out OUT_USB, &mkp LCLK, &mmv MOVE_UP, etc.)
  • generateZMKKeymapContent(params) — assembles full / { keymap { ... } } block; groups bindings into rows by physical key Y position; includes sensor-bindings when sensor data provided

• src/components/KeymapExportDialog.tsx — Radix Dialog showing the generated snippet in a monospace block with copy button (Copied / Copy failed feedback states)

• src/pages/KeymapPage.tsx — Export button added to action bar when connected; exportContent computed via useMemo

Example output

/ {
    keymap {
        compatible = "zmk,keymap";
        Base {
            display-name = "Base";
            bindings = <
                &kp Q &kp W &kp E &kp R &kp T
                &kp A &kp S &kp D &kp F &kp G
            >;
            sensor-bindings = <&inc_dec_kp C_VOL_UP C_VOL_DN>;
        };
        Lower {
            display-name = "Lower";
            bindings = <
                &trans &trans &trans &trans &trans
                &bt BT_CLR &bt BT_SEL 0 &trans &trans &trans
            >;
        };
    };
};

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[github-actions]

🚀 Cloudflare Workers Preview

Preview URL: https://9e056093-dya-studio.cormoran707.workers.dev

_{Deployed from commit 572cbbe}