Product Search and Filter Page

Problem/Feature Description

An e-commerce team is building a Vue 3 product search page with live filtering. The page fetches a catalog from /api/products (returning { data: Product[] } where Product has id, name, category, price, and rating) and lets users filter by category and minimum rating, and search by name using a text input. The filtered results and the result count are displayed on screen.

The team wants the browser tab title to always reflect the current search state so users with many open tabs can identify this one quickly — the title should update automatically as any filter changes. They also want the current filter values persisted to localStorage under the key productFilters so the user's selections survive a page refresh. The lead developer has asked that each of these concerns be implemented cleanly so junior developers can understand the intent immediately from reading the code.

There is also a subtle product requirement: when the selected category changes, a GET /api/products/category-meta?cat={category} call should be made to fetch a short description of that category to display at the top of the results — but this should NOT fire when only the rating slider or search text changes.

Output Specification

Produce the following Vue 3 component files:

• src/components/ProductSearchPage.vue — the main page component that fetches the full product catalog, exposes filters (search text, category, min rating), computes the filtered result list and result count, persists filter state, updates the document title reactively, and fetches category metadata when the category changes.
• src/components/ProductCard.vue — a small child component that displays a single product's name, category, price, and rating. It should accept the product as a prop.

Use TypeScript throughout.