{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "reasoning-block",
  "type": "registry:ui",
  "title": "Reasoning block",
  "description": "Collapsible AI reasoning block, folded by default. The title shimmers while the model is thinking, then reads Thought for Ns, with an animated height reveal.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/reasoning-block.tsx",
      "type": "registry:ui",
      "target": "components/ui/reasoning-block.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { ChevronRightIcon } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\n\n/**\n * ReasoningBlock — the model's thinking, folded by default. While `active`,\n * the title shimmers; when done it reports how long it took.\n */\nfunction ReasoningBlock({\n  title = \"Thinking\",\n  children = \"Compared density against the table spec, checked contrast on both themes, then chose tabular numerals for the price column.\",\n  defaultOpen = false,\n  active = false,\n  duration,\n  className,\n}: {\n  title?: string\n  children?: React.ReactNode\n  defaultOpen?: boolean\n  /** True while the model is still thinking. */\n  active?: boolean\n  /** e.g. \"4s\" — renders \"Thought for 4s\" when not active. */\n  duration?: string\n  className?: string\n}) {\n  const [open, setOpen] = React.useState(defaultOpen)\n  const label = active ? title + \"…\" : duration ? `Thought for ${duration}` : title\n  return (\n    <div data-slot=\"reasoning-block\" className={cn(\"text-sm\", className)}>\n      <button\n        type=\"button\"\n        className=\"group/r inline-flex items-center gap-1.5 rounded-md py-1 text-left text-[0.8125rem] font-medium text-fg-muted outline-none transition-colors hover:text-fg focus-visible:ring-2 focus-visible:ring-accent\"\n        aria-expanded={open}\n        onClick={() => setOpen((v) => !v)}\n      >\n        <span\n          className={cn(\n            active &&\n              \"bg-[linear-gradient(90deg,var(--fg-muted)_0%,var(--fg-muted)_40%,var(--fg)_50%,var(--fg-muted)_60%,var(--fg-muted)_100%)] bg-[length:250%_100%] bg-clip-text text-transparent animate-[shimmer-text_1.8s_linear_infinite]\"\n          )}\n        >\n          {label}\n        </span>\n        <ChevronRightIcon className={cn(\"size-3.5 transition-transform duration-200 ease-hairline\", open && \"rotate-90\")} />\n      </button>\n      <div className={cn(\"grid transition-[grid-template-rows] duration-200 ease-hairline\", open ? \"grid-rows-[1fr]\" : \"grid-rows-[0fr]\")}>\n        <div className=\"min-h-0 overflow-hidden\">\n          <div className=\"mt-1 border-l-2 border-border py-0.5 pl-3 text-[0.8125rem] leading-[1.6] text-fg-muted\">{children}</div>\n        </div>\n      </div>\n    </div>\n  )\n}\nexport { ReasoningBlock }\n"
    }
  ]
}