[mostafazh]

Members on the hub reported that the "T4P member" name tag lands on their chin or mouth. With a tightly cropped photo, or a tall photo that gets centre-cropped, the face fills the frame and the tag sits right on it.

On co-brand links (?b=<code>), the photo can now be placed inside the frame:

• Drag the photo to move it, up and down or sideways.
• Zoom slider from 50% to 200%. 100% fills the circle as before.
• The circle and the flag ring don't change, so the border stays even.
• Where a zoomed-out photo leaves the circle uncovered, a soft blur of the photo fills in. It's made with canvas rather than CSS filter, so it rasterises the same in Blink, Gecko and WebKit.

Other details:

• The plain PPM page doesn't change: no slider, and the photo can't be dragged.
• The story card in the share panel uses the same placement, so what gets shared matches the download.
• Start Over resets the placement.
• Downloaded now carries adjusted: on/off, so we can see whether people use it.

The photo is now rendered by one FramedPhoto component, shared by the page and the story card.

Tests: tsc and lint clean, vitest 164/164. The branding, start-over, generate-pfp and link-first e2e specs pass on Chromium, Firefox and WebKit (42/42). A new test checks that zooming and dragging change the downloaded photo while every ring pixel stays the same, and that the slider is absent without a valid link.

[cloudflare-workers-and-pages]

Deploying palestine-pfp-maker with    Cloudflare Pages

Latest commit:	e45c43c
Status:	✅  Deploy successful!
Preview URL:	https://22a8baba.palestine-pfp-maker.pages.dev
Branch Preview URL:	https://mostafazh-photo-zoom.palestine-pfp-maker.pages.dev

View logs