[kitlangton]

Stacks on #56996 (motion-presets), which has merged. It uses that PR's single Image open spring.

Why

Kit's notes from trying the image preview in Beta:

• "When it goes back, there's a cut here." On close, a large image partly under the title bar lost its top strip in one frame as it landed.
• Reviewing the first video: "It seems like the background color just jumps for this one, but it smoothly transitions for this one." On the small upload's open, the backdrop darkened in one step.
• "Does it also work for smaller? … the border flicks in." With a small image or an uploaded attachment, the preview's large panel faded in at full size around the small flying image. The attachment's hairline border also popped back in after the image landed.

Causes (from frame traces)

• The cut. The close flew to the origin's full getBoundingClientRect(). The top 28 px of that rect sat under the sticky title bar, so the stand-in, which flies above everything, drew the image over the bar for the whole flight. When the page's own image took over, that strip vanished in a single frame (max luma step 200).

• The border flick. The panel's surface (background, radius, shadow) belonged to the dialog content, which only faded in place at its final 1152 px width. It never grew with the image. Separately, the thumbnail's hairline is an ::after overlay that disappears with the hidden origin. The stand-in didn't carry it, so it popped back when the origin reappeared.

• The backdrop jump. The preview dims the page with its own scrim, on the flight's spring, and hides the dialog stack's overlay with [data-component="dialog-overlay"]:has(+ … image-preview) { background-color: transparent }. That override sits in the components cascade layer. overlays/dialog/dialog.css is imported unlayered, and unlayered rules beat layered ones whatever their specificity, so the overlay stayed at its full 60% black. It appeared in the first frame of an open and vanished in the first frame of a close, under the scrim's spring. Page background luma went 35 → 23 in one frame while the scrim was still at 0.1. This happened on every open and close, before this PR too.

What changes

• The backdrop follows the spring. The overlay override is now !important, which beats an unlayered normal declaration, so only the preview's scrim dims the page. Page background luma now moves at most 3 per frame (35 → 34 → 31 → 30 → 28 … → 24 on open, the reverse on close) in every scene. The fully open dim is a little lighter than before, since it's one scrim rather than scrim plus overlay (luma 24 rather than 19).

• The flight starts and ends where the page shows the image. visibleBox intersects the origin with its clipping ancestors and the window. It then binary-searches along the vertical centre line with elementsFromPoint to find bars covering the top or bottom, such as the sticky title bar. The flight's crop morphs to that region on the same springs, so the image slides under the bar instead of being cut at the end.

• A soft hand-back on close. Once the close lands, the page image shows again and the stand-in fades out over it (0.75× the spring, 0.15 s at Snappy). Anything the page draws over its own image, like the 16 px fade under the title bar, comes in over a few frames instead of one.

• The panel grows out of the image. A surface flies with the image, from the visible thumbnail to the panel's rect. It has its own radius springs and a lift value (0 on the page, 1 open) that raises the shared --image-preview-shadow. The controls ride the panel's top corner and fade in with lift². While the surface flies, the real content's background and shadow are transparent, so the hand-off has nothing to swap.

• The thumbnail's outline is carried. The origin's outline (its box-shadow, or the ::after overlay used on attachments) is drawn over the flying image and fades as it lifts. It's back at full strength when the close lands, so the attachment's border never flicks.

• Reversal mid-flight keeps the position and velocity of every value, the panel included. Reduced motion still only fades.

Evidence

Frame-stepped Storybook harness (virtual clock, 60 fps), with a session timeline under the real title-bar markup and fictional data. Before | after, each pair synced:

• 1×: https://problems.kitlangton.com/media/hUS_xcr1QxmOM9VtS5aycg.mp4
• 0.25×: https://problems.kitlangton.com/media/EXSGJERluIybg7zywvmslg.mp4

Covered, in order: small upload open, close, and closed mid-flight; small inline image open and close; large close under the title bar.

Per-frame luma-difference peaks at the hand-off frame, before → after:

• Large close: 200 in one frame → ≤46, spread over 5 frames.
• Small upload close: border pop → ≤7.
• Inline close: 76 → ≤20.

Verification

• packages/ui: bun test src/components/image-flight.test.ts. New cases cover the crop starting under a sticky bar, the panel growing monotonically with lift in step with the image, and landing exactly.
• bun typecheck in ui, app, gui-extensions and session-ui. bun run lint:changed origin/beta is clean.