feat: add image viewer with zoom and pan

Full-featured image viewer with pinch-zoom, scroll-zoom, drag-pan,
double-click reset, and keyboard shortcuts. Animated open/close
transitions match the origin element position. Integrates into
attachment display with click-to-open behavior.

app/components/Attachment/Display.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import ImageViewer from '~/components/ImageViewer.vue';
+
 const props = defineProps<{
     file: {
         id: string;
@@ -7,7 +9,7 @@ const props = defineProps<{
         status?: 'uploading' | 'uploaded' | 'error';
         url: string;
         progress?: number;
-    }
+    };
 }>();
 
 const isImage = computed(() => props.file.mimeType.startsWith('image/'));
@@ -15,6 +17,10 @@ const isVideo = computed(() => props.file.mimeType.startsWith('video/'));
 const isAudio = computed(() => props.file.mimeType.startsWith('audio/'));
 const isPdf = computed(() => props.file.mimeType === 'application/pdf');
 
+const imageViewerOpen = ref(false);
+const imageRef = ref<HTMLImageElement | null>(null);
+const imageViewerOriginRect = ref<DOMRect | null>(null);
+
 const fileIcon = computed(() => {
     if (isImage.value) return 'i-mynaui-image';
     if (isVideo.value) return 'i-mynaui-video';
@@ -29,11 +35,23 @@ const fileExtension = computed(() => {
     const parts = props.file.name.split('.');
     return parts.length > 1 ? parts.pop()?.toUpperCase() : 'FILE';
 });
+
+function openImageViewer() {
+    imageViewerOriginRect.value = imageRef.value?.getBoundingClientRect() ?? null;
+    imageViewerOpen.value = true;
+}
 </script>
 
 <template>
     <div class="relative h-full w-fit flex">
-        <img v-if="isImage" :src="props.file.url" class="rounded-lg h-full w-full max-h-36 max-w-64 object-cover" />
+        <div v-if="isImage">
+            <img ref="imageRef" :src="props.file.url"
+                class="rounded-lg h-full w-full max-h-36 max-w-64 object-cover cursor-zoom-in hover:opacity-90 transition-opacity"
+                @click="openImageViewer" />
+            <ImageViewer v-if="imageViewerOpen" :src="props.file.url" :alt="props.file.name"
+                :origin-rect="imageViewerOriginRect" :origin-element="imageRef"
+                @close="imageViewerOpen = false" />
+        </div>
         <video v-else-if="isVideo" controls :src="props.file.url"
             class="rounded-lg h-full w-full max-h-36 max-w-64 object-cover" />
         <audio v-else-if="isAudio" controls :src="props.file.url" class="rounded-lg h-full w-full max-h-36 max-w-64" />