{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "chain-of-thought",
  "title": "ChainOfThought",
  "description": "Collapsible step-by-step reasoning rail with statuses, search-result chips, and images.",
  "dependencies": [
    "@base-ui/react",
    "@hugeicons/react",
    "@hugeicons/core-free-icons"
  ],
  "registryDependencies": [
    "utils",
    "https://ui.neon.com/r/neon-tokens.json",
    "https://ui.neon.com/r/badge.json"
  ],
  "files": [
    {
      "path": "src/components/chain-of-thought/chain-of-thought.tsx",
      "content": "\"use client\";\n\nimport { Collapsible } from \"@base-ui/react/collapsible\";\nimport { ArrowRight01Icon } from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport type { ComponentProps, ReactNode } from \"react\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { cn } from \"@/lib/utils\";\n\nexport type ChainOfThoughtProps = Collapsible.Root.Props;\n\n/* ─────────────────────────────────────────────────────\n * Discrete, labeled reasoning steps — searches, tool\n * calls, drafts — folded behind the house log-line rail.\n * Reasoning is for one continuous thinking stream; this\n * is for steps the reader can scan one by one.\n * Inspired by Chain of Thought from Vercel's AI SDK\n * Elements (elements.ai-sdk.dev), rebuilt on Base UI.\n * ─────────────────────────────────────────────────── */\nexport const ChainOfThought = ({\n  className,\n  ...props\n}: ChainOfThoughtProps) => (\n  <Collapsible.Root\n    className={cn(\n      \"w-full min-w-0 border-border/60 border-l-2 pl-2.5\",\n      className\n    )}\n    data-slot=\"chain-of-thought\"\n    {...props}\n  />\n);\n\nexport type ChainOfThoughtHeaderProps = Collapsible.Trigger.Props;\n\n/** The fold's handle. Defaults to \"Chain of thought\"; children replace it. */\nexport const ChainOfThoughtHeader = ({\n  children,\n  className,\n  ...props\n}: ChainOfThoughtHeaderProps) => (\n  <Collapsible.Trigger\n    className={cn(\n      \"group inline-flex items-center gap-1 py-0.5 text-muted-foreground text-xs transition-colors hover:text-foreground\",\n      className\n    )}\n    data-slot=\"chain-of-thought-header\"\n    {...props}\n  >\n    <HugeiconsIcon\n      aria-hidden\n      className=\"size-3 transition-transform duration-200 group-data-[panel-open]:rotate-90 motion-reduce:transition-none\"\n      icon={ArrowRight01Icon}\n      strokeWidth={2}\n    />\n    {children ?? <span>Chain of thought</span>}\n  </Collapsible.Trigger>\n);\n\nexport type ChainOfThoughtContentProps = Collapsible.Panel.Props;\n\n/** The unfolding step list. Children are `ChainOfThoughtStep` items. */\nexport const ChainOfThoughtContent = ({\n  children,\n  className,\n  ...props\n}: ChainOfThoughtContentProps) => (\n  <Collapsible.Panel\n    className={cn(\n      \"h-[var(--collapsible-panel-height)] overflow-hidden transition-[height] duration-200 ease-out data-[ending-style]:h-0 data-[starting-style]:h-0 motion-reduce:transition-none\",\n      className\n    )}\n    data-slot=\"chain-of-thought-content\"\n    {...props}\n  >\n    <ol className=\"flex flex-col pt-1.5\">{children}</ol>\n  </Collapsible.Panel>\n);\n\nexport type ChainOfThoughtStepStatus = \"complete\" | \"active\" | \"pending\";\n\nconst STEP_LABEL_CLASS: Record<ChainOfThoughtStepStatus, string> = {\n  active: \"text-foreground\",\n  complete: \"text-muted-foreground\",\n  pending: \"text-muted-foreground/50\",\n};\n\nconst STEP_GLYPH_CLASS: Record<ChainOfThoughtStepStatus, string> = {\n  active: \"text-primary\",\n  complete: \"text-muted-foreground/60\",\n  pending: \"text-muted-foreground/40\",\n};\n\nexport type ChainOfThoughtStepProps = Omit<ComponentProps<\"li\">, \"children\"> & {\n  /** Replaces the default square status dot, e.g. a small icon. */\n  icon?: ReactNode;\n  /** The step headline, shimmering while the step is active. */\n  label: ReactNode;\n  /** Dimmed detail line under the label. */\n  description?: ReactNode;\n  status?: ChainOfThoughtStepStatus;\n  /** Extra content under the step, e.g. `ChainOfThoughtSearchResults`. */\n  children?: ReactNode;\n};\n\n/**\n * One reasoning step on a connected vertical rail. The active step's\n * label shimmers and its dot breathes; pending steps wait dimmed.\n */\nexport const ChainOfThoughtStep = ({\n  children,\n  className,\n  description,\n  icon,\n  label,\n  status = \"complete\",\n  ...props\n}: ChainOfThoughtStepProps) => (\n  <li\n    aria-current={status === \"active\" ? \"step\" : undefined}\n    className={cn(\n      \"relative flex gap-2.5 pb-3 last:pb-0.5\",\n      \"before:absolute before:top-[18px] before:bottom-0 before:left-[5.5px] before:w-px before:bg-border/60 last:before:hidden\",\n      className\n    )}\n    data-slot=\"chain-of-thought-step\"\n    data-status={status}\n    {...props}\n  >\n    <span\n      aria-hidden=\"true\"\n      className={cn(\n        \"flex size-3 shrink-0 translate-y-[5px] items-center justify-center [&_svg]:size-3\",\n        STEP_GLYPH_CLASS[status]\n      )}\n    >\n      {icon ?? (\n        <span\n          className={cn(\n            \"size-1.5 bg-current\",\n            status === \"active\" && \"neon-status-breathe\"\n          )}\n        />\n      )}\n    </span>\n    <div className=\"min-w-0 flex-1\">\n      <div className={cn(\"text-sm\", STEP_LABEL_CLASS[status])}>\n        {status === \"active\" ? (\n          <span className=\"shimmer shimmer-duration-2400\">{label}</span>\n        ) : (\n          label\n        )}\n      </div>\n      {description ? (\n        <div className=\"text-muted-foreground/70 text-xs\">{description}</div>\n      ) : null}\n      {children}\n    </div>\n  </li>\n);\n\nexport type ChainOfThoughtSearchResultsProps = ComponentProps<\"div\">;\n\n/** A wrapping row of `ChainOfThoughtSearchResult` chips under a step. */\nexport const ChainOfThoughtSearchResults = ({\n  className,\n  ...props\n}: ChainOfThoughtSearchResultsProps) => (\n  <div\n    className={cn(\"flex flex-wrap gap-1.5 pt-1.5\", className)}\n    data-slot=\"chain-of-thought-search-results\"\n    {...props}\n  />\n);\n\nexport type ChainOfThoughtSearchResultProps = ComponentProps<typeof Badge>;\n\n/**\n * One search hit as a quiet outline chip. Pass `render` (Base UI) to\n * make it a link.\n */\nexport const ChainOfThoughtSearchResult = ({\n  className,\n  ...props\n}: ChainOfThoughtSearchResultProps) => (\n  <Badge\n    className={cn(\"font-mono font-normal text-muted-foreground\", className)}\n    data-slot=\"chain-of-thought-search-result\"\n    variant=\"outline\"\n    {...props}\n  />\n);\n\nexport type ChainOfThoughtImageProps = Omit<\n  ComponentProps<\"figure\">,\n  \"children\"\n> & {\n  /** The visual itself, e.g. an `<img>`. */\n  children: ReactNode;\n  /** Dimmed caption under the visual. */\n  caption?: string;\n};\n\n/** A framed visual a step produced, with an optional caption. */\nexport const ChainOfThoughtImage = ({\n  caption,\n  children,\n  className,\n  ...props\n}: ChainOfThoughtImageProps) => (\n  <figure\n    className={cn(\n      \"mt-1.5 w-fit max-w-full overflow-hidden border border-border/60\",\n      className\n    )}\n    data-slot=\"chain-of-thought-image\"\n    {...props}\n  >\n    {children}\n    {caption ? (\n      <figcaption className=\"border-border/60 border-t px-2 py-1.5 text-muted-foreground text-xs\">\n        {caption}\n      </figcaption>\n    ) : null}\n  </figure>\n);\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}