feat(editor): integrate Key23 keycap design system & keyboard timeline track
Motivation
I use Cap daily for screen recordings. The current keyboard shortcut display shows plain text in a rounded box — functional but visually flat. This PR integrates Key23, an open-source keycap design system I maintain, to offer themed keycap styles in the editor.
What this PR does
Frontend (SolidJS/TypeScript):
Adds a Keyboard tab in the editor sidebar for configuring keycap appearance
Adds 5 keycap styles (minimal, apple, pbt, retro, m0116) and 6 color themes
Adds a keyboard-overlay component that renders styled keycaps on the video canvas
Adds a KeyboardTrack in the timeline for managing keyboard shortcut segments
2D/3D toggle controls keycap depth rendering
Backend (Rust):
Extends KeyboardSettings in configuration.rs with style, theme, keycap_mode, show_chassis
Adds theme-aware color mapping in keyboard.rs so exported videos use matching colors
Known limitations & Future work
Preview vs Export parity: The editor preview renders SVG keycaps (with depth, gradients, etc.), while the Rust native video renderer uses rounded rectangles with matching theme colors. Visual theme/color is consistent, but full SVG rendering in the wgpu pipeline is left as a future iteration.
Keyboard track is additive: Extends the existing keyboard layer without modifying or removing core behavior.
Testing done
Verified keycap styles render correctly in editor preview
Verified theme colors apply in both preview and sidebar config
Verified 2D/3D toggle works across all render locations
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
feat(editor): integrate Key23 keycap design system & keyboard timeline track
Motivation
I use Cap daily for screen recordings. The current keyboard shortcut display shows plain text in a rounded box — functional but visually flat. This PR integrates Key23, an open-source keycap design system I maintain, to offer themed keycap styles in the editor.
What this PR does
Frontend (SolidJS/TypeScript):
Backend (Rust):
Known limitations & Future work
Testing done
Related Issue: #2409