Dashboard Widget System

Problem/Feature Description

A SaaS analytics company needs a dashboard page built with Svelte 5 and SvelteKit. The page displays metric widgets and allows users to filter data.

The main dashboard page at /dashboard loads metric data from the server. It has:

1. A MetricCard component that wraps content in a styled card. It accepts a title, an optional header area, and default body content from the parent. The card also has a "Refresh" button that calls a parent-provided callback.
2. A filter bar with a text search and a category dropdown. The displayed metrics should be reactively filtered based on these inputs.
3. The metric data from the API is a large dataset (hundreds of records) that gets replaced entirely on each refresh -- it is never mutated item by item.

The team wants all components written in idiomatic Svelte 5 with TypeScript. They want to ensure the composition approach uses the modern API (not slots), and that the filtering is done with derived values (not legacy reactive declarations).

Output Specification

Produce the following files:

• src/routes/dashboard/+page.server.ts -- loads metric data from server
• src/routes/dashboard/+page.svelte -- dashboard page with filter bar and metric cards
• src/lib/components/MetricCard.svelte -- card wrapper component

The API can be simulated -- use https://jsonplaceholder.typicode.com/posts as the data source, treating each post as a metric record. Write the files as they would appear in a working Svelte 5 SvelteKit project.