{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "grok-shortcuts",
  "title": "Grok Shortcuts",
  "description": "Keyboard Shortcuts modal (Ctrl+x) — nested ◆/› categories with key bindings.",
  "files": [
    {
      "path": "registry/brainless/grok/grok-shortcuts.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * GrokShortcuts — Grok CLI's Keyboard Shortcuts modal (Ctrl+x).\n *\n * Nested categories with ◆ rows for expanded sections and › for collapsed\n * ones. Arrow keys / e expand; Esc closes.\n */\nconst BORDER = \"#808080\";\nconst FG = \"#e1e1e1\";\nconst MUTED = \"#8b8b90\";\nconst DIM = \"#6c6c6c\";\nconst MARK = \"#808080\"; // 38;5;8 — ◆ / › markers\n\nexport type GrokShortcut = { action: string; keys: string };\nexport type GrokShortcutGroup = {\n  id: string;\n  label: string;\n  items: GrokShortcut[];\n  /** Display count when collapsed; defaults to items.length. */\n  count?: number;\n};\n\nconst DEFAULT_GROUPS: GrokShortcutGroup[] = [\n  {\n    id: \"essentials\",\n    label: \"Essentials\",\n    items: [\n      { action: \"Send\", keys: \"Enter\" },\n      { action: \"Focus scrollback\", keys: \"Tab\" },\n      { action: \"Cancel turn\", keys: \"Ctrl+c\" },\n      { action: \"Cycle mode (Normal / Plan / Always-approve)\", keys: \"Shift+Tab\" },\n      { action: \"Quit\", keys: \"Ctrl+q / Ctrl+d\" },\n      { action: \"Command palette\", keys: \"Ctrl+p / ?\" },\n      { action: \"Keyboard shortcuts\", keys: \"Ctrl+x / Ctrl+.\" },\n      { action: \"Open the settings modal\", keys: \"F2 / Ctrl+, / Cmd+,\" },\n    ],\n  },\n  {\n    id: \"input\",\n    label: \"Input\",\n    items: [\n      {\n        action: \"Send now while running (interject)\",\n        keys: \"Ctrl+Enter / Ctrl+i\",\n      },\n      {\n        action: \"Voice dictation (Ctrl+Space / F8)\",\n        keys: \"Ctrl+Space / F8\",\n      },\n      { action: \"Search prompt history\", keys: \"Ctrl+r\" },\n      { action: \"Toggle multiline\", keys: \"Ctrl+m\" },\n      {\n        action: \"Shell mode (type ! on empty prompt)\",\n        keys: \"!\",\n      },\n    ],\n  },\n  // Counts confirmed live; item lists need a re-auth pass (probe hit /logout).\n  { id: \"nav\", label: \"Conversation Navigation\", count: 10, items: [] },\n  { id: \"actions\", label: \"Conversation Actions\", count: 4, items: [] },\n  { id: \"panels\", label: \"Panels\", count: 6, items: [] },\n  {\n    id: \"session\",\n    label: \"Session\",\n    items: [\n      { action: \"New session\", keys: \"Ctrl+n\" },\n      { action: \"Resume session\", keys: \"Ctrl+s\" },\n      { action: \"New worktree\", keys: \"Ctrl+w\" },\n    ],\n  },\n  { id: \"dashboard\", label: \"Dashboard\", count: 17, items: [] },\n];\n\nexport function GrokShortcuts({\n  groups = DEFAULT_GROUPS,\n  defaultExpanded = \"essentials\",\n  onClose,\n  className,\n}: {\n  groups?: GrokShortcutGroup[];\n  defaultExpanded?: string | null;\n  onClose?: () => void;\n  className?: string;\n}) {\n  const [expanded, setExpanded] = React.useState<string | null>(defaultExpanded);\n\n  return (\n    <div\n      className={cn(\n        \"overflow-hidden rounded-sm border font-mono text-[13px] leading-[1.5]\",\n        className,\n      )}\n      style={{ borderColor: BORDER, background: \"#1a1a1a\" }}\n      role=\"dialog\"\n      aria-label=\"Keyboard Shortcuts\"\n    >\n      <div\n        className=\"flex items-center justify-between border-b px-3 py-1.5\"\n        style={{ borderColor: BORDER, color: MUTED }}\n      >\n        <span style={{ color: FG }}>Keyboard Shortcuts</span>\n        <button\n          type=\"button\"\n          aria-label=\"Close\"\n          onClick={onClose}\n          className=\"rounded-none px-1 outline-none hover:text-white focus-visible:ring-1 focus-visible:ring-white/40\"\n          style={{ color: DIM }}\n        >\n          [✗]\n        </button>\n      </div>\n\n      <div className=\"px-3 py-2 text-[12px]\" style={{ color: DIM }}>\n        / to search\n      </div>\n\n      <div className=\"border-t\" style={{ borderColor: BORDER }} />\n\n      <ul className=\"max-h-[22rem] overflow-auto py-1.5\">\n        {groups.map((g) => {\n          const open = expanded === g.id;\n          const count = g.count ?? g.items.length;\n          return (\n            <li key={g.id}>\n              <button\n                type=\"button\"\n                aria-expanded={open}\n                onClick={() => setExpanded(open ? null : g.id)}\n                className=\"flex w-full items-baseline gap-2 px-3 py-0.5 text-left outline-none hover:bg-white/5 focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-white/30\"\n                style={{ color: FG }}\n              >\n                <span\n                  aria-hidden\n                  className=\"inline-block w-[2ch] shrink-0\"\n                  style={{ color: open ? FG : MARK }}\n                >\n                  {open ? \"◆\" : \"›\"}\n                </span>\n                <span>\n                  {g.label}\n                  {!open ? (\n                    <span style={{ color: DIM }}> ({count})</span>\n                  ) : null}\n                </span>\n              </button>\n\n              {open ? (\n                g.items.length ? (\n                  <ul className=\"pb-1\">\n                    {g.items.map((item) => (\n                      <li\n                        key={item.action}\n                        className=\"flex items-baseline justify-between gap-4 py-0.5 pr-3 pl-7\"\n                      >\n                        <span className=\"flex min-w-0 items-baseline gap-2\">\n                          <span aria-hidden style={{ color: MARK }}>\n                            ◆\n                          </span>\n                          <span style={{ color: MUTED }}>{item.action}</span>\n                        </span>\n                        <span\n                          className=\"shrink-0 tabular-nums\"\n                          style={{ color: FG }}\n                        >\n                          {item.keys}\n                        </span>\n                      </li>\n                    ))}\n                  </ul>\n                ) : (\n                  <p\n                    className=\"px-3 pb-1 pl-7 text-[12px]\"\n                    style={{ color: DIM }}\n                  >\n                    {count} shortcuts — expand details after re-auth capture\n                  </p>\n                )\n              ) : null}\n            </li>\n          );\n        })}\n      </ul>\n\n      <div\n        className=\"border-t px-3 py-1.5 text-[11px]\"\n        style={{ borderColor: BORDER, color: DIM }}\n      >\n        ↑/↓ nav · e/Space/→ expand · ← collapse · Esc close\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/brainless/grok/grok-shortcuts.tsx"
    }
  ],
  "type": "registry:ui"
}