feat: Add visual keymap editor to workbench

[yoichiro]

Summary

• Add Visual Keymap Editor to the firmware workbench — when a keymap .c file is selected, Code Editor / Visual Editor tabs appear above the editor area
• Click a key on the keyboard visualization → CustomKey popover opens (KEY / HOLD-TAP / CUSTOM tabs) → select a keycode → keymap.c is updated
• Layer management: switch layers, add new layers (filled with KC_NO), delete layers

New files

• VisualKeymapEditor (src/components/workbench/visualeditor/VisualKeymapEditor.tsx) — Main container with local state management for optimistic updates
• VisualKeycap (src/components/workbench/visualeditor/VisualKeycap.tsx) — Individual keycap rendering with keycode label
• LayerSelector (src/components/workbench/visualeditor/LayerSelector.tsx) — Layer tabs with add/delete buttons
• VisualKeymapEditor.scss — Styles reusing the 3D keycap look from LayoutPreviewDialog

Modified files

• Breadboard.tsx — Added EditorWithVisualTab wrapper component that handles Code/Visual tab switching. Tabs only appear when a .c keymap file is selected.

Key design decisions

• Local state with optimistic updates — VisualKeymapEditor maintains its own ParsedKeymap state, updates it immediately on edits, and syncs back from props when external code changes (e.g., switching back from Code Editor). This avoids the async Redux update delay.
• Key count mismatch guard — Only renders min(layoutKeyCount, keymapKeyCount) keys to prevent index-out-of-bounds errors
• Safe keycode resolution — resolveKeyForPopover() wraps keycode lookup in try/catch, returning null for unrecognized codes
• Popover auto-close on layer switch — Prevents stale popover state

Test plan

• npm run type-check — Clean
• npm test -- --run — All 1097 tests pass
• Open Workbench → create project → generate files → select keymap.c
• Verify Code Editor / Visual Editor tabs appear
• Switch to Visual Editor → verify keyboard layout renders
• Click a key → verify CustomKey popover appears near the key
• Select a keycode → verify the key label updates immediately
• Try HOLD/TAP tab → verify composite keycodes work
• Switch layer tabs → verify different layers shown
• Add/delete layers → verify they work
• Switch to Code Editor → verify keymap.c reflects visual edits
• Edit in Code Editor → switch to Visual Editor → verify changes appear
• Select a non-keymap file (e.g., keyboard.json) → verify tabs do NOT appear

🤖 Generated with Claude Code