# Dev Tools Configuration

This directory contains configuration files for the Xbox.JS developer tools.

## Quick Start

### Using Team Defaults

Team-wide shortcuts are configured in `shortcuts.default.json` and apply to all developers by default.

### Customizing Your Shortcuts

You can customize shortcuts directly in the DevTools UI using the **Download** button to save your local configuration, or manually:

1. Copy `shortcuts.default.json` to `shortcuts.local.json`
2. Modify `shortcuts.local.json` with your preferred shortcuts
3. Your local file is gitignored and won't be committed

```bash
cp apps/play-xbox/public/.devtools/shortcuts.default.json apps/play-xbox/public/.devtools/shortcuts.local.json
```

**Tip:** Use the Download button in the keyboard shortcuts panel to automatically save your current configuration to `shortcuts.local.json`.

### Config Priority

Shortcuts are loaded with the following priority (highest to lowest):

1. **Runtime config** - Changes made in the DevTools UI (stored in session storage)
2. **Local config** - `.devtools/shortcuts.local.json` (gitignored, your personal overrides)
3. **Team default** - `.devtools/shortcuts.default.json` (committed, team-wide config)

## Available Actions

| Action | Description | Default Key |
|--------|-------------|-------------|
| `toggleTheme` | Toggle light/dark theme | `KeyT` |
| `toggleDensity` | Toggle high/low density | `KeyD` |
| `togglePseudoLocale` | Toggle pseudo-localization | `KeyP` |
| `toggleFeedback` | Open feedback dialog | `KeyF` |
| `toggleHotkeys` | Show keyboard shortcuts | `Slash` (/) |
| `toggleFocusableHighlights` | Show focusable element highlights | `KeyS` |
| `toggleColumns` | Toggle column grid overlay | `KeyG` |
| `toggleInfoPanel` | Toggle responsive info panel | `KeyI` |
| `toggleBreakpointNotifications` | Toggle breakpoint notifications | `KeyB` |

All shortcuts use `Ctrl+Alt` (Windows/Linux) or `Ctrl+Option` (Mac) as modifiers.

## File Format

```json
{
  "_comment": "Optional comment for documentation",
  "toggleTheme": "KeyT",
  "toggleDensity": "KeyD",
  "toggleFeedback": null
}
```

**Note:** You don't need to specify all keys. Only define the keys you want to override - missing keys will use the team defaults. Set to `null` to disable a shortcut.

### Key Code Format

Use JavaScript `KeyboardEvent.code` values:
- Letter keys: `KeyA` through `KeyZ`
- Number keys: `Digit0` through `Digit9`
- Special keys: `Slash`, `Backslash`, `Comma`, `Period`, `Space`, etc.
