{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "model-picker",
  "type": "registry:ui",
  "title": "Model Picker",
  "description": "Provider-grouped model select with connection dots — a recipe over Select for composer footers.",
  "dependencies": [],
  "registryDependencies": [
    "https://seamui.dev/r/utils.json",
    "https://seamui.dev/r/select.json"
  ],
  "files": [
    {
      "path": "registry/seam/ui/model-picker.tsx",
      "content": "\"use client\"\n\nimport type * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} from \"./select\"\n\n// The composer-footer model dropdown — a recipe over Select, not a fork.\n// The popup keeps select's debossed tray; the chosen model is the embossed\n// key risen from it. What this adds: a footer-sized trigger, provider groups\n// with connection dots, and a two-line item (name + muted description).\n\ntype ConnectionState = \"connected\" | \"error\" | \"off\"\n\n// Monochrome rule: connected = filled primary, error = destructive,\n// off = faint muted. Same vocabulary shape as agent-status dots.\nconst CONNECTION: Record<ConnectionState, string> = {\n  connected: \"bg-primary\",\n  error: \"bg-destructive\",\n  off: \"bg-muted-foreground/40\",\n}\n\nconst ModelPicker = Select\n\n// Compact ghost key for a composer footer: current model + chevron, no well.\nfunction ModelPickerTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectTrigger>) {\n  return (\n    <SelectTrigger\n      data-slot=\"model-picker-trigger\"\n      variant=\"ghost\"\n      className={cn(\n        \"text-muted-foreground h-8 gap-1 px-2 text-xs font-medium\",\n        className\n      )}\n      {...props}\n    >\n      {children ?? <SelectValue />}\n    </SelectTrigger>\n  )\n}\n\nfunction ModelPickerContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectContent>) {\n  return (\n    <SelectContent\n      data-slot=\"model-picker-content\"\n      className={cn(\"min-w-56\", className)}\n      {...props}\n    />\n  )\n}\n\n// A provider group: label row carries the connection dot.\nfunction ModelPickerProvider({\n  name,\n  connection = \"connected\",\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectGroup> & {\n  name: React.ReactNode\n  connection?: ConnectionState\n}) {\n  return (\n    <SelectGroup data-slot=\"model-picker-provider\" {...props}>\n      <SelectLabel className=\"flex items-center gap-1.5\">\n        <span\n          data-slot=\"model-picker-connection\"\n          data-connection={connection}\n          role=\"img\"\n          aria-label={\n            connection === \"connected\"\n              ? \"connected\"\n              : connection === \"error\"\n                ? \"connection error\"\n                : \"not connected\"\n          }\n          className={cn(\n            \"inline-block size-1.5 shrink-0 rounded-full\",\n            CONNECTION[connection]\n          )}\n        />\n        {name}\n      </SelectLabel>\n      {children}\n    </SelectGroup>\n  )\n}\n\n// A model row: name, muted description line, optional meta chip (\"1M ctx\").\nfunction ModelPickerItem({\n  description,\n  meta,\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectItem> & {\n  description?: React.ReactNode\n  meta?: React.ReactNode\n}) {\n  return (\n    <SelectItem\n      data-slot=\"model-picker-item\"\n      className={cn(\"py-2\", className)}\n      {...props}\n    >\n      <span className=\"flex min-w-0 flex-col gap-0.5\">\n        <span className=\"flex items-center gap-1.5\">\n          <span className=\"truncate\">{children}</span>\n          {meta ? (\n            <span className=\"text-muted-foreground shrink-0 text-[10px] tabular-nums\">\n              {meta}\n            </span>\n          ) : null}\n        </span>\n        {description ? (\n          <span className=\"text-muted-foreground truncate text-xs font-normal\">\n            {description}\n          </span>\n        ) : null}\n      </span>\n    </SelectItem>\n  )\n}\n\nexport {\n  ModelPicker,\n  ModelPickerTrigger,\n  ModelPickerContent,\n  ModelPickerProvider,\n  ModelPickerItem,\n  type ConnectionState,\n}\n",
      "type": "registry:ui",
      "target": "components/ui/model-picker.tsx"
    }
  ]
}