{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "grok-settings",
  "title": "Grok Settings",
  "description": "Settings modal (F2) — Appearance / Mouse sections with ▸ rows, on/off values, and nested › pickers.",
  "files": [
    {
      "path": "registry/brainless/grok/grok-settings.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * GrokSettings — Grok CLI's Settings modal (F2 / Ctrl+,).\n *\n * Captured grammar (v0.2.93): section headers (`Appearance`, `Mouse`), rows\n * with a `▸` marker, current value on the right (`on` / `off` / theme name ›).\n */\nconst BORDER = \"#505058\";\nconst FG = \"#e1e1e1\";\nconst MUTED = \"#8b8b90\";\nconst DIM = \"#6c6c6c\";\n\nexport type GrokSettingValue = string | boolean;\n\nexport type GrokSetting = {\n  id: string;\n  label: string;\n  value: GrokSettingValue;\n  /** Show a › affordance (nested picker). */\n  expandable?: boolean;\n};\n\nexport type GrokSettingSection = {\n  id: string;\n  label: string;\n  items: GrokSetting[];\n};\n\nconst DEFAULT_SECTIONS: GrokSettingSection[] = [\n  {\n    id: \"appearance\",\n    label: \"Appearance\",\n    items: [\n      { id: \"compact\", label: \"Compact mode\", value: false },\n      { id: \"timestamps\", label: \"Show timestamps\", value: true },\n      { id: \"vim-input\", label: \"Disable vim input mode\", value: true },\n      { id: \"vim-scroll\", label: \"Vim scrollback navigation\", value: false },\n      { id: \"theme\", label: \"Theme\", value: \"Grok Night\", expandable: true },\n      {\n        id: \"auto-dark\",\n        label: \"Auto dark theme\",\n        value: \"Grok Night\",\n        expandable: true,\n      },\n      {\n        id: \"auto-light\",\n        label: \"Auto light theme\",\n        value: \"Grok Day\",\n        expandable: true,\n      },\n      {\n        id: \"mermaid\",\n        label: \"Render Mermaid diagrams\",\n        value: \"Auto\",\n        expandable: true,\n      },\n      { id: \"thoughts-width\", label: \"Max thoughts width\", value: \"120\" },\n      { id: \"thinking-blocks\", label: \"Show thinking blocks\", value: true },\n      { id: \"manual-folds\", label: \"Respect manual folds\", value: false },\n      { id: \"group-tools\", label: \"Group tool calls\", value: true },\n    ],\n  },\n  {\n    id: \"mouse\",\n    label: \"Mouse\",\n    items: [\n      { id: \"mouse-support\", label: \"Enable mouse support\", value: true },\n    ],\n  },\n];\n\nfunction formatValue(v: GrokSettingValue) {\n  if (typeof v === \"boolean\") return v ? \"on\" : \"off\";\n  return v;\n}\n\nexport function GrokSettings({\n  sections = DEFAULT_SECTIONS,\n  defaultActive = \"timestamps\",\n  onClose,\n  onToggle,\n  className,\n}: {\n  sections?: GrokSettingSection[];\n  defaultActive?: string;\n  onClose?: () => void;\n  onToggle?: (id: string) => void;\n  className?: string;\n}) {\n  const flat = sections.flatMap((s) => s.items);\n  const [active, setActive] = React.useState(defaultActive);\n  const [values, setValues] = React.useState<Record<string, GrokSettingValue>>(\n    () => Object.fromEntries(flat.map((i) => [i.id, i.value])),\n  );\n\n  function activate(id: string) {\n    setActive(id);\n  }\n\n  function toggle(id: string) {\n    setValues((prev) => {\n      const cur = prev[id];\n      if (typeof cur === \"boolean\") {\n        const next = !cur;\n        onToggle?.(id);\n        return { ...prev, [id]: next };\n      }\n      onToggle?.(id);\n      return prev;\n    });\n  }\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=\"Settings\"\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 }}>Settings</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=\"max-h-[24rem] overflow-auto pb-2\">\n        {sections.map((section) => (\n          <div key={section.id} className=\"mt-1\">\n            <div\n              className=\"px-3 py-1 text-[12px]\"\n              style={{ color: DIM }}\n            >\n              {section.label}{\" \"}\n              <span aria-hidden>{\"─\".repeat(12)}</span>\n            </div>\n            <ul>\n              {section.items.map((item) => {\n                const isActive = active === item.id;\n                const display = formatValue(values[item.id] ?? item.value);\n                return (\n                  <li key={item.id}>\n                    <button\n                      type=\"button\"\n                      onClick={() => {\n                        activate(item.id);\n                        if (typeof (values[item.id] ?? item.value) === \"boolean\") {\n                          toggle(item.id);\n                        }\n                      }}\n                      onFocus={() => activate(item.id)}\n                      className=\"flex w-full items-baseline justify-between gap-4 px-3 py-0.5 text-left outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-white/30\"\n                      style={{\n                        background: isActive ? \"rgba(255,255,255,0.06)\" : undefined,\n                        color: FG,\n                      }}\n                    >\n                      <span className=\"flex min-w-0 items-baseline gap-2\">\n                        <span\n                          aria-hidden\n                          className=\"inline-block w-[2ch] shrink-0\"\n                          style={{ color: isActive ? FG : \"transparent\" }}\n                        >\n                          ▸\n                        </span>\n                        <span className=\"truncate\" style={{ color: MUTED }}>\n                          {item.label}\n                        </span>\n                      </span>\n                      <span\n                        className=\"shrink-0 tabular-nums\"\n                        style={{ color: FG }}\n                      >\n                        {display}\n                        {item.expandable ? (\n                          <span style={{ color: DIM }}>  ›</span>\n                        ) : null}\n                      </span>\n                    </button>\n                  </li>\n                );\n              })}\n            </ul>\n          </div>\n        ))}\n      </div>\n\n      <div\n        className=\"border-t px-3 py-2 text-center text-[12px]\"\n        style={{ borderColor: BORDER, color: DIM }}\n      >\n        Tip · Ask Grok to change a setting\n      </div>\n      <div\n        className=\"border-t px-3 py-1.5 text-[11px]\"\n        style={{ borderColor: BORDER, color: DIM }}\n      >\n        ↑/↓ nav · Space toggle · → expand · F2/Esc close\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/brainless/grok/grok-settings.tsx"
    }
  ],
  "type": "registry:ui"
}