Media card

What’s playing or downloading, with artwork, progress and tags. A download getting nowhere says so in words.

Variations

4 samples, each at every size that draws differently, then in chat, in the light theme, and as a ring where it has a headline.

Small draws the same as medium. Wide draws the same as medium, so they aren't shown. Only the empty space changes.

Small draws the same as medium. Wide draws the same as medium, so they aren't shown. Only the empty space changes.

Small draws the same as medium. Wide draws the same as medium. Tall draws the same as medium, so they aren't shown. Only the empty space changes.

Small draws the same as medium. Wide draws the same as medium. Tall draws the same as medium, so they aren't shown. Only the empty space changes.

Every card also takes the fields all cards share.

Field	Type	What it does
`title`	`string`
`subtitle?`	`string`	episode / artist
`image?`	`string`	poster / cover
`backdrop?`	`string`	wide artwork shown full-bleed behind the item
`pct?`	`number`	playback position 0..1
`state?`	`'playing' \| 'paused' \| 'buffering'`
`user?`	`string`
`device?`	`string`
`detail?`	`string`	e.g. “4K · direct play · 36 Mbps”
`tags?`	`string[]`	small labels shown as chips, e.g. [“4K”, “Transcode”, “40 Mbps”]
`remaining?`	`string`	e.g. “41 min left”
`icon?`	`string`	the glyph by the progress bar (default: a status dot), e.g. download
`stall?`	`Stall`	a download getting nowhere: say so in words, and what to do next

Why a download isn’t moving. since is when it last moved (ms); next is the step offered on its row.

Field	Type	What it does
`word?`	`string`
`since?`	`number`
`why?`	`string`
`next?`	`{ label: string; href?: string; action?: string; args?: Record<string, unknown> }`