{
  "id": "search-bar",
  "name": "Search Bar",
  "category": "data",
  "description": "Inline local search with lightweight ranking and highlighting",
  "details": "A controlled InlineSearch component and a small local ranking hook. The feature does not own overlays, persistence, history, networking, navigation, or app state.",
  "files": [
    {
      "src": "src/search-model.ts",
      "dest": "src/components/search/search-model.ts"
    },
    {
      "src": "src/InlineSearch.tsx",
      "dest": "src/components/search/InlineSearch.tsx"
    }
  ],
  "instructions": [
    "Import InlineSearch from @/components/search/InlineSearch and useSearchIndex from @/components/search/search-model.",
    "Keep source data, async fetching, navigation, and persistence in the page that owns the search experience."
  ],
  "agentNotes": [
    "Use this feature for local list, feed, table, picker, or RecordRoom filtering. Build a product-specific overlay only when the app actually needs one."
  ],
  "patterns": [
    "Call useSearchIndex in the page, map results to SearchItem[], and pass the controlled query and selection handler to InlineSearch."
  ],
  "example": "import { InlineSearch } from '@/components/search/InlineSearch'\nimport { useSearchIndex } from '@/components/search/search-model'\n\nconst results = useSearchIndex({ items: posts, query, getText: (post) => [post.title, post.body] })\n\n<InlineSearch query={query} onQueryChange={setQuery} items={results.map((post) => ({ id: post.id, title: post.title, description: post.body }))} onSelect={(item) => openPost(item.id)} />"
}