{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "claude-header",
  "title": "Claude Header",
  "description": "Claude Code's welcome box — logo, tips, and model/cwd lines — with the title as a semantic fieldset legend.",
  "files": [
    {
      "path": "registry/brainless/claude/claude-header.tsx",
      "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * ClaudeHeader — Claude Code's welcome box.\n *\n * The title-in-the-border is a real <fieldset>/<legend>, so it stays semantic\n * and inherits whatever background it sits on. The logo is Claude Code's own\n * pixel sprite, but drawn as a crisp SVG grid instead of quadrant-block glyphs\n * — no font seams, scales cleanly.\n */\nconst ROSE = \"#cd694a\";\nconst GRAY = \"#949494\";\n\n// Claude's launch sprite as a 1-bit bitmap (decoded from the terminal glyphs).\nconst LOGO_BITS = [\n  \"000111111111111000\",\n  \"000110111111011000\",\n  \"011111111111111110\",\n  \"000111111111111000\",\n  \"000010100001010000\",\n];\n\nexport function ClaudeLogo({\n  scale = 4,\n  color = ROSE,\n  className,\n}: {\n  scale?: number;\n  color?: string;\n  className?: string;\n}) {\n  const w = LOGO_BITS[0].length;\n  const h = LOGO_BITS.length;\n  // Terminal char cells are taller than wide, so each sprite pixel is stretched\n  // vertically (PH) to keep the logo's proportions instead of looking squat.\n  const PH = 2.4;\n  const rects: React.ReactElement[] = [];\n  LOGO_BITS.forEach((row, y) => {\n    let x = 0;\n    while (x < w) {\n      if (row[x] === \"1\") {\n        let end = x;\n        while (end < w && row[end] === \"1\") end += 1;\n        rects.push(\n          <rect key={`${x}-${y}`} x={x} y={y * PH} width={end - x} height={PH} />,\n        );\n        x = end;\n      } else {\n        x += 1;\n      }\n    }\n  });\n  return (\n    <svg\n      aria-hidden\n      width={w * scale}\n      height={h * PH * scale}\n      viewBox={`0 0 ${w} ${h * PH}`}\n      shapeRendering=\"crispEdges\"\n      fill={color}\n      className={className}\n    >\n      {rects}\n    </svg>\n  );\n}\n\nexport function ClaudeHeader({\n  version = \"v2.1.206\",\n  user = \"Ben\",\n  model = \"Fable 5 with xhigh effort · Claude Max\",\n  org = \"ben@freestyle.sh's Organization\",\n  cwd = \"~/dev/brainless\",\n  tips = [\"Ask Claude to create a new app or clone a repo\"],\n  whatsNew = [\n    \"Added directory path suggestions to /cd\",\n    \"Added a /doctor check that proposes trims\",\n  ],\n  className,\n}: {\n  version?: string;\n  user?: string;\n  model?: string;\n  org?: string;\n  cwd?: string;\n  tips?: string[];\n  whatsNew?: string[];\n  className?: string;\n}) {\n  return (\n    <fieldset\n      className={cn(\n        \"min-w-0 rounded-[6px] border px-3 pb-3.5 pt-1 font-mono text-[13px] leading-[1.5] text-[#c0caf5] sm:px-4\",\n        className,\n      )}\n      style={{ borderColor: ROSE }}\n    >\n      <legend className=\"max-w-full truncate px-2\" style={{ color: ROSE }}>\n        Claude Code <span style={{ color: GRAY }}>{version}</span>\n      </legend>\n\n      <div className=\"grid min-w-0 gap-4 sm:grid-cols-[minmax(0,1fr)_1px_minmax(0,1.1fr)]\">\n        {/* left: identity */}\n        <div className=\"flex min-w-0 flex-col items-center gap-2 py-1 text-center\">\n          <div className=\"font-semibold\">Welcome back {user}!</div>\n          <ClaudeLogo className=\"my-1.5\" />\n          <div className=\"min-w-0 space-y-0.5 break-words\" style={{ color: GRAY }}>\n            <div>{model}</div>\n            <div>{org}</div>\n            <div>{cwd}</div>\n          </div>\n        </div>\n\n        <div aria-hidden className=\"hidden sm:block\" style={{ background: `${ROSE}55` }} />\n\n        {/* right: tips + what's new */}\n        <div className=\"min-w-0 space-y-1\">\n          <div className=\"font-semibold\" style={{ color: ROSE }}>\n            Tips for getting started\n          </div>\n          {tips.map((t) => (\n            <div key={t} className=\"truncate\">\n              {t}\n            </div>\n          ))}\n          <div className=\"my-1.5 h-px\" style={{ background: ROSE }} />\n          <div className=\"font-semibold\" style={{ color: ROSE }}>\n            What&apos;s new\n          </div>\n          {whatsNew.map((t) => (\n            <div key={t} className=\"truncate\">\n              {t}\n            </div>\n          ))}\n          <div className=\"truncate italic\" style={{ color: GRAY }}>\n            /release-notes for more\n          </div>\n        </div>\n      </div>\n    </fieldset>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/brainless/claude/claude-header.tsx"
    }
  ],
  "type": "registry:ui"
}