feat: 媒体流图片自适应显示(单图/2图/Telegram式相册)

- 单图气泡按真实比例显示:横图限高260px、过高裁上下;竖图完整铺满宽度不裁、无黑边
- 2张同类相册:都竖图左右并排、都横图上下堆叠,按比例不裁
- 3+张相册:Telegram式马赛克拼贴(竖主图占左+其余堆右 / 横主图占顶+其余排底)
- 图片比例优先用后端width/height,缺失时从加载后的naturalWidth/Height读取
- 新增 constants/media.ts 统一尺寸规范;albumLayout 纯算法附单测

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/components/messageStream/bubbles/ImageBubble.tsx

@@ -1,27 +1,8 @@
 import type { Post } from "../../../types/post";
-import { AttachmentDownloadPill } from "../AttachmentDownloadPill";
-import { BubbleImage } from "../BubbleImage";
-import { useLightbox } from "../overlays/ImageLightbox";
+import { SingleImageFrame } from "./SingleImageFrame";
 
 export function ImageBubble({ post }: { post: Post }) {
-  const { openLightbox } = useLightbox();
   const att = post.attachments[0];
   if (!att) return null;
-  return (
-    <div className="relative h-[180px] w-full overflow-hidden bg-black min-[440px]:h-[210px] md:h-[260px] lg:h-[300px]">
-      <button
-        type="button"
-        onClick={() => openLightbox([att], 0, undefined, post.id)}
-        className="block h-full w-full"
-        aria-label="View image"
-      >
-        <BubbleImage
-          src={att.url}
-          loading="lazy"
-          className="h-full w-full object-cover"
-        />
-      </button>
-      <AttachmentDownloadPill postId={post.id} attachment={att} />
-    </div>
-  );
+  return <SingleImageFrame postId={post.id} attachment={att} />;
 }