Show transparent images frameless, like stickers

[gitautas]

What

Images that are mostly transparent now render the way stickers do: no card border, no background, no rounded frame, and object-fit: contain instead of cover. Clicking still opens the lightbox.

Why

A transparent PNG pasted into a room is nearly always meant as a sticker (a character, a reaction, something cut out of its background). The card frame puts back the box it was cut out of.

How

• src/lib/cutout.ts (new): for image/png|apng|webp|gif|avif only, fetches the thumbnail the timeline already shows, draws it at 48×48 and counts pixels with alpha < 128. If 4% or more are see-through, it's a cut-out. Answers are cached per mxc in memory and in localStorage (capped at 500), so there's no frame flash on later launches. Failed checks aren't persisted.
• Why IPC instead of the <img>: an image from uwum:// is cross-origin, so drawing it taints the canvas. Rather than adding CORS headers to the private media protocol, the bytes come over get_media_bytes.
• get_media_bytes now takes optional width/height so the check requests the same thumbnail as the <img> and hits the SDK media cache. Existing callers (video/audio) pass neither and behave as before. thumbnailSize() is factored out of mediaUrl in ipc.ts so both compute the same size.
• ImageBody: cut-outs keep their picture-sized box, so detection doesn't shift the timeline.

Reviewer notes

• macOS window screenshots with a drop shadow have a wide transparent margin and will also render frameless.
• Detection only works on the receiving side, so it applies to images from any client. Nothing about what's sent changes. If a homeserver re-encodes PNG thumbnails as JPEG, the image just stays framed.
• Not yet checked in a running build (dev builds can't be screenshotted). Typecheck, cargo check, and all 159 tests pass, 5 of them new for isCutout.

🤖 Generated with Claude Code