cache warming

frontend/src/detail/DetailPanel.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import {
   DownloadIcon,
@@ -217,6 +217,7 @@ const PreviewStack = ({
   emptyMessage = 'Preview unavailable',
   onItemActivate,
   onOpenPreview,
+  onZoomPreview,
   activeItemId = null,
 }) => {
   if (!items.length) {
@@ -249,7 +250,11 @@ const PreviewStack = ({
               zIndex: preparedItems.length - index,
               transform,
             }}
-            aria-hidden={hasMultiple && !onItemActivate && !onOpenPreview ? 'true' : undefined}
+            aria-hidden={
+              hasMultiple && !onItemActivate && !onOpenPreview && !onZoomPreview
+                ? 'true'
+                : undefined
+            }
           >
             <img
               src={entry.url}
@@ -257,19 +262,31 @@ const PreviewStack = ({
               className="preview-stack__image"
               onClick={(event) => {
                 event.stopPropagation();
-                if (isFront && onOpenPreview) {
+                if (isFront) {
-                  onOpenPreview(entry.id);
+                  if (onZoomPreview) {
+                    onZoomPreview(entry);
+                  } else if (onOpenPreview) {
+                    onOpenPreview(entry.id);
+                  } else if (onItemActivate) {
+                    onItemActivate(entry.id);
+                  }
                 } else if (onItemActivate) {
                   onItemActivate(entry.id);
                 }
               }}
               onKeyDown={(event) => {
-                if (!onItemActivate && !onOpenPreview) return;
+                if (!onItemActivate && !onOpenPreview && !onZoomPreview) return;
                 if (event.key === 'Enter' || event.key === ' ') {
                   event.preventDefault();
                   event.stopPropagation();
-                  if (isFront && onOpenPreview) {
+                  if (isFront) {
-                    onOpenPreview(entry.id);
+                    if (onZoomPreview) {
+                      onZoomPreview(entry);
+                    } else if (onOpenPreview) {
+                      onOpenPreview(entry.id);
+                    } else {
+                      onItemActivate?.(entry.id);
+                    }
                   } else {
                     onItemActivate?.(entry.id);
                   }
@@ -310,6 +327,11 @@ const DetailPanel = ({
 }) => {
   const selectedCount = selectedDocuments.length;
   const singleDoc = selectedCount === 1 ? selectedDocuments[0] : null;
+  const singleDocId = singleDoc?.id || null;
+  const selectionKey = useMemo(
+    () => selectedDocuments.map((doc) => doc?.id ?? '').join('|'),
+    [selectedDocuments],
+  );
 
   const singleDownloadHref = useMemo(() => {
     if (!singleDoc) return null;
@@ -328,6 +350,36 @@ const DetailPanel = ({
   const [ocrUrl, setOcrUrl] = useState(null);
   const [ocrLoading, setOcrLoading] = useState(false);
   const [ocrError, setOcrError] = useState(null);
+  const [zoomedPreview, setZoomedPreview] = useState(null);
+  const [zoomNative, setZoomNative] = useState(false);
+  const [zoomPan, setZoomPan] = useState({ x: 0, y: 0 });
+  const [isZoomDragging, setIsZoomDragging] = useState(false);
+  const zoomStageRef = useRef(null);
+  const zoomImageMetricsRef = useRef({ naturalWidth: 0, naturalHeight: 0 });
+  const zoomDragRef = useRef(null);
+  const zoomSkipClickRef = useRef(false);
+
+  const clampPan = useCallback(
+    (x, y) => {
+      const stage = zoomStageRef.current;
+      const { naturalWidth, naturalHeight } = zoomImageMetricsRef.current;
+      if (!stage || !naturalWidth || !naturalHeight) {
+        return { x: 0, y: 0 };
+      }
+      const stageRect = stage.getBoundingClientRect();
+      if (stageRect.width <= 0 || stageRect.height <= 0) {
+        return { x: 0, y: 0 };
+      }
+      const imageWidth = zoomNative ? naturalWidth : Math.min(naturalWidth, stageRect.width);
+      const imageHeight = zoomNative ? naturalHeight : Math.min(naturalHeight, stageRect.height);
+      const limitX = Math.max(0, (imageWidth - stageRect.width) / 2);
+      const limitY = Math.max(0, (imageHeight - stageRect.height) / 2);
+      const clampedX = Math.min(Math.max(x, -limitX), limitX);
+      const clampedY = Math.min(Math.max(y, -limitY), limitY);
+      return { x: clampedX, y: clampedY };
+    },
+    [zoomNative],
+  );
 
   useEffect(() => {
     if (!singleDoc) {
@@ -357,6 +409,55 @@ const DetailPanel = ({
     setOcrUrl(null);
   }, [singleDoc?.id]);
 
+  useEffect(() => {
+    setZoomedPreview(null);
+  }, [selectionKey]);
+
+  useEffect(() => {
+    if (!zoomedPreview) {
+      setZoomNative(false);
+      setZoomPan({ x: 0, y: 0 });
+      setIsZoomDragging(false);
+      zoomDragRef.current = null;
+      zoomSkipClickRef.current = false;
+    }
+  }, [zoomedPreview]);
+
+  useEffect(() => {
+    zoomSkipClickRef.current = false;
+    if (zoomNative) {
+      setZoomPan((current) => {
+        const clamped = clampPan(current.x, current.y);
+        if (clamped.x === current.x && clamped.y === current.y) {
+          return current;
+        }
+        return clamped;
+      });
+    } else {
+      setZoomPan({ x: 0, y: 0 });
+      setIsZoomDragging(false);
+      zoomDragRef.current = null;
+    }
+  }, [zoomNative, clampPan]);
+
+  useEffect(() => {
+    if (!zoomNative) {
+      return undefined;
+    }
+    const handleResize = () => {
+      setZoomPan((current) => {
+        const clamped = clampPan(current.x, current.y);
+        if (clamped.x === current.x && clamped.y === current.y) {
+          return current;
+        }
+        return clamped;
+      });
+    };
+    window.addEventListener('resize', handleResize);
+    handleResize();
+    return () => window.removeEventListener('resize', handleResize);
+  }, [zoomNative, clampPan]);
+
   const startTitleEdit = useCallback(() => {
     if (!singleDoc) return;
     setTitleEditDocId(singleDoc.id);
@@ -519,6 +620,7 @@ const DetailPanel = ({
   }, [selectedDocuments]);
 
   const stackTopDocument = stackDocuments[0] || null;
+  const stackTopDocId = stackTopDocument?.id || null;
   const stackPreviewNavigator = useAssetNavigator({
     document: stackTopDocument,
     assetType: 'preview',
@@ -718,6 +820,374 @@ const DetailPanel = ({
     [bulkCorrespondents, onBulkCorrespondentRemove, onCorrespondentRemove, selectedDocuments],
   );
 
+  const openZoomPreview = useCallback((config) => {
+    if (!config) return;
+    setZoomedPreview({
+      mode: config.mode,
+      docId: config.docId ?? null,
+    });
+    setZoomNative(false);
+    setZoomPan({ x: 0, y: 0 });
+    setIsZoomDragging(false);
+    zoomDragRef.current = null;
+    zoomSkipClickRef.current = false;
+    zoomImageMetricsRef.current = { naturalWidth: 0, naturalHeight: 0 };
+  }, []);
+
+  const closeZoomPreview = useCallback(() => {
+    setZoomedPreview(null);
+    setZoomNative(false);
+    setZoomPan({ x: 0, y: 0 });
+    setIsZoomDragging(false);
+    zoomDragRef.current = null;
+    zoomSkipClickRef.current = false;
+    zoomImageMetricsRef.current = { naturalWidth: 0, naturalHeight: 0 };
+  }, []);
+
+  const handleSingleZoom = useCallback(
+    (entry) => {
+      if (!singleHasPreview) return;
+      const targetId = entry?.id ?? singleDocId;
+      if (!targetId) return;
+      openZoomPreview({ mode: 'single', docId: targetId });
+    },
+    [openZoomPreview, singleHasPreview, singleDocId],
+  );
+
+  const handleStackZoom = useCallback(
+    (entry) => {
+      if (!stackTopDocId || entry?.id !== stackTopDocId) return;
+      if (!topHasPreview) return;
+      openZoomPreview({ mode: 'stack', docId: stackTopDocId });
+    },
+    [openZoomPreview, stackTopDocId, topHasPreview],
+  );
+
+  const handleZoomImageLoad = useCallback(
+    (event) => {
+      zoomImageMetricsRef.current = {
+        naturalWidth: event.currentTarget.naturalWidth || 0,
+        naturalHeight: event.currentTarget.naturalHeight || 0,
+      };
+      setZoomPan((current) => {
+        const clamped = clampPan(current.x, current.y);
+        return { x: clamped.x, y: clamped.y };
+      });
+    },
+    [clampPan],
+  );
+
+  const handleZoomImageClick = useCallback(
+    (event) => {
+      event.stopPropagation();
+      if (zoomSkipClickRef.current) {
+        zoomSkipClickRef.current = false;
+        return;
+      }
+
+      if (!zoomNative) {
+        const stage = zoomStageRef.current;
+        const { naturalWidth, naturalHeight } = zoomImageMetricsRef.current;
+        if (stage && naturalWidth && naturalHeight) {
+          const stageRect = stage.getBoundingClientRect();
+          const imageRect = event.currentTarget.getBoundingClientRect();
+          const clickX = event.clientX - imageRect.left;
+          const clickY = event.clientY - imageRect.top;
+          const ratioX = imageRect.width ? clickX / imageRect.width : 0.5;
+          const ratioY = imageRect.height ? clickY / imageRect.height : 0.5;
+          const focusX = naturalWidth * ratioX;
+          const focusY = naturalHeight * ratioY;
+          const halfWidth = naturalWidth / 2;
+          const halfHeight = naturalHeight / 2;
+          const limitX = Math.max(0, (naturalWidth - stageRect.width) / 2);
+          const limitY = Math.max(0, (naturalHeight - stageRect.height) / 2);
+          let targetPanX = -(focusX - halfWidth);
+          let targetPanY = -(focusY - halfHeight);
+          targetPanX = Math.min(Math.max(targetPanX, -limitX), limitX);
+          targetPanY = Math.min(Math.max(targetPanY, -limitY), limitY);
+          setZoomPan({ x: targetPanX, y: targetPanY });
+        } else {
+          setZoomPan({ x: 0, y: 0 });
+        }
+        setZoomNative(true);
+      } else {
+        setZoomNative(false);
+      }
+    },
+    [zoomNative],
+  );
+
+  const handleZoomImagePointerDown = useCallback(
+    (event) => {
+      if (!zoomNative || event.button !== 0) {
+        return;
+      }
+      event.preventDefault();
+      zoomSkipClickRef.current = false;
+      zoomDragRef.current = {
+        pointerId: event.pointerId,
+        originX: zoomPan.x,
+        originY: zoomPan.y,
+        startX: event.clientX,
+        startY: event.clientY,
+        moved: false,
+      };
+      event.currentTarget.setPointerCapture(event.pointerId);
+    },
+    [zoomNative, zoomPan],
+  );
+
+  const handleZoomImagePointerMove = useCallback(
+    (event) => {
+      const drag = zoomDragRef.current;
+      if (!drag || drag.pointerId !== event.pointerId) {
+        return;
+      }
+      const deltaX = event.clientX - drag.startX;
+      const deltaY = event.clientY - drag.startY;
+      if (!drag.moved && (Math.abs(deltaX) > 2 || Math.abs(deltaY) > 2)) {
+        drag.moved = true;
+        setIsZoomDragging(true);
+      }
+      if (drag.moved) {
+        const clamped = clampPan(drag.originX + deltaX, drag.originY + deltaY);
+        setZoomPan((current) =>
+          current.x === clamped.x && current.y === clamped.y ? current : clamped,
+        );
+      }
+    },
+    [clampPan],
+  );
+
+  const endZoomDrag = useCallback(() => {
+    zoomDragRef.current = null;
+    setIsZoomDragging(false);
+  }, []);
+
+  const handleZoomImagePointerUp = useCallback(
+    (event) => {
+      const drag = zoomDragRef.current;
+      if (!drag || drag.pointerId !== event.pointerId) {
+        return;
+      }
+      event.currentTarget.releasePointerCapture(event.pointerId);
+      zoomSkipClickRef.current = Boolean(drag.moved);
+      endZoomDrag();
+    },
+    [endZoomDrag],
+  );
+
+  const handleZoomImagePointerCancel = useCallback(
+    (event) => {
+      const drag = zoomDragRef.current;
+      if (!drag || drag.pointerId !== event.pointerId) {
+        return;
+      }
+      event.currentTarget.releasePointerCapture(event.pointerId);
+      zoomSkipClickRef.current = true;
+      endZoomDrag();
+    },
+    [endZoomDrag],
+  );
+
+  const zoomDisplay = useMemo(() => {
+    if (!zoomedPreview) {
+      return null;
+    }
+
+    if (
+      zoomedPreview.mode === 'single' &&
+      singleDocId &&
+      singleDoc &&
+      singleHasPreview &&
+      zoomedPreview.docId === singleDocId
+    ) {
+      return {
+        url: singlePreviewNavigator.currentUrl,
+        alt: singleDoc.title || singleDoc.original_name || 'Document preview',
+        canGoPrev:
+          singleEffectiveCardinality > 1 && Boolean(singlePreviewNavigator.canGoPrev),
+        canGoNext:
+          singleEffectiveCardinality > 1 && Boolean(singlePreviewNavigator.canGoNext),
+        goPrev: singlePreviewNavigator.goPrev,
+        goNext: singlePreviewNavigator.goNext,
+      };
+    }
+
+    if (
+      zoomedPreview.mode === 'stack' &&
+      stackTopDocId &&
+      stackTopDocument &&
+      zoomedPreview.docId === stackTopDocId &&
+      topHasPreview
+    ) {
+      return {
+        url: stackPreviewNavigator.currentUrl,
+        alt: stackTopDocument.title || stackTopDocument.original_name || 'Document preview',
+        canGoPrev:
+          topEffectiveCardinality > 1 && Boolean(stackPreviewNavigator.canGoPrev),
+        canGoNext:
+          topEffectiveCardinality > 1 && Boolean(stackPreviewNavigator.canGoNext),
+        goPrev: stackPreviewNavigator.goPrev,
+        goNext: stackPreviewNavigator.goNext,
+      };
+    }
+
+    return null;
+  }, [
+    zoomedPreview,
+    singleDoc,
+    singleDocId,
+    singleHasPreview,
+    singlePreviewNavigator.currentUrl,
+    singlePreviewNavigator.canGoPrev,
+    singlePreviewNavigator.canGoNext,
+    singlePreviewNavigator.goPrev,
+    singlePreviewNavigator.goNext,
+    singleEffectiveCardinality,
+    stackTopDocument,
+    stackTopDocId,
+    topHasPreview,
+    stackPreviewNavigator.currentUrl,
+    stackPreviewNavigator.canGoPrev,
+    stackPreviewNavigator.canGoNext,
+    stackPreviewNavigator.goPrev,
+    stackPreviewNavigator.goNext,
+    topEffectiveCardinality,
+  ]);
+
+  useEffect(() => {
+    if (zoomedPreview && !zoomDisplay) {
+      setZoomedPreview(null);
+    }
+  }, [zoomedPreview, zoomDisplay]);
+
+  const zoomDisplayUrl = zoomDisplay?.url;
+
+  useEffect(() => {
+    if (!zoomDisplayUrl) {
+      return;
+    }
+    setZoomPan((current) => {
+      const clamped = clampPan(current.x, current.y);
+      if (clamped.x === current.x && clamped.y === current.y) {
+        return current;
+      }
+      return clamped;
+    });
+  }, [zoomDisplayUrl, clampPan]);
+
+  useEffect(() => {
+    if (!zoomedPreview) {
+      return undefined;
+    }
+    const handleKeyDown = (event) => {
+      if (event.key === 'Escape') {
+        setZoomedPreview(null);
+        return;
+      }
+      if (event.key === 'ArrowLeft') {
+        event.preventDefault();
+        event.stopPropagation();
+        if (zoomDisplay?.canGoPrev) {
+          zoomDisplay.goPrev?.();
+        }
+        return;
+      }
+      if (event.key === 'ArrowRight') {
+        event.preventDefault();
+        event.stopPropagation();
+        if (zoomDisplay?.canGoNext) {
+          zoomDisplay.goNext?.();
+        }
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [zoomedPreview, zoomDisplay]);
+
+  useEffect(() => {
+    if (typeof ensureAssetUrl !== 'function') {
+      return;
+    }
+
+    const warmNavigator = (navigator) => {
+      const { documentId, asset, ordinal, canGoPrev, canGoNext } = navigator;
+      if (!documentId || !asset || !Number.isFinite(ordinal)) {
+        return;
+      }
+
+      const requests = [];
+      if (canGoPrev) {
+        const prevOrdinal = Math.max(1, ordinal - 1);
+        requests.push(
+          ensureAssetUrl(documentId, asset, {
+            start: prevOrdinal,
+            limit: 1,
+          }),
+        );
+      }
+      if (canGoNext) {
+        const nextOrdinal = ordinal + 1;
+        requests.push(
+          ensureAssetUrl(documentId, asset, {
+            start: nextOrdinal,
+            limit: 1,
+          }),
+        );
+      }
+
+      requests.forEach((promise) => promise?.catch?.(() => {}));
+    };
+
+    warmNavigator(singlePreviewNavigator);
+    warmNavigator(stackPreviewNavigator);
+  }, [
+    ensureAssetUrl,
+    singlePreviewNavigator.documentId,
+    singlePreviewNavigator.asset,
+    singlePreviewNavigator.ordinal,
+    singlePreviewNavigator.canGoPrev,
+    singlePreviewNavigator.canGoNext,
+    stackPreviewNavigator.documentId,
+    stackPreviewNavigator.asset,
+    stackPreviewNavigator.ordinal,
+    stackPreviewNavigator.canGoPrev,
+    stackPreviewNavigator.canGoNext,
+  ]);
+
+  const zoomImageStyle = useMemo(() => {
+    if (!zoomNative) {
+      return {
+        cursor: 'zoom-in',
+        transform: 'none',
+        maxWidth: '95vw',
+        maxHeight: '95vh',
+      };
+    }
+    const { naturalWidth, naturalHeight } = zoomImageMetricsRef.current;
+    return {
+      cursor: isZoomDragging ? 'grabbing' : 'grab',
+      width: naturalWidth ? `${naturalWidth}px` : 'auto',
+      height: naturalHeight ? `${naturalHeight}px` : 'auto',
+      maxWidth: 'none',
+      maxHeight: 'none',
+      transform: `translate3d(${zoomPan.x}px, ${zoomPan.y}px, 0)`,
+    };
+  }, [zoomNative, zoomPan.x, zoomPan.y, isZoomDragging]);
+
+  const zoomStageClassName = useMemo(
+    () =>
+      [
+        'preview-zoom__stage',
+        zoomNative ? 'preview-zoom__stage--native' : '',
+        isZoomDragging ? 'preview-zoom__stage--dragging' : '',
+      ]
+        .filter(Boolean)
+        .join(' '),
+    [zoomNative, isZoomDragging],
+  );
+
   const renderSingle = () => {
     if (!singleDoc) {
       return <p className="meta">Select a document to view metadata, tags and actions.</p>;
@@ -759,6 +1229,7 @@ const DetailPanel = ({
             emptyMessage="Preview loading…"
             onItemActivate={handlePreviewActivate}
             onOpenPreview={onOpenPreview}
+            onZoomPreview={handleSingleZoom}
             activeItemId={activePreviewId}
           />
           {hasPreviewImage && (effectiveCardinality > 1 || canGoPrev || canGoNext) ? (
@@ -980,6 +1451,7 @@ const DetailPanel = ({
             emptyMessage="No previews available."
             onItemActivate={handlePreviewActivate}
             onOpenPreview={onOpenPreview}
+            onZoomPreview={handleStackZoom}
             activeItemId={activePreviewId}
           />
           {topDocIdLocal && topHasPreview && (topCardinalityLocal > 1 || topCanGoPrev || topCanGoNext) ? (
@@ -1060,13 +1532,14 @@ const DetailPanel = ({
   const showOcrAction = Boolean(singleDoc && hasOcrAsset);
 
   return (
-    <aside className="detail-panel panel">
+    <>
-      <div className="panel-header">
+      <aside className="detail-panel panel">
-        <div className="panel-actions">
+        <div className="panel-header">
-          <button
+          <div className="panel-actions">
-            type="button"
+            <button
-            className="icon-button ghost"
+              type="button"
-            onClick={onClose}
+              className="icon-button ghost"
+              onClick={onClose}
             aria-label="Close detail panel"
             title="Close detail panel"
           >
@@ -1148,7 +1621,68 @@ const DetailPanel = ({
       <div className="panel-body">
         {selectedCount <= 1 ? renderSingle() : renderBulk()}
       </div>
-    </aside>
+      </aside>
+      {zoomDisplay?.url
+        ? createPortal(
+            <div
+              className="preview-zoom-backdrop"
+              role="dialog"
+              aria-modal="true"
+              aria-label="Enlarged document preview"
+              onClick={closeZoomPreview}
+            >
+              <div ref={zoomStageRef} className={zoomStageClassName}>
+                <img
+                  src={zoomDisplay.url}
+                  alt={zoomDisplay.alt}
+                  className="preview-zoom__image"
+                  style={zoomImageStyle}
+                  onLoad={handleZoomImageLoad}
+                  onClick={handleZoomImageClick}
+                  onPointerDown={handleZoomImagePointerDown}
+                  onPointerMove={handleZoomImagePointerMove}
+                  onPointerUp={handleZoomImagePointerUp}
+                  onPointerCancel={handleZoomImagePointerCancel}
+                  draggable={false}
+                />
+                {zoomDisplay.canGoPrev || zoomDisplay.canGoNext ? (
+                  <div className="preview-zoom__nav">
+                    <button
+                      type="button"
+                      className="preview-zoom__nav-button"
+                      onClick={(event) => {
+                        event.stopPropagation();
+                        if (zoomDisplay.canGoPrev) {
+                          zoomDisplay.goPrev?.();
+                        }
+                      }}
+                      aria-label="Previous preview"
+                      disabled={!zoomDisplay.canGoPrev}
+                    >
+                      <ArrowLeftIcon />
+                    </button>
+                    <button
+                      type="button"
+                      className="preview-zoom__nav-button"
+                      onClick={(event) => {
+                        event.stopPropagation();
+                        if (zoomDisplay.canGoNext) {
+                          zoomDisplay.goNext?.();
+                        }
+                      }}
+                      aria-label="Next preview"
+                      disabled={!zoomDisplay.canGoNext}
+                    >
+                      <ArrowRightIcon />
+                    </button>
+                  </div>
+                ) : null}
+              </div>
+            </div>,
+            document.body,
+          )
+        : null}
+    </>
   );
 };
 

frontend/src/styles.css

@@ -215,6 +215,102 @@ button.danger:hover:not([disabled]) {
   background: var(--sidebar-hover-bg);
 }
 
+.preview-zoom-backdrop {
+  position: fixed;
+  inset: 0;
+  background: var(--overlay-backdrop);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+  z-index: 3000;
+  cursor: zoom-out;
+}
+
+.preview-zoom__stage {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  max-width: 95vw;
+  max-height: 95vh;
+  cursor: zoom-in;
+}
+
+.preview-zoom__stage--native {
+  cursor: grab;
+}
+
+.preview-zoom__stage--dragging {
+  cursor: grabbing;
+}
+
+.preview-zoom__image {
+  max-width: 95vw;
+  max-height: 95vh;
+  width: auto;
+  height: auto;
+  border-radius: 0;
+  box-shadow: 0 32px 120px rgba(15, 23, 42, 0.55);
+  cursor: inherit;
+}
+
+.preview-zoom__nav {
+  position: absolute;
+  bottom: 1em;
+  left: 50%;
+  transform: translateX(-50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.9rem;
+  opacity: 0;
+  transition: opacity 0.18s ease;
+  pointer-events: none;
+}
+
+.preview-zoom__stage:hover .preview-zoom__nav,
+.preview-zoom__stage:focus-within .preview-zoom__nav {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.preview-zoom__nav-button {
+  width: 2.8rem;
+  height: 2.8rem;
+  border: none;
+  border-radius: 999px;
+  background: rgba(0, 0, 0, 0.62);
+  color: #fff;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 1;
+  transition: background 0.15s ease, transform 0.15s ease;
+  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.28);
+}
+
+.preview-zoom__nav-button:hover {
+  background: rgba(0, 0, 0, 0.82);
+}
+
+.preview-zoom__nav-button:focus-visible {
+  outline: 2px solid var(--accent, #4f46e5);
+  outline-offset: 3px;
+}
+
+.preview-zoom__nav-button svg {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.preview-zoom__nav-button[disabled] {
+  opacity: 0.35;
+  cursor: default;
+}
+
 .with-icon {
   display: inline-flex;
   align-items: center;
@@ -1740,7 +1836,6 @@ button.danger:hover:not([disabled]) {
   filter: drop-shadow(0 2px 6px var(--shadow-soft));
   transform-origin: center;
   border-radius: 6px;
-  overflow: hidden;
   pointer-events: none;
 }