{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "grok-header",
  "title": "Grok Header",
  "description": "Grok CLI's launch card — the braille mark drawn as a crisp dot-matrix SVG with its resting grayscale-shimmer sweep (reduced-motion aware), build banner, and a start menu of real buttons.",
  "files": [
    {
      "path": "registry/brainless/grok/grok-header.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * GrokHeader — Grok CLI's launch card.\n *\n * The logo is Grok's braille mark, decoded to a 1-bit sprite and drawn as a\n * crisp SVG so there are no font seams. Grok's resting animation is a grayscale\n * shimmer sweeping across the mark — reproduced here with a masked gradient\n * that translates on a loop (and holds still under prefers-reduced-motion).\n */\nconst LOGO_BITS = [\n  \"00000000000000000000000001\",\n  \"00000000000111110000000010\",\n  \"00000000111111111110000100\",\n  \"00000001111111111110001000\",\n  \"00000011111000000000011000\",\n  \"00000111100000000000110000\",\n  \"00001111000000000001111000\",\n  \"00001110000000000011111000\",\n  \"00011100000000000110111000\",\n  \"00011100000000001100011100\",\n  \"00011100000000010000011100\",\n  \"00011100000000100000011100\",\n  \"00011100000001000000011100\",\n  \"00011100000000000000011100\",\n  \"00011100000000000000011000\",\n  \"00001110000000000000111000\",\n  \"00001110000000000001111000\",\n  \"00001110000000000011110000\",\n  \"00001100000000000111100000\",\n  \"00011000011111111111000000\",\n  \"00010000111111111110000000\",\n  \"00100000001111111000000000\",\n  \"01000000000000000000000000\",\n  \"10000000000000000000000000\",\n];\n\nconst AMBER = \"#e0af68\";\n\nfunction usePrefersReducedMotion() {\n  const [reduced, setReduced] = React.useState(false);\n  React.useEffect(() => {\n    const mq = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n    setReduced(mq.matches);\n    const on = () => setReduced(mq.matches);\n    mq.addEventListener(\"change\", on);\n    return () => mq.removeEventListener(\"change\", on);\n  }, []);\n  return reduced;\n}\n\nexport function GrokLogo({\n  scale = 4,\n  className,\n}: {\n  scale?: number;\n  className?: string;\n}) {\n  const uid = React.useId().replace(/[^a-z0-9]/gi, \"\");\n  const reduced = usePrefersReducedMotion();\n  const cols = LOGO_BITS[0].length;\n  const rows = LOGO_BITS.length;\n\n  // Grok renders each braille dot as a separate spaced dot, not filled strokes.\n  const CELL = 10;\n  const DOT = 5.2; // ~half the pitch, matching the real dot/gap ratio\n  const off = (CELL - DOT) / 2;\n  const W = cols * CELL;\n  const H = rows * CELL;\n  const dots: React.ReactElement[] = [];\n  LOGO_BITS.forEach((row, y) => {\n    for (let x = 0; x < cols; x += 1) {\n      if (row[x] === \"1\") {\n        dots.push(\n          <rect\n            key={`${x}-${y}`}\n            x={x * CELL + off}\n            y={y * CELL + off}\n            width={DOT}\n            height={DOT}\n            rx={0.9}\n          />,\n        );\n      }\n    }\n  });\n\n  return (\n    <svg\n      aria-hidden\n      width={cols * scale}\n      height={rows * scale}\n      viewBox={`0 0 ${W} ${H}`}\n      className={className}\n    >\n      <defs>\n        <mask id={`m${uid}`}>\n          <g fill=\"#fff\">{dots}</g>\n        </mask>\n        <linearGradient\n          id={`g${uid}`}\n          gradientUnits=\"userSpaceOnUse\"\n          x1=\"0\"\n          y1=\"0\"\n          x2={W * 0.42}\n          y2={H * 0.18}\n          spreadMethod=\"reflect\"\n        >\n          <stop offset=\"0\" stopColor=\"#616161\" />\n          <stop offset=\"1\" stopColor=\"#d4d4d4\" />\n          {reduced ? null : (\n            <animateTransform\n              attributeName=\"gradientTransform\"\n              type=\"translate\"\n              from=\"0 0\"\n              to={`${W * 0.84} ${H * 0.36}`}\n              dur=\"2.8s\"\n              repeatCount=\"indefinite\"\n            />\n          )}\n        </linearGradient>\n      </defs>\n      <rect width={W} height={H} fill={`url(#g${uid})`} mask={`url(#m${uid})`} />\n    </svg>\n  );\n}\n\nconst MENU: { label: string; key?: string }[] = [\n  { label: \"New worktree\", key: \"ctrl+w\" },\n  { label: \"Resume session\", key: \"ctrl+s\" },\n  { label: \"Changelog\" },\n  { label: \"Quit\", key: \"ctrl+q\" },\n];\n\nexport function GrokHeader({\n  version = \"0.2.93\",\n  headline = \"Grok 4.5 is here!\",\n  subhead = \"Grok 4.5 is now available. Try it out in the /model picker.\",\n  className,\n}: {\n  version?: string;\n  headline?: string;\n  subhead?: string;\n  className?: string;\n}) {\n  return (\n    <div\n      className={cn(\n        \"min-w-0 rounded-[6px] border border-[#2f2f33] px-3 py-4 font-mono text-[13px] leading-[1.5] text-[#e8e8e8] sm:px-4\",\n        className,\n      )}\n    >\n      <div className=\"flex min-w-0 items-center gap-5\">\n        <GrokLogo className=\"hidden shrink-0 sm:block\" />\n        <div className=\"min-w-0 flex-1\">\n          <div className=\"break-words\">\n            <span className=\"font-semibold\">Grok Build Beta</span>{\" \"}\n            <span className=\"text-[#7a7a7a]\">{version}</span>\n          </div>\n          <div className=\"mt-2 break-words font-semibold\" style={{ color: AMBER }}>\n            {headline}\n          </div>\n          <div className=\"truncate text-[#8b8b90]\">{subhead}</div>\n\n          <ul className=\"mt-2.5 min-w-0 space-y-0.5\">\n            {MENU.map((m) => (\n              <li key={m.label}>\n                <button\n                  type=\"button\"\n                  className=\"flex w-full min-w-0 items-center justify-between gap-4 rounded px-1 py-0.5 text-left hover:bg-white/5\"\n                >\n                  <span className=\"min-w-0 truncate\">{m.label}</span>\n                  {m.key ? (\n                    <span className=\"shrink-0 text-[#6a6a6a]\">{m.key}</span>\n                  ) : null}\n                </button>\n              </li>\n            ))}\n          </ul>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/brainless/grok/grok-header.tsx"
    }
  ],
  "type": "registry:ui"
}