feat(showcase): click-to-view full-size image/video in recipe and model modals (#926)

- Add MediaViewer overlay for full-size image/video display with prev/next
  navigation, direction keys, counter, and adjacent preloading
- Recipe modal: click preview image/video opens full-size viewer
- Model showcase: click any example image/video opens viewer with full
  gallery navigation; blurred NSFW content opens directly to clear view
- Use Map<Element, number> for DOM-index mapping instead of URL comparison
  to avoid index mismatch from lazy-loaded vs data-attribute URLs

static/js/components/shared/showcase/ShowcaseView.js

@@ -17,6 +17,7 @@ import {
 import { generateMetadataPanel } from './MetadataPanel.js';
 import { generateImageWrapper, generateVideoWrapper } from './MediaRenderers.js';
 import { getShowcaseUrl } from '../../../utils/civitaiUtils.js';
+import { openMediaViewer } from '../MediaViewer.js';
 
 export const showcaseListenerMetrics = {
     wheelListeners: 0,
@@ -640,6 +641,27 @@ export function initShowcaseContent(carousel) {
     initMediaControlHandlers(carousel);
     positionAllMediaControls(carousel);
 
+    // Click-to-view: open full-size media viewer when clicking showcase images/videos
+    const viewerElements = carousel.querySelectorAll('.media-wrapper img, .media-wrapper video');
+    const allItems = [];
+    const elementIndexMap = new Map();
+    viewerElements.forEach((el) => {
+        const isVideo = el.tagName === 'VIDEO';
+        const url = el.src || el.dataset.localSrc || el.dataset.remoteSrc;
+        if (url) {
+            elementIndexMap.set(el, allItems.length);
+            allItems.push({ url, type: isVideo ? 'video' : 'image' });
+        }
+    });
+    viewerElements.forEach((mediaEl) => {
+        const idx = elementIndexMap.get(mediaEl);
+        if (idx === undefined) return;
+        mediaEl.addEventListener('click', (e) => {
+            e.stopPropagation();
+            openMediaViewer(allItems, idx);
+        });
+    });
+
     // Bind scroll-indicator click events
     bindScrollIndicatorEvents(carousel);