{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "grok-write",
  "title": "Grok Write",
  "description": "Grok's inline write/edit chrome — line-numbered before/after inside a ┃ gutter, with optional hook ✓/✗ lines.",
  "files": [
    {
      "path": "registry/brainless/grok/grok-write.tsx",
      "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * GrokWrite — Grok CLI's inline write/edit chrome.\n *\n * Captured grammar (v0.2.93): a `┃` gutter with line-numbered before/after\n * rows, a `───` rule, then optional hook sections with ✓ / ✗ results.\n */\nexport type GrokWriteLine = {\n  n?: number;\n  text: string;\n  kind?: \"before\" | \"after\";\n};\n\nexport type GrokHookResult = {\n  label: string;\n  ok: boolean;\n  detail?: string;\n  ms?: number;\n};\n\nconst BORDER = \"#808080\";\nconst FG = \"#e1e1e1\";\nconst MUTED = \"#8b8b90\";\nconst DIM = \"#6c6c6c\";\nconst OK = \"#00ff00\"; // 38;5;10\nconst BAD = \"#ff0000\"; // 38;5;9\n\nexport function GrokWrite({\n  before = [{ n: 1, text: \"hello\" }],\n  after = [{ n: 1, text: \"world\" }],\n  hooks,\n  className,\n}: {\n  before?: GrokWriteLine[];\n  after?: GrokWriteLine[];\n  hooks?: { pre?: GrokHookResult[]; post?: GrokHookResult[] };\n  className?: string;\n}) {\n  return (\n    <div\n      className={cn(\n        \"min-w-0 border-l-2 pl-3 font-mono text-[13px] leading-[1.55]\",\n        className,\n      )}\n      style={{ borderColor: BORDER }}\n      role=\"region\"\n      aria-label=\"Write preview\"\n    >\n      <div className=\"min-w-0 space-y-0.5\" style={{ color: MUTED }}>\n        {before.map((l, i) => (\n          <div key={`b-${i}`} className=\"flex min-w-0 gap-2\">\n            <span\n              aria-hidden\n              className=\"w-4 shrink-0 select-none text-right tabular-nums\"\n              style={{ color: DIM }}\n            >\n              {l.n ?? \"\"}\n            </span>\n            <span className=\"sr-only\">before: </span>\n            <span className=\"min-w-0 break-all\" style={{ color: FG }}>\n              {l.text}\n            </span>\n          </div>\n        ))}\n        {after.map((l, i) => (\n          <div key={`a-${i}`} className=\"flex min-w-0 gap-2\">\n            <span\n              aria-hidden\n              className=\"w-4 shrink-0 select-none text-right tabular-nums\"\n              style={{ color: DIM }}\n            >\n              {l.n ?? \"\"}\n            </span>\n            <span className=\"sr-only\">after: </span>\n            <span className=\"min-w-0 break-all\" style={{ color: FG }}>\n              {l.text}\n            </span>\n          </div>\n        ))}\n      </div>\n\n      {hooks ? (\n        <div className=\"mt-2 space-y-1\" style={{ color: MUTED }}>\n          <div aria-hidden style={{ color: DIM }}>\n            ───\n          </div>\n          {hooks.pre?.length ? (\n            <HookBlock title=\"pre_tool_use\" results={hooks.pre} />\n          ) : null}\n          {hooks.post?.length ? (\n            <HookBlock title=\"post_tool_use\" results={hooks.post} />\n          ) : null}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\nfunction HookBlock({\n  title,\n  results,\n}: {\n  title: string;\n  results: GrokHookResult[];\n}) {\n  return (\n    <div>\n      <div style={{ color: DIM }}>{title}</div>\n      <ul className=\"mt-0.5 space-y-0.5 pl-2\">\n        {results.map((r, i) => (\n          <li key={i}>\n            <span style={{ color: r.ok ? OK : BAD }} aria-hidden>\n              {r.ok ? \"✓\" : \"✗\"}\n            </span>{\" \"}\n            <span style={{ color: MUTED }}>{r.label}</span>\n            {r.ms != null ? (\n              <span style={{ color: DIM }}> ({r.ms}ms)</span>\n            ) : null}\n            {r.detail ? (\n              <div className=\"pl-4 text-[12px]\" style={{ color: DIM }}>\n                {r.detail}\n              </div>\n            ) : null}\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/brainless/grok/grok-write.tsx"
    }
  ],
  "type": "registry:ui"
}