improve: Key Component scale transition

[pongstr]

• improve: smoother scale transition when hovering
• feat: toggle select+deselect, allows users to deselect a currently selected key

Storybook before+after

before	after

desktop build (macos)

https://github.com/user-attachments/assets/fbcd411f-f414-4723-bab7-2d5baabc25d7

[netlify[bot]]

✅ Deploy Preview for zmk-studio ready!

Name	Link
🔨 Latest commit	e0dbc38e236fe8838f083d91f8f8faeacd19ef68
🔍 Latest deploy log	https://app.netlify.com/projects/zmk-studio/deploys/6852967b4d7635000821d059
😎 Deploy Preview	https://deploy-preview-108.preview.zmk.studio
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[filiptdz]

Solves the issues described in https://github.com/zmkfirmware/zmk-studio/pull/99 and https://github.com/zmkfirmware/zmk-studio/issues/98

[pongstr]

I'm not sure about the willChange tweak, given that did improve the rendering for some folks

will-change might not be an ideal solution, especially when applied to frequently repeated elements (like <Key/>), as it can significantly increase resource usage.

I'm uncertain about that particular tweak without broader testing/feedback across more browsers/platforms.

I've tested this proposal on

• desktop app on macOS
• web app on macOS and windows

the improvements are apparent, i'll test both on my Debian machine tomorrow.

btw, it'd be nice if PR can also have desktop-app build pipeline to make proposals accessible for testing, setting up tauri on windows is quite laborious 😄

Anyway, let me know if there's anything else I can do to get this PR to move forward. Thanks!