@bytebrand/fe-ui-core-autobahn 1.0.127 → 1.0.130

package/vdp/VdpViewer.tsx

@@ -51,6 +51,24 @@ import logoUrl from '../assets/autode-logo.svg';
 const ZOOM_MIN = 1;
 const ZOOM_MAX = 3;
 const ZOOM_STEP = 0.5;
+// Spring constants for the slide-to-neighbor-photo animation, shared by the desktop AND mobile
+// (portrait/landscape) stages below — same physics, same tuning, just two separate refs/loops
+// per stage (each only ever mounts one at a time, but the constants don't need duplicating).
+// Critically damped (damping = 2·√stiffness, so it approaches with no overshoot/bounce) and
+// tuned so a single ±1 move settles in ~800-850ms — matches mobile.de's own gallery, measured by
+// sampling ITS transform frame-by-frame; see ui/CardCarousel.tsx's spring loop doc comment (the
+// first place this pattern was built) for the full derivation and why a spring instead of a CSS
+// transition at all: a fixed-duration curve restarts from zero velocity on every retarget (a new
+// swipe/click before the previous one settles), which reads as jitter under fast repeat use — a
+// spring's velocity carries continuously across retargets instead.
+const SPRING_STIFFNESS = 64;
+const SPRING_DAMPING = 16;
+// Below these thresholds the spring is considered "arrived": stop stepping it (saves CPU while
+// idle) and snap the last fractional pixel so the resting position is exact, not just "close
+// enough" — see CardCarousel's own copy of these same two constants for the measured reasoning
+// behind the specific numbers (velocity, not position, turned out to be the binding constraint).
+const SETTLE_POS_EPS = 0.015;
+const SETTLE_VEL_EPS = 0.09;
 const THUMB_W = 64;
 const THUMB_H = 50;
 const THUMB_GAP = 8;
@@ -540,9 +558,161 @@ const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0,
   const [zoom, setZoom] = useState(ZOOM_MIN);
   const [pan, setPan] = useState({ x: 0, y: 0 });
   const n = images.length;
-  const go = (d: number) => setI((p) => (p + d + n) % n);
   const stageRef = useRef<HTMLDivElement | null>(null);
 
+  // Desktop layout's photo-to-photo animation — a live-drag + spring slide between the current
+  // photo and its neighbor, matching CardCarousel's (ui/CardCarousel.tsx) carousels elsewhere in
+  // the app. Before this, a desktop swipe/arrow-click just swapped `images[i]` outright (only the
+  // zoom `scale()` had a transition) — no slide motion at all, and mouse-drag didn't even exist
+  // (the old mechanism was touch-only, on the whole overlay, not this stage). Mobile (portrait/
+  // landscape) gets the identical treatment further below (`mobileTrack*`), folded into its
+  // EXISTING single pointer-drag gesture instead of a separate handler set — see that block's
+  // own doc comment for why. Kept as two parallel sets of refs/handlers (`desktopTrack*` /
+  // `mobileTrack*`), not one shared implementation: only one of the two stages is ever actually
+  // mounted at a time (layout is either 'desktop' or portrait/landscape), and desktop's simpler
+  // gesture (always a swipe, zoom never pans — see clampPan's own doc comment) doesn't need
+  // threading through mobile's zoom-gated pan/pinch/swipe branch, or vice versa.
+  //
+  // Structural difference from CardCarousel: that one renders ALL n images in one extended
+  // [clone-last, ...images, clone-first] track and walks a single persistent index through it.
+  // Here there's already a single `i` (0..n-1) as the source of truth (arrows/keyboard/thumbnails/
+  // the "all photos" sheet all set it), so instead the track always renders exactly 3 images —
+  // [prev, current, next], RECOMPUTED every time `i` changes — with the spring's target FIXED at
+  // 1 (the center slot, i.e. "showing `images[i]`") rather than walking to a new target each time.
+  // A ±1 step (arrow/drag-release, both go through go() below) doesn't move the target — it moves
+  // the WINDOW: `i` advances and visualPos is compensated by the same ∓1 so the two together
+  // still describe the exact same on-screen position the instant `i` changes (old-current becomes
+  // new-prev or new-next, so a `visualPos` that was e.g. 30% of the way toward old-next reads as
+  // exactly 30% of the way FROM new-prev toward new-current) — the spring then keeps animating,
+  // uninterrupted, toward the same fixed target 1 it always had.
+  const desktopTrackRef = useRef<HTMLDivElement | null>(null);
+  const desktopVisualPosRef = useRef(1);
+  const desktopVelocityRef = useRef(0);
+  const desktopRafIdRef = useRef<number | null>(null);
+  const writeDesktopTransform = (pos: number) => {
+    const el = desktopTrackRef.current;
+    if (el) el.style.transform = `translateX(${(-pos * 100).toFixed(4)}%)`;
+  };
+  const stepDesktopLoop = (lastT: number) => {
+    desktopRafIdRef.current = requestAnimationFrame((now) => {
+      const dt = Math.min((now - lastT) / 1000, 1 / 30); // cap dt so a lag spike can't overshoot
+      const accel = SPRING_STIFFNESS * (1 - desktopVisualPosRef.current) - SPRING_DAMPING * desktopVelocityRef.current;
+      desktopVelocityRef.current += accel * dt;
+      desktopVisualPosRef.current += desktopVelocityRef.current * dt;
+      writeDesktopTransform(desktopVisualPosRef.current);
+      const atRest = Math.abs(1 - desktopVisualPosRef.current) < SETTLE_POS_EPS && Math.abs(desktopVelocityRef.current) < SETTLE_VEL_EPS;
+      if (atRest) {
+        desktopVisualPosRef.current = 1;
+        desktopVelocityRef.current = 0;
+        writeDesktopTransform(1);
+        desktopRafIdRef.current = null;
+        return;
+      }
+      stepDesktopLoop(now);
+    });
+  };
+  const ensureDesktopLoopRunning = () => {
+    if (desktopRafIdRef.current == null) stepDesktopLoop(performance.now());
+  };
+  useEffect(
+    () => () => {
+      if (desktopRafIdRef.current != null) cancelAnimationFrame(desktopRafIdRef.current);
+    },
+    [],
+  );
+  // Safety net: Chrome fully SUSPENDS requestAnimationFrame while the tab is hidden and does NOT
+  // auto-resume it on its own once the tab is visible again (confirmed empirically — a spring
+  // mid-flight when visibility is lost is left frozen exactly where it was, forever, with no
+  // further frames ever requested). A swipe released right before the tab backgrounds — e.g.
+  // switching apps mid-gesture, an everyday mobile habit — would otherwise strand the photo
+  // between two slides indefinitely. Nudges the loop back on if it's stuck mid-animation
+  // (rafIdRef null, i.e. no frame currently scheduled, AND not yet at the target) the moment the
+  // tab becomes visible again.
+  useEffect(() => {
+    const onVisibilityChange = () => {
+      if (document.visibilityState !== 'visible') return;
+      if (desktopRafIdRef.current == null && Math.abs(1 - desktopVisualPosRef.current) > SETTLE_POS_EPS) {
+        ensureDesktopLoopRunning();
+      }
+    };
+    document.addEventListener('visibilitychange', onVisibilityChange);
+    return () => document.removeEventListener('visibilitychange', onVisibilityChange);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  // Every ±1 step — arrow click OR a released drag past the threshold (desktopOnPointerUp
+  // below) — goes through here; keyboard nav already calls this too (goRef.current(±1) further
+  // down), so it gets the same animation for free. Thumbnail clicks and the "all photos" sheet
+  // deliberately DON'T (they call setI(k) directly) — an arbitrary jump has no single "slide
+  // direction" to animate, so the effect below just snaps the track for those instead.
+  const changedViaGoRef = useRef(false);
+  const go = (d: number) => {
+    changedViaGoRef.current = true;
+    desktopVisualPosRef.current -= d;
+    mobileVisualPosRef.current -= d;
+    setI((p) => (p + d + n) % n);
+    if (desktopTrackRef.current) ensureDesktopLoopRunning();
+    if (mobileTrackRef.current) ensureMobileLoopRunning();
+  };
+  useEffect(() => {
+    if (changedViaGoRef.current) {
+      changedViaGoRef.current = false;
+      return;
+    }
+    if (desktopRafIdRef.current != null) {
+      cancelAnimationFrame(desktopRafIdRef.current);
+      desktopRafIdRef.current = null;
+    }
+    desktopVisualPosRef.current = 1;
+    desktopVelocityRef.current = 0;
+    writeDesktopTransform(1);
+    if (mobileRafIdRef.current != null) {
+      cancelAnimationFrame(mobileRafIdRef.current);
+      mobileRafIdRef.current = null;
+    }
+    mobileVisualPosRef.current = 1;
+    mobileVelocityRef.current = 0;
+    writeMobileTransform(1);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [i]);
+  const desktopDragRef = useRef<{ x: number; startPos: number } | null>(null);
+  const [isDesktopDragging, setIsDesktopDragging] = useState(false);
+  const desktopOnPointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
+    if (n <= 1 || (e.target as HTMLElement).closest('button')) return;
+    desktopDragRef.current = { x: e.clientX, startPos: desktopVisualPosRef.current };
+    desktopVelocityRef.current = 0;
+    if (desktopRafIdRef.current != null) {
+      cancelAnimationFrame(desktopRafIdRef.current);
+      desktopRafIdRef.current = null;
+    }
+    setIsDesktopDragging(true);
+    try {
+      e.currentTarget.setPointerCapture(e.pointerId);
+    } catch {
+      // same "nice to have" as the mobile stage's own capture below — safe to ignore if rejected.
+    }
+  };
+  const desktopOnPointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
+    const start = desktopDragRef.current;
+    if (!start) return;
+    const width = e.currentTarget.clientWidth || 1;
+    desktopVisualPosRef.current = start.startPos - (e.clientX - start.x) / width;
+    writeDesktopTransform(desktopVisualPosRef.current);
+  };
+  const desktopOnPointerUp = (e: React.PointerEvent<HTMLDivElement>) => {
+    const start = desktopDragRef.current;
+    desktopDragRef.current = null;
+    setIsDesktopDragging(false);
+    if (!start) return;
+    const dx = e.clientX - start.x;
+    if (Math.abs(dx) > 40) go(dx > 0 ? -1 : 1);
+    else ensureDesktopLoopRunning(); // spring back to the unchanged photo
+  };
+  const desktopOnPointerCancel = () => {
+    desktopDragRef.current = null;
+    setIsDesktopDragging(false);
+    ensureDesktopLoopRunning();
+  };
+
   // "Alle Fotos" bottom sheet (mobile only — see PhotoSheet above). Opened from the "+N" thumbnail
   // tile in portrait/landscape; picking a photo in it just reuses `i`/`setI`, so the counter and
   // main image update for free. Read via a ref inside the keydown handler below (registered once
@@ -560,9 +730,7 @@ const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0,
   // open. Both 'resize' (fires on rotation in every current mobile browser) and 'orientationchange'
   // are listened for: some browsers deliver 'orientationchange' a tick before window.innerWidth
   // has actually updated to the new orientation's value, so that handler re-reads it on the next
-  // frame rather than trusting the value at event-fire time. `isMobile` (both portrait and
-  // landscape) is kept as a derived boolean for the one spot that still needs it: the desktop-only
-  // whole-overlay touch-swipe guard below.
+  // frame rather than trusting the value at event-fire time.
   const [layout, setLayout] = useState<Layout>(() => (typeof window !== 'undefined' ? layoutForWidth(window.innerWidth) : 'portrait'));
   useEffect(() => {
     const onResize = (): void => setLayout(layoutForWidth(window.innerWidth));
@@ -576,7 +744,6 @@ const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0,
       window.removeEventListener('orientationchange', onOrientationChange);
     };
   }, []);
-  const isMobile = layout !== 'desktop';
 
   // Reset zoom (and pan) on every slide change — a lingering zoom/pan from the previous photo
   // reads as a stuck/broken control on the new one.
@@ -634,15 +801,63 @@ const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0,
   const zoomOut = () => setZoom((z) => Math.max(ZOOM_MIN, +(z - ZOOM_STEP).toFixed(2)));
   const zoomIn = () => setZoom((z) => Math.min(ZOOM_MAX, +(z + ZOOM_STEP).toFixed(2)));
 
-  // Desktop swipe-to-navigate — the original behaviour, unchanged: a plain touch delta on the
-  // whole overlay, no pan.
-  const tx = useRef<number | null>(null);
-
-  // Mobile: one pointer-drag gesture serves two purposes depending on zoom level: at 1x it's a
-  // left/right swipe to change photo (mouse OR touch); zoomed in, it pans the enlarged photo
-  // around instead (that's the whole point of zooming in — being able to look at every part of
-  // it, not just the centered crop). Pointer Events cover mouse + touch + pen in one handler set.
-  const dragRef = useRef<{ x: number; y: number; panStart: { x: number; y: number } } | null>(null);
+  // Mobile (portrait/landscape) photo-to-photo animation — same live-drag + spring slide as the
+  // desktop stage above (see its own doc comment for the full "why a spring" reasoning), just
+  // sharing this stage's SINGLE pointer-drag gesture with pan-when-zoomed and pinch instead of
+  // having its own separate handlers: at zoom<=1 a drag is a swipe (this loop), zoomed in it
+  // pans the enlarged photo around instead (the existing setPan branch, untouched) — the two
+  // are mutually exclusive per-gesture (checked at move/up time), so there's nothing to
+  // reconcile between them beyond that branch.
+  const mobileTrackRef = useRef<HTMLDivElement | null>(null);
+  const mobileVisualPosRef = useRef(1);
+  const mobileVelocityRef = useRef(0);
+  const mobileRafIdRef = useRef<number | null>(null);
+  const writeMobileTransform = (pos: number) => {
+    const el = mobileTrackRef.current;
+    if (el) el.style.transform = `translateX(${(-pos * 100).toFixed(4)}%)`;
+  };
+  const stepMobileLoop = (lastT: number) => {
+    mobileRafIdRef.current = requestAnimationFrame((now) => {
+      const dt = Math.min((now - lastT) / 1000, 1 / 30); // cap dt so a lag spike can't overshoot
+      const accel = SPRING_STIFFNESS * (1 - mobileVisualPosRef.current) - SPRING_DAMPING * mobileVelocityRef.current;
+      mobileVelocityRef.current += accel * dt;
+      mobileVisualPosRef.current += mobileVelocityRef.current * dt;
+      writeMobileTransform(mobileVisualPosRef.current);
+      const atRest = Math.abs(1 - mobileVisualPosRef.current) < SETTLE_POS_EPS && Math.abs(mobileVelocityRef.current) < SETTLE_VEL_EPS;
+      if (atRest) {
+        mobileVisualPosRef.current = 1;
+        mobileVelocityRef.current = 0;
+        writeMobileTransform(1);
+        mobileRafIdRef.current = null;
+        return;
+      }
+      stepMobileLoop(now);
+    });
+  };
+  const ensureMobileLoopRunning = () => {
+    if (mobileRafIdRef.current == null) stepMobileLoop(performance.now());
+  };
+  useEffect(
+    () => () => {
+      if (mobileRafIdRef.current != null) cancelAnimationFrame(mobileRafIdRef.current);
+    },
+    [],
+  );
+  // Same rAF-suspended-while-hidden safety net as the desktop stage's own copy above — see its
+  // doc comment for why (a swipe released right before the tab backgrounds, e.g. switching apps
+  // mid-gesture, would otherwise strand the photo frozen mid-slide forever).
+  useEffect(() => {
+    const onVisibilityChange = () => {
+      if (document.visibilityState !== 'visible') return;
+      if (mobileRafIdRef.current == null && Math.abs(1 - mobileVisualPosRef.current) > SETTLE_POS_EPS) {
+        ensureMobileLoopRunning();
+      }
+    };
+    document.addEventListener('visibilitychange', onVisibilityChange);
+    return () => document.removeEventListener('visibilitychange', onVisibilityChange);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const dragRef = useRef<{ x: number; y: number; panStart: { x: number; y: number }; startPos: number } | null>(null);
   // Pinch-to-zoom: every active pointer is tracked by id so a genuine 2nd finger landing can be
   // told apart from the single-pointer pan/swipe drag above and switch into pinch mode instead.
   // The ratio between the CURRENT and STARTING distance between the two touch points scales zoom
@@ -672,7 +887,14 @@ const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0,
       return;
     }
     if (pointersRef.current.size === 1) {
-      dragRef.current = { x: e.clientX, y: e.clientY, panStart: pan };
+      dragRef.current = { x: e.clientX, y: e.clientY, panStart: pan, startPos: mobileVisualPosRef.current };
+      if (zoom <= ZOOM_MIN) {
+        mobileVelocityRef.current = 0;
+        if (mobileRafIdRef.current != null) {
+          cancelAnimationFrame(mobileRafIdRef.current);
+          mobileRafIdRef.current = null;
+        }
+      }
     }
   };
   const onStagePointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
@@ -703,7 +925,13 @@ const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0,
       return;
     }
     const start = dragRef.current;
-    if (!start || zoom <= ZOOM_MIN) return;
+    if (!start) return;
+    if (zoom <= ZOOM_MIN) {
+      const width = e.currentTarget.clientWidth || 1;
+      mobileVisualPosRef.current = start.startPos - (e.clientX - start.x) / width;
+      writeMobileTransform(mobileVisualPosRef.current);
+      return;
+    }
     const dx = e.clientX - start.x;
     const dy = e.clientY - start.y;
     setPan(clampPan({ x: start.panStart.x + dx, y: start.panStart.y + dy }, zoom));
@@ -720,6 +948,7 @@ const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0,
     if (zoom <= ZOOM_MIN) {
       const dx = e.clientX - start.x;
       if (Math.abs(dx) > 40) go(dx > 0 ? -1 : 1);
+      else ensureMobileLoopRunning(); // spring back to the unchanged photo
     }
   };
 
@@ -773,16 +1002,6 @@ const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0,
           display: 'flex',
           flexDirection: 'column',
         }}
-        onTouchStart={(e) => {
-          if (isMobile) return; // mobile pans/swipes via the stage's own pointer handlers instead.
-          tx.current = e.touches[0].clientX;
-        }}
-        onTouchEnd={(e) => {
-          if (isMobile || tx.current == null) return;
-          const dx = e.changedTouches[0].clientX - tx.current;
-          tx.current = null;
-          if (Math.abs(dx) > 40) go(dx > 0 ? -1 : 1);
-        }}
       >
         {layout === 'portrait' ? (
           <>
@@ -836,25 +1055,38 @@ const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0,
               onPointerUp={onStagePointerUp}
               onPointerCancel={onStagePointerUp}
             >
-              <img
-                src={images[i]}
-                alt=""
-                draggable={false}
-                style={{
-                  position: 'absolute',
-                  inset: 0,
-                  width: '100%',
-                  height: '100%',
-                  objectFit: 'contain',
-                  transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`,
-                  // pinchRef too, not just dragRef — without it every pinch pointermove still
-                  // kicked off a 200ms eased transition toward a target that moves again before
-                  // it finishes, which reads as the image flickering/jittering bigger-smaller
-                  // instead of tracking the fingers 1:1 (drag already had this right).
-                  transition: (dragRef.current || pinchRef.current) ? 'none' : 'transform var(--dur-2, 200ms) var(--ease-standard, ease)',
-                  cursor: zoom > ZOOM_MIN ? 'grab' : undefined,
-                }}
-              />
+              {/* mobileTrackRef's transform is owned entirely by writeMobileTransform() (the
+                  spring loop + the swipe branch of onStagePointerMove above) — same reasoning as
+                  the desktop track: React re-applying a matching value here on every `i`-driven
+                  re-render would fight the loop's own per-frame writes to this same property. */}
+              <div ref={mobileTrackRef} style={{ position: 'absolute', inset: 0, display: 'flex', height: '100%' }}>
+                {[images[(i - 1 + n) % n], images[i], images[(i + 1) % n]].map((src, k) => (
+                  <img
+                    key={k}
+                    src={src}
+                    alt=""
+                    draggable={false}
+                    style={{
+                      flex: '0 0 100%',
+                      width: '100%',
+                      height: '100%',
+                      objectFit: 'contain',
+                      // Zoom/pan only ever apply to the CENTER slot (k===1, the actually-
+                      // displayed photo) — prev/next are only ever visible mid-slide, and both
+                      // reset on every `i` change anyway (see the effect above), so by the time
+                      // either could become the new center they're already back to 1x/centered.
+                      transform: k === 1 ? `translate(${pan.x}px, ${pan.y}px) scale(${zoom})` : undefined,
+                      // pinchRef too, not just dragRef — without it every pinch pointermove still
+                      // kicked off a 200ms eased transition toward a target that moves again before
+                      // it finishes, which reads as the image flickering/jittering bigger-smaller
+                      // instead of tracking the fingers 1:1 (drag already had this right).
+                      transition:
+                        k === 1 ? ((dragRef.current || pinchRef.current) ? 'none' : 'transform var(--dur-2, 200ms) var(--ease-standard, ease)') : undefined,
+                      cursor: k === 1 && zoom > ZOOM_MIN ? 'grab' : undefined,
+                    }}
+                  />
+                ))}
+              </div>
 
               <div style={{ ...pillStyle, left: 12 }} aria-label={t('autobahn:viewer.counterLabel', { current: i + 1, total: n })}>
                 <span className="num viewer-counter-num">
@@ -1118,25 +1350,34 @@ const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0,
               onPointerUp={onStagePointerUp}
               onPointerCancel={onStagePointerUp}
             >
-              <img
-                src={images[i]}
-                alt=""
-                draggable={false}
-                style={{
-                  position: 'absolute',
-                  inset: 0,
-                  width: '100%',
-                  height: '100%',
-                  objectFit: 'cover',
-                  transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`,
-                  // pinchRef too, not just dragRef — without it every pinch pointermove still
-                  // kicked off a 200ms eased transition toward a target that moves again before
-                  // it finishes, which reads as the image flickering/jittering bigger-smaller
-                  // instead of tracking the fingers 1:1 (drag already had this right).
-                  transition: (dragRef.current || pinchRef.current) ? 'none' : 'transform var(--dur-2, 200ms) var(--ease-standard, ease)',
-                  cursor: zoom > ZOOM_MIN ? 'grab' : undefined,
-                }}
-              />
+              {/* mobileTrackRef is SHARED with portrait above (same ref, same spring loop, same
+                  onStagePointer* handlers) — only one of portrait/landscape is ever mounted at a
+                  time, so there's no conflict; see portrait's copy of this comment for why
+                  transform isn't set here directly. */}
+              <div ref={mobileTrackRef} style={{ position: 'absolute', inset: 0, display: 'flex', height: '100%' }}>
+                {[images[(i - 1 + n) % n], images[i], images[(i + 1) % n]].map((src, k) => (
+                  <img
+                    key={k}
+                    src={src}
+                    alt=""
+                    draggable={false}
+                    style={{
+                      flex: '0 0 100%',
+                      width: '100%',
+                      height: '100%',
+                      objectFit: 'cover',
+                      transform: k === 1 ? `translate(${pan.x}px, ${pan.y}px) scale(${zoom})` : undefined,
+                      // pinchRef too, not just dragRef — without it every pinch pointermove still
+                      // kicked off a 200ms eased transition toward a target that moves again before
+                      // it finishes, which reads as the image flickering/jittering bigger-smaller
+                      // instead of tracking the fingers 1:1 (drag already had this right).
+                      transition:
+                        k === 1 ? ((dragRef.current || pinchRef.current) ? 'none' : 'transform var(--dur-2, 200ms) var(--ease-standard, ease)') : undefined,
+                      cursor: k === 1 && zoom > ZOOM_MIN ? 'grab' : undefined,
+                    }}
+                  />
+                ))}
+              </div>
             </div>
 
             {/* logo — Figma node 424:9330 "auto-de_RGB (2) 1": the actual asset there is the
@@ -1529,20 +1770,52 @@ const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0,
                 <IconButton name="x" size={24} className="vdp-viewer-light" label={t('autobahn:viewer.closeLabel')} onClick={onClose} />
               </div>
             </div>
-            <div style={{ flex: 1, position: 'relative', minHeight: 0, background: '#fff', overflow: 'hidden' }}>
-              <img
-                src={images[i]}
-                alt=""
-                style={{
-                  position: 'absolute',
-                  inset: 0,
-                  width: '100%',
-                  height: '100%',
-                  objectFit: 'contain',
-                  transform: `scale(${zoom})`,
-                  transition: 'transform var(--dur-2, 200ms) var(--ease-standard, ease)',
-                }}
-              />
+            <div
+              style={{
+                flex: 1,
+                position: 'relative',
+                minHeight: 0,
+                background: '#fff',
+                overflow: 'hidden',
+                cursor: n > 1 ? (isDesktopDragging ? 'grabbing' : 'grab') : undefined,
+                // Without this, a touch-capable desktop (a tablet reporting >860px, or Chrome's
+                // own device toolbar) hands a horizontal drag to the browser's native scroll/pan
+                // handling before onPointerMove ever sees it — same fix as CardCarousel's
+                // touch-action (see its own doc comment) applied here for the same reason.
+                touchAction: n > 1 ? 'pan-y' : undefined,
+              }}
+              onPointerDown={desktopOnPointerDown}
+              onPointerMove={desktopOnPointerMove}
+              onPointerUp={desktopOnPointerUp}
+              onPointerCancel={desktopOnPointerCancel}
+            >
+              {/* transform is NOT set here — desktopTrackRef's owned entirely by
+                  writeDesktopTransform() (the spring loop + drag handlers above), written
+                  straight to the DOM node. Same reasoning as CardCarousel's own track: letting
+                  React re-apply a matching value here too would fight the loop's per-frame
+                  writes for the same property. */}
+              <div ref={desktopTrackRef} style={{ display: 'flex', height: '100%' }}>
+                {[images[(i - 1 + n) % n], images[i], images[(i + 1) % n]].map((src, k) => (
+                  <img
+                    key={k}
+                    src={src}
+                    alt=""
+                    draggable={false}
+                    style={{
+                      flex: '0 0 100%',
+                      width: '100%',
+                      height: '100%',
+                      objectFit: 'contain',
+                      // Zoom only ever applies to the CENTER slot (the actually-displayed photo,
+                      // k===1) — prev/next are only ever visible mid-slide, and zoom always
+                      // resets to 1x on every `i` change anyway (see the effect above), so by the
+                      // time either of them could become the new center they're back to unzoomed.
+                      transform: k === 1 ? `scale(${zoom})` : undefined,
+                      transition: k === 1 ? 'transform var(--dur-2, 200ms) var(--ease-standard, ease)' : undefined,
+                    }}
+                  />
+                ))}
+              </div>
               <button
                 className="car-arrow car-arrow--l hide-mobile"
                 style={{ opacity: 1 }}