Function ImageModal

packages/shared/src/components/modals/ImageModal.tsx:46–203

({
  onRequestClose,
  src,
  alt = 'Image',
  originRect,
}: ImageModalProps)

 * trapped under that portal at the same z-index.
 */
export default function ImageModal({
  onRequestClose,
  src,
  alt = 'Image',
  originRect,
}: ImageModalProps): ReactElement | null {
  const close = () => onRequestClose?.(undefined as never);
  const imgRef = useRef<HTMLImageElement>(null);
  const hasPlayedRef = useRef(false);

  // FLIP: render the image at its final centered size, but start it transformed
  // to sit over the clicked thumbnail, then animate the transform away so it
  // visually grows from the thumbnail into the full view.
  const playFlip = () => {
    const img = imgRef.current;
    if (!originRect || !img || hasPlayedRef.current) {
      return;
    }
    const final = img.getBoundingClientRect();
    if (!final.width || !final.height) {
      // Not laid out yet (image still loading) — onLoad will retry.
      return;
    }
    hasPlayedRef.current = true;

    // A single uniform scale (not independent sx/sy) so the image keeps its
    // aspect ratio and never warps mid-flight. `min` contains the start frame
    // within the thumbnail's footprint, so it reads as lifting off from there.
    const scale = Math.min(
      originRect.width / final.width,
      originRect.height / final.height,
    );
    // Translate centers together (transform-origin is the center too), so the
    // image grows out of where the thumbnail sat rather than from a corner.
    const dx =
      originRect.left + originRect.width / 2 - (final.left + final.width / 2);
    const dy =
      originRect.top + originRect.height / 2 - (final.top + final.height / 2);
    // Transform scales the corner radius along with everything else, so a fixed
    // radius would render near-square at the small start scale and then "snap"
    // round. Pre-divide by the scale so the rendered radius stays a constant
    // ~16px (rounded-16) for the whole animation; read the resting value off the
    // element so it tracks the class instead of a hardcoded number.
    const restRadius =
      parseFloat(getComputedStyle(img).borderTopLeftRadius) || 16;

    img.style.transformOrigin = 'center center';
    img.style.transition = 'none';
    img.style.transform = `translate(${dx}px, ${dy}px) scale(${scale})`;
    img.style.borderRadius = `${restRadius / scale}px`;
    img.style.opacity = '1';
    // Two frames: let the browser paint the start state first, then transition
    // to identity — doing both in one frame can coalesce and snap.
    requestAnimationFrame(() => {
      requestAnimationFrame(() => {
        img.style.transition =
          'transform 300ms cubic-bezier(0.16, 1, 0.3, 1), border-radius 300ms cubic-bezier(0.16, 1, 0.3, 1)';
        img.style.transform = 'none';