feat(sdk-app): keyboard shortcuts with on-screen helper#1732
Merged
jeffredodd merged 2 commits intomainfrom May 8, 2026
Merged
feat(sdk-app): keyboard shortcuts with on-screen helper#1732jeffredodd merged 2 commits intomainfrom
jeffredodd merged 2 commits intomainfrom
Conversation
This was referenced May 7, 2026
jeffredodd
changed the title
jeffredodd
requested review from
dmortal,
hukid,
krisxcrash,
mariechatfield and
serikjensen
as code owners
serikjensen
approved these changes
May 8, 2026
jeffredodd
force-pushed
the
feat/sdk-app-manual-token-mode
branch
2 times, most recently
from
bdcd454 to
470e9da
Compare
Pressing \ toggles the TopBar, Sidebar, and Events Log so the rendered SDK component takes the full viewport — useful for screen shares and demos. Pressing Escape (or clicking the floating "Show chrome" pill in the bottom-left) restores. State persists in localStorage. The keydown listener is filtered to ignore inputs, textareas, contenteditables, and elements with role="textbox"/"combobox", so typing \ in a search field still types a backslash. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- Press ? to open a modal listing all shortcuts. - New Cmd/Ctrl shortcuts: , (settings), . (design/dev toggle), ; (cycle theme: system → light → dark). - Sidebar hint above the search input opens the helper on click. - useGlobalShortcut now supports an optional `modifier: 'mod'` flag (Cmd on Mac / Ctrl elsewhere); modifier shortcuts fire even when focus is in an input. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
jeffredodd
force-pushed
the
feat/sdk-app-hide-chrome-shortcut
branch
from
26692fd to
9d86618
Compare
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
Summary
?key opens a modal listing every keyboard shortcut. The sidebar now shows a smallPress ? for shortcutshint above the search input that also opens the modal on click.?— Show keyboard shortcuts (toggle)\— Hide chrome (TopBar / Sidebar / Events Log)Esc— Restore chrome when hidden, or close the shortcut modalCmd/Ctrl + ,— Open settingsCmd/Ctrl + .— Toggle design / developmentCmd/Ctrl + ;— Cycle theme (system → light → dark)useGlobalShortcutgained an optionalmodifier: 'mod'flag (Cmd on Mac, Ctrl elsewhere). Modifier shortcuts fire even when focus is in an input; un-modified shortcuts still ignore typing targets so plain?/\don't fire from the search box.⌘on Mac,Ctrlon Windows/Linux.Screenshots
Why
Two motivations bundled here:
\is the lightweight alternative to Feature 4 (selectable demo chromes).The punctuation choice for the modifier shortcuts (
,.;) was deliberate: letter combos with Cmd/Ctrl conflict with browser defaults that often can't be intercepted (e.g.Cmd+Tis reserved by Chrome on macOS). Punctuation under Cmd/Ctrl has no OS or browser conflicts on Mac/Windows/Linux.Cmd+,doubles as the macOS preferences convention.Test plan
Chrome toggle (commit 1):
/category/Componentroute, press\— TopBar, Sidebar, Events Log disappear; floating "Show chrome" pill appears bottom-left.\again, orEsc, or click the pill — chrome restored.\— chrome stays visible and the field receives the character.Cmd+\/Ctrl+\/Alt+\do not trigger the toggle.Shortcut helper (commit 2):
?for shortcuts" hint is visible above the sidebar search input, left-aligned.?outside any input — modal opens; press?again orEsc— modal closes.?inside the sidebar search field — modal does NOT open; field receives the character.\, then press?— modal still opens.Escdismisses (and restores chrome).⌘on Mac,Ctrlon Windows/Linux.Modifier shortcuts (commit 2):
Cmd/Ctrl + ,opens the settings panel.Cmd/Ctrl + .toggles between Development and Design mode (URL switches between/and/design).Cmd/Ctrl + ;cycles theme: system → light → dark → system. Thedata-themeattribute on<html>updates accordingly.Branch base
This branch stacks on top of
feat/sdk-app-manual-token-mode(#1727). Re-target toal/create-secondary-ui-componentsonce that PR merges.🤖 Generated with Claude Code