{
  "name": "context-picker",
  "type": "registry:ui",
  "title": "Context Picker",
  "description": "Picks what an assistant can see. A dropdown rather than a dialog, because attaching context happens mid-thought and a modal takes focus off the prompt you were writing.",
  "category": "AI",
  "dependencies": [
    "lucide-react@^1.39.0"
  ],
  "registryDependencies": [
    "badge",
    "button",
    "dropdown-menu",
    "input",
    "lib-styles",
    "lib-utils"
  ],
  "files": [
    {
      "path": "components/ui/context-picker.tsx",
      "type": "registry:ui",
      "content": "'use client'\n\nimport { useMemo, useState, type ComponentProps, type ReactNode } from 'react'\nimport { Check, FileCode, Plus, Search } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu'\nimport { Input } from '@/components/ui/input'\nimport { menuItem, radius } from '@/lib/styles'\nimport { cn } from '@/lib/utils'\n\n/**\n * Picks what an assistant can see: files, selections, docs, tools.\n *\n * A dropdown rather than a dialog, because attaching context happens mid-thought\n * — a modal would take focus away from the prompt you were part-way through\n * writing. Already-attached sources stay in the list with a tick rather than\n * disappearing, so the menu does not reshuffle under the pointer.\n */\nexport type ContextSource = {\n  id: string\n  label: string\n  group?: string\n  detail?: string\n  icon?: ReactNode\n  disabled?: boolean\n}\n\nfunction ContextPicker({\n  sources,\n  selected = [],\n  onSelect,\n  onDeselect,\n  trigger,\n  emptyMessage = 'Nothing matches',\n  triggerLabel = 'Context',\n  searchPlaceholder = 'Search files and docs',\n  searchLabel = 'Search context sources',\n  ...props\n  // 'onSelect' is also a DOM event on the underlying div; omitting it stops the\n  // native signature from shadowing this one.\n}: Omit<ComponentProps<typeof DropdownMenuContent>, 'children' | 'onSelect'> & {\n  sources: ContextSource[]\n  selected?: string[]\n  onSelect?: (id: string) => void\n  onDeselect?: (id: string) => void\n  trigger?: ReactNode\n  emptyMessage?: string\n  /** Text on the default trigger. Ignored when `trigger` is given. */\n  triggerLabel?: ReactNode\n  searchPlaceholder?: string\n  /** Accessible name for the search field. */\n  searchLabel?: string\n}) {\n  const [query, setQuery] = useState('')\n\n  const groups = useMemo(() => {\n    const needle = query.trim().toLowerCase()\n    const matched = needle\n      ? sources.filter((s) =>\n          `${s.label} ${s.detail ?? ''} ${s.group ?? ''}`\n            .toLowerCase()\n            .includes(needle),\n        )\n      : sources\n\n    const map = new Map<string, ContextSource[]>()\n    for (const source of matched) {\n      const key = source.group ?? ''\n      if (!map.has(key)) map.set(key, [])\n      map.get(key)!.push(source)\n    }\n    return [...map.entries()]\n  }, [sources, query])\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        {trigger ?? (\n          <Button variant=\"ghost\" size=\"xs\">\n            <Plus /> {triggerLabel}\n          </Button>\n        )}\n      </DropdownMenuTrigger>\n\n      <DropdownMenuContent align=\"start\" className=\"w-72 p-0\" {...props}>\n        <div className=\"border-border border-b p-1.5\">\n          <Input\n            size=\"sm\"\n            icon={<Search />}\n            placeholder={searchPlaceholder}\n            value={query}\n            onChange={(event) => setQuery(event.target.value)}\n            aria-label={searchLabel}\n          />\n        </div>\n\n        <div className=\"max-h-64 overflow-auto p-1\">\n          {groups.length === 0 && (\n            <p className=\"text-muted-foreground px-2.5 py-6 text-center text-sm\">\n              {emptyMessage}\n            </p>\n          )}\n\n          {groups.map(([group, items]) => (\n            <div key={group || 'ungrouped'}>\n              {group && <DropdownMenuLabel>{group}</DropdownMenuLabel>}\n              {items.map((source) => {\n                const on = selected.includes(source.id)\n                return (\n                  <button\n                    key={source.id}\n                    type=\"button\"\n                    role=\"menuitemcheckbox\"\n                    aria-checked={on}\n                    data-disabled={source.disabled || undefined}\n                    disabled={source.disabled}\n                    onClick={() => (on ? onDeselect?.(source.id) : onSelect?.(source.id))}\n                    className={cn(menuItem, radius.control, 'w-full')}\n                  >\n                    {source.icon ?? <FileCode />}\n                    <span className=\"min-w-0 flex-1 truncate text-start\">\n                      {source.label}\n                    </span>\n                    {source.detail && (\n                      <span className=\"text-muted-foreground/70 shrink-0 font-mono text-xs\">\n                        {source.detail}\n                      </span>\n                    )}\n                    {on && <Check className=\"size-3.5 shrink-0\" />}\n                  </button>\n                )\n              })}\n            </div>\n          ))}\n        </div>\n\n        {selected.length > 0 && (\n          <>\n            <DropdownMenuSeparator className=\"mx-0 my-0\" />\n            <div className=\"text-muted-foreground flex items-center justify-between gap-2 p-3 text-xs\">\n              <span>{selected.length} attached</span>\n              <Badge size=\"sm\" variant=\"secondary\">\n                {selected.length}\n              </Badge>\n            </div>\n          </>\n        )}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n\nexport { ContextPicker }\n"
    }
  ]
}