# Shortcuts dialog

Every keyboard shortcut, grouped by where it works, printed for this platform (⌘ on a Mac, Ctrl elsewhere). List only shortcuts that are bound: this is a reference, not a wish list. Usually opened with "?".

- Registry name: `shortcuts-dialog` (`@candor/shortcuts-dialog`)
- Tier: Pro. Installing it needs a Pro, Premium or Team licence key: the person runs `npx candor-ui key <key>` themselves; never ask for the key in chat or write it to a file.
- Docs: https://candor.themethodic.com/docs/shortcuts-dialog

## Install

```bash
npx candor-ui add shortcuts-dialog
```

Run `npx candor-ui@latest init` once first (https://candor.themethodic.com/get-started.md). Without the CLI: `npx shadcn@latest add @candor/shortcuts-dialog`.
It brings in: dialog, kbd, locale, use-shortcut.

## Example

```tsx
"use client"

import * as React from "react"
import { Keyboard } from "lucide-react"
import { ShortcutsDialog, type ShortcutGroup } from "@/components/shortcuts-dialog"
import { Button } from "@/components/ui/button"

const groups: ShortcutGroup[] = [
  {
    heading: "Anywhere",
    items: [
      { combo: "mod+k", label: "Search or jump" },
      { combo: "mod+shift+o", label: "New thread" },
      { combo: "?", label: "Keyboard shortcuts" },
    ],
  },
  {
    heading: "In a thread",
    items: [
      { combo: "mod+enter", label: "Send" },
      { combo: "escape", label: "Stop the agent" },
    ],
  },
]

export default function Example() {
  const [open, setOpen] = React.useState(false)
  return (
    <>
      <Button variant="outline" onClick={() => setOpen(true)}>
        <Keyboard /> Keyboard shortcuts
      </Button>
      <ShortcutsDialog open={open} onOpenChange={setOpen} groups={groups} />
    </>
  )
}
```

## <ShortcutsDialog>

Props:

- `open: boolean`: Whether the dialog is showing.
- `onOpenChange: (open: boolean) => void`: Called when the dialog opens or closes.
- `groups: ShortcutGroup[]`: The bound shortcuts, under headings for where they work.

## Strings (`shortcutsDialog`)

The fixed words, English by default. Override any of them under `shortcutsDialog` in `<LocaleProvider strings={{ shortcutsDialog: { … } }}>`; the table is exported as `shortcutsDialogStrings`.

- `title`: Keyboard shortcuts
- `description`: Press ? anywhere outside a text field to open this.

## Types

### ShortcutGroup

```ts
{ heading: string; items: { combo: string; label: string }[] }
```

## Rules for using Candor UI

- Components take plain typed data. Never pass model output as HTML or render it as a link; messages are typed blocks.
- A control that can't be used says why: wrap it in `<Locked reason="…">`, don't just disable it.
- Don't show a value you don't have: leave it out (it renders as —) rather than guess. An estimate is labelled as one.
- Nothing is pre-selected in a decision a person makes, and the agent is named from your app's data, never from model output.
- Your app's words go in `LocaleProvider` (fixed strings) and `TermsProvider` (nouns); entity kinds and agent roles in `EntityKindsProvider` and `AgentRolesProvider`.