{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "reasoning",
  "title": "Reasoning",
  "description": "A model's thinking, streamed live, then folded to \"Thought for 6s\".",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils",
    "https://ui.cuelark.com/r/theme.json",
    "https://ui.cuelark.com/r/collapsible.json",
    "https://ui.cuelark.com/r/spinner.json",
    "https://ui.cuelark.com/r/text-shimmer.json"
  ],
  "files": [
    {
      "path": "src/registry/cuelark/ui/reasoning.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { ChevronDownIcon } from \"lucide-react\";\n\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from \"@/registry/cuelark/ui/collapsible\";\nimport { Spinner } from \"@/registry/cuelark/ui/spinner\";\nimport { TextShimmer } from \"@/registry/cuelark/ui/text-shimmer\";\nimport { cn } from \"@/lib/utils\";\n\ntype ReasoningProps = Omit<React.ComponentProps<typeof Collapsible>, \"children\"> & {\n  /** True while the model is still thinking. */\n  streaming?: boolean;\n  /** Seconds spent thinking; measured automatically when omitted. */\n  duration?: number;\n  /** Status line while streaming. */\n  label?: string;\n  children?: React.ReactNode;\n};\n\n/**\n * A model's thinking, shown as it happens and tucked away when it is done: \"Thinking…\" shimmers next to the\n * crop-mark spinner, the trace streams in a faded window, then it collapses to \"Thought for 6s\".\n */\nfunction Reasoning({ streaming = false, duration, label = \"Thinking…\", className, children, open: openProp, onOpenChange, ...props }: ReasoningProps) {\n  const [open, setOpen] = React.useState(streaming);\n  const started = React.useRef<number | null>(null);\n  const [took, setTook] = React.useState(duration);\n  const isOpen = openProp ?? open;\n\n  React.useEffect(() => {\n    if (streaming) {\n      started.current ??= performance.now();\n      setOpen(true);\n      return;\n    }\n    if (started.current !== null && duration === undefined) setTook(Math.max(1, Math.round((performance.now() - started.current) / 1000)));\n    const id = setTimeout(() => setOpen(false), 600);\n    return () => clearTimeout(id);\n  }, [streaming, duration]);\n\n  return (\n    <Collapsible\n      data-slot=\"reasoning\"\n      open={isOpen}\n      onOpenChange={(o) => {\n        setOpen(o);\n        onOpenChange?.(o);\n      }}\n      className={cn(\"grid gap-2\", className)}\n      {...props}\n    >\n      <CollapsibleTrigger className=\"group/reasoning flex w-fit items-center gap-2 rounded-md text-sm outline-none focus-visible:ring-3 focus-visible:ring-ring/50\">\n        {streaming ? (\n          <>\n            <Spinner size=\"sm\" className=\"text-foreground\" label=\"Thinking\" />\n            <TextShimmer className=\"font-medium\">{label}</TextShimmer>\n          </>\n        ) : (\n          <>\n            <span className=\"font-medium\">Thought</span>\n            <span className=\"text-muted-foreground\">for {took ?? duration ?? 1}s</span>\n          </>\n        )}\n        <ChevronDownIcon className=\"size-4 text-muted-foreground transition-transform duration-200 ease-cue group-data-[state=open]/reasoning:rotate-180\" />\n      </CollapsibleTrigger>\n      <CollapsibleContent>\n        <div className=\"max-h-48 overflow-y-auto border-s-2 border-dashed border-border ps-4 text-sm leading-relaxed text-muted-foreground [mask-image:linear-gradient(transparent,black_12px,black_calc(100%-12px),transparent)] [&>*+*]:mt-2\">\n          {children}\n        </div>\n      </CollapsibleContent>\n    </Collapsible>\n  );\n}\n\nexport { Reasoning };\nexport type { ReasoningProps };\n",
      "type": "registry:ui"
    }
  ],
  "docs": "Docs and examples: https://ui.cuelark.com/components/reasoning",
  "categories": [
    "agents"
  ],
  "type": "registry:ui"
}