{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "model-selector",
  "title": "Model Selector",
  "description": "Pick the model: grouped by provider, searchable, with context and tags.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils",
    "https://ui.cuelark.com/r/theme.json",
    "https://ui.cuelark.com/r/command.json",
    "https://ui.cuelark.com/r/popover.json"
  ],
  "files": [
    {
      "path": "src/registry/cuelark/ui/model-selector.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { CheckIcon, ChevronDownIcon } from \"lucide-react\";\n\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from \"@/registry/cuelark/ui/command\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/registry/cuelark/ui/popover\";\nimport { cn } from \"@/lib/utils\";\n\ntype Model = { id: string; name: string; provider: string; context?: string; tags?: string[] };\n\ntype ModelSelectorProps = {\n  models: Model[];\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (id: string) => void;\n  className?: string;\n};\n\nconst tint = (s: string) => [...s].reduce((a, c) => (a * 31 + c.charCodeAt(0)) % 360, 7);\n\nfunction ProviderMark({ provider }: { provider: string }) {\n  const h = tint(provider);\n  return (\n    <span className=\"grid size-5 shrink-0 place-items-center rounded-md text-[0.625rem] font-semibold\" style={{ background: `oklch(0.92 0.05 ${h})`, color: `oklch(0.38 0.1 ${h})` }}>\n      {provider[0]}\n    </span>\n  );\n}\n\n/**\n * Pick the model for the next message. The compact pill fits a composer toolbar; the list searches by name,\n * provider or tag and shows context size and capabilities at a glance, grouped by provider.\n */\nfunction ModelSelector({ models, value, defaultValue, onValueChange, className }: ModelSelectorProps) {\n  const [open, setOpen] = React.useState(false);\n  const [internal, setInternal] = React.useState(defaultValue ?? models[0]?.id);\n  const current = models.find((m) => m.id === (value ?? internal));\n  const providers = [...new Set(models.map((m) => m.provider))];\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <button\n          type=\"button\"\n          aria-label={`Model: ${current?.name ?? \"none\"}`}\n          className={cn(\"flex h-8 items-center gap-1.5 rounded-lg px-2 text-sm text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50 data-[state=open]:bg-muted data-[state=open]:text-foreground\", className)}\n        >\n          {current && <ProviderMark provider={current.provider} />}\n          <span className=\"font-medium\">{current?.name ?? \"Model\"}</span>\n          <ChevronDownIcon className=\"size-3.5\" />\n        </button>\n      </PopoverTrigger>\n      <PopoverContent align=\"start\" className=\"w-80 p-0\">\n        <Command>\n          <CommandInput placeholder=\"Search models…\" />\n          <CommandList>\n            <CommandEmpty>No model found.</CommandEmpty>\n            {providers.map((p) => (\n              <CommandGroup key={p} heading={p}>\n                {models\n                  .filter((m) => m.provider === p)\n                  .map((m) => (\n                    <CommandItem\n                      key={m.id}\n                      value={m.id}\n                      keywords={[m.name, m.provider, ...(m.tags ?? [])]}\n                      onSelect={() => {\n                        setInternal(m.id);\n                        onValueChange?.(m.id);\n                        setOpen(false);\n                      }}\n                    >\n                      <ProviderMark provider={m.provider} />\n                      <span className=\"grid flex-1\">\n                        <span className=\"font-medium\">{m.name}</span>\n                        <span className=\"flex gap-1.5 text-[0.6875rem] text-muted-foreground\">\n                          {m.context && <span className=\"font-mono\">{m.context}</span>}\n                          {m.tags?.map((t) => (\n                            <span key={t}>· {t}</span>\n                          ))}\n                        </span>\n                      </span>\n                      {m.id === current?.id && <CheckIcon className=\"size-4 !text-foreground\" />}\n                    </CommandItem>\n                  ))}\n              </CommandGroup>\n            ))}\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  );\n}\n\nexport { ModelSelector };\nexport type { Model, ModelSelectorProps };\n",
      "type": "registry:ui"
    }
  ],
  "docs": "Docs and examples: https://ui.cuelark.com/components/model-selector",
  "categories": [
    "agents"
  ],
  "type": "registry:ui"
}