{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ink/help",
  "title": "Help",
  "description": "Auto-generated help panel from a keymap",
  "dependencies": [
    "ink"
  ],
  "registryDependencies": [
    "https://termcn.dev/r/ink/terminal-style.json",
    "https://termcn.dev/r/ink/use-theme.json",
    "https://termcn.dev/r/ink/use-unicode.json"
  ],
  "files": [
    {
      "path": "registry/ui/help.tsx",
      "content": "import { Box, Text } from \"ink\";\n\nimport { useTheme } from \"@/hooks/use-theme\";\nimport { useUnicode } from \"@/hooks/use-unicode\";\nimport { resolveBorderStyle } from \"@/lib/terminal-style\";\n\nexport interface HelpProps {\n  keymap: Record<string, string>;\n  title?: string;\n  compact?: boolean;\n}\n\nexport const Help = ({ keymap, title, compact = false }: HelpProps) => {\n  const unicode = useUnicode();\n  const theme = useTheme();\n  const entries = Object.entries(keymap);\n\n  if (compact) {\n    const parts = entries.map(([key, action]) => `${key}: ${action}`);\n    return (\n      <Box gap={1} flexWrap=\"wrap\" aria-role=\"toolbar\">\n        <Text aria-label={title ?? \"Help\"}>{\"\"}</Text>\n        {title && (\n          <Text color={theme.colors.primary} bold>\n            {title} |\n          </Text>\n        )}\n        <Text color={theme.colors.mutedForeground}>\n          {parts.join(unicode ? \" · \" : \" - \")}\n        </Text>\n      </Box>\n    );\n  }\n\n  const keyWidth = Math.max(...entries.map(([k]) => k.length), 3);\n\n  return (\n    <Box\n      flexDirection=\"column\"\n      borderStyle={resolveBorderStyle(\"round\", unicode)}\n      borderColor={theme.colors.border}\n      paddingX={1}\n      gap={0}\n      aria-role=\"toolbar\"\n    >\n      <Text aria-label={title ?? \"Help\"}>{\"\"}</Text>\n      {title && (\n        <Text color={theme.colors.primary} bold>\n          {title}\n        </Text>\n      )}\n      {entries.map(([key, action]) => (\n        <Box key={key} gap={2}>\n          <Box\n            borderStyle={resolveBorderStyle(\"single\", unicode)}\n            borderColor={theme.colors.primary}\n            paddingX={1}\n            minWidth={keyWidth + 4}\n          >\n            <Text color={theme.colors.primary} bold>\n              {key}\n            </Text>\n          </Box>\n          <Text color={theme.colors.foreground}>{action}</Text>\n        </Box>\n      ))}\n    </Box>\n  );\n};\n",
      "type": "registry:ui"
    }
  ],
  "categories": [
    "utility"
  ],
  "type": "registry:ui"
}