@bytebrand/fe-ui-core-autobahn 1.0.113 → 1.0.115

package/vdp/VdpViewer.tsx

@@ -64,6 +64,27 @@ const MOBILE_BREAKPOINT = 860;
 /** Landscape thumbnails (Figma node 424:7566 etc.) are 68px, not portrait's 64. */
 const LS_THUMB_W = 68;
 
+/** Safe-area helpers — keep overlay controls (especially the close button) clear of the notch /
+ *  Dynamic Island / status bar (top), home indicator (bottom) and, in landscape, whichever side the
+ *  notch rotates onto. `env(safe-area-inset-*)` only resolves to anything but 0px when the page's
+ *  `<meta name="viewport">` declares `viewport-fit=cover` (see services/fe-main/app.html) — the
+ *  0px fallback inside every `env()` call here means both of these are complete no-ops (identical
+ *  to the previous hardcoded numbers) on any browser/device that has no safe area to begin with, so
+ *  there's no behavioural change for the common case, only where a notch/indicator is actually
+ *  present. Two shapes, used in different structural contexts below:
+ *   - `withInset` ADDS the inset to a design offset — for absolute-positioned controls (landscape's
+ *     floating close/logo/counter/prev-next/zoom/etc.) whose `top`/`right`/… is a gap from the edge
+ *     of the *safe* content area, which needs to grow by however much the notch/indicator eats into
+ *     the raw viewport edge.
+ *   - `atLeastInset` guarantees a MINIMUM gap instead — for padding on a bar that already paints its
+ *     own edge-to-edge background (portrait's header/bottom-CTA bar, the photosheet), where a small
+ *     or absent safe area should still leave the existing 12px breathing room, not shrink it.
+ */
+const withInset = (px: number, side: 'top' | 'right' | 'bottom' | 'left'): string =>
+  `calc(${px}px + env(safe-area-inset-${side}, 0px))`;
+const atLeastInset = (px: number, side: 'top' | 'right' | 'bottom' | 'left'): string =>
+  `max(${px}px, env(safe-area-inset-${side}, 0px))`;
+
 type Layout = 'portrait' | 'landscape' | 'desktop';
 const layoutForWidth = (w: number): Layout => (w <= PORTRAIT_MAX ? 'portrait' : w <= MOBILE_BREAKPOINT ? 'landscape' : 'desktop');
 
@@ -83,30 +104,38 @@ export interface VdpViewerProps {
   /** "request this car" action (mirrors the legacy slider's envelope button) — omit to hide the
    *  "Jetzt Anfragen" CTA (mobile) / envelope button (desktop). */
   onEmail?: () => void;
-  /** 360°-view toggle (mobile layout only) — presentational only for now (no vehicle in the
-   *  current DTO ships a 360 image set), wired here so a real spin viewer can hang off it once
-   *  that data exists. */
+  /** whether this vehicle has a valid 360° image set to view — the ONLY thing that gates showing
+   *  the 360° control at all (mobile layouts only). Default false: no vehicle in the current DTO
+   *  ships 360 media, so there is no reliable metadata to show it FOR today — this must come from
+   *  real backend media metadata once that exists, never inferred (e.g. "gallery has N+ photos"
+   *  is not evidence of a 360 set). */
+  has360?: boolean;
+  /** 360°-view toggle (mobile layout only, only rendered when `has360`) — wired here so a real
+   *  spin viewer can hang off it once 360 data exists; presentational only until then. */
   on360?: () => void;
 }
 
 /** Figma "360 / Icon" (node 424:8093) — two counter-rotating arcs; not part of the lucide set
- *  used elsewhere in this file, so it's inlined verbatim from the design's exported SVG. */
-const Icon360: React.FunctionComponent = () => (
+ *  used elsewhere in this file, so it's inlined verbatim from the design's exported SVG. `color`
+ *  defaults to the original hardcoded white (portrait/landscape's pill sits on a dark translucent
+ *  background) — the desktop header's `.icon-btn` is light, so that usage passes `currentColor`
+ *  to inherit the same `--md-on-surface-variant` grey the zoom/close lucide icons already use. */
+const Icon360: React.FunctionComponent<{ color?: string }> = ({ color = 'white' }) => (
   <svg width={18} height={18} viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
     <path
       d="M5.25 6.3579C5.5593 5.55736 6.06014 4.84485 6.70866 4.28275C7.35719 3.72066 8.13362 3.32612 8.96998 3.13368C9.80634 2.94125 10.6771 2.95678 11.5061 3.17892C12.3351 3.40106 13.0969 3.82303 13.725 4.4079"
-      stroke="white"
+      stroke={color}
       strokeWidth={1.5}
       strokeLinecap="round"
     />
-    <path d="M14.2754 2.17499V5.17499H11.2754" stroke="white" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M14.2754 2.17499V5.17499H11.2754" stroke={color} strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" />
     <path
       d="M14.7504 11.75C14.4411 12.5505 13.9403 13.2631 13.2917 13.8251C12.6432 14.3872 11.8668 14.7818 11.0304 14.9742C10.194 15.1666 9.32326 15.1511 8.49429 14.929C7.66533 14.7068 6.90346 14.2849 6.27539 13.7"
-      stroke="white"
+      stroke={color}
       strokeWidth={1.5}
       strokeLinecap="round"
     />
-    <path d="M5.72461 16V13H8.72461" stroke="white" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M5.72461 16V13H8.72461" stroke={color} strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" />
   </svg>
 );
 
@@ -506,7 +535,7 @@ const PhotoSheet: React.FunctionComponent<{
   );
 };
 
-const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0, onClose, t, phone, onCall, onEmail, on360 }) => {
+const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0, onClose, t, phone, onCall, onEmail, has360 = false, on360 }) => {
   const [i, setI] = useState(start);
   const [zoom, setZoom] = useState(ZOOM_MIN);
   const [pan, setPan] = useState({ x: 0, y: 0 });
@@ -614,20 +643,65 @@ const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0,
   // 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);
+  // 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
+  // directly — no attempt to keep the pinch midpoint visually fixed, matching the +/- buttons' own
+  // un-anchored `scale(zoom)` model; pan re-clamps itself automatically (the zoom-driven clampPan
+  // effect above already runs on every zoom change). The stage already has touch-action:none (see
+  // render below), so the browser's own native pinch/pan never competes with this.
+  const pointersRef = useRef<Map<number, { x: number; y: number }>>(new Map());
+  const pinchRef = useRef<{ startDist: number; startZoom: number } | null>(null);
   const onStagePointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
     // Don't hijack clicks on the buttons layered over the stage (arrows, counter, 360°, zoom).
     if ((e.target as HTMLElement).closest('button')) return;
-    dragRef.current = { x: e.clientX, y: e.clientY, panStart: pan };
+    pointersRef.current.set(e.pointerId, { x: e.clientX, y: e.clientY });
     try {
       e.currentTarget.setPointerCapture(e.pointerId);
     } catch {
-      // Capture is a "nice to have" (keeps the drag alive if the pointer strays outside the
+      // Capture is a "nice to have" (keeps the gesture alive if a pointer strays outside the
       // stage) — some browser/input combinations reject it for a pointerId that isn't tracked
-      // as active. The drag still works via normal bubbling as long as the pointer stays over
+      // as active. The gesture still works via normal bubbling as long as the pointer stays over
       // the stage, so this is safe to swallow rather than let it surface as an uncaught error.
     }
+    if (pointersRef.current.size === 2) {
+      // 2nd finger just landed — hand off from any single-pointer pan/swipe in progress to pinch.
+      dragRef.current = null;
+      const [a, b] = [...pointersRef.current.values()];
+      pinchRef.current = { startDist: Math.hypot(a.x - b.x, a.y - b.y), startZoom: zoom };
+      return;
+    }
+    if (pointersRef.current.size === 1) {
+      dragRef.current = { x: e.clientX, y: e.clientY, panStart: pan };
+    }
   };
   const onStagePointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
+    if (pointersRef.current.has(e.pointerId)) pointersRef.current.set(e.pointerId, { x: e.clientX, y: e.clientY });
+    if (pointersRef.current.size === 2 && pinchRef.current) {
+      const [a, b] = [...pointersRef.current.values()];
+      const dist = Math.hypot(a.x - b.x, a.y - b.y);
+      const el = stageRef.current;
+      if (pinchRef.current.startDist > 0 && el) {
+        const nextZoom = Math.min(
+          ZOOM_MAX,
+          Math.max(ZOOM_MIN, +((pinchRef.current.startZoom * dist) / pinchRef.current.startDist).toFixed(2)),
+        );
+        // Zoom around the pinch MIDPOINT, not the stage's fixed center: solve for the pan that
+        // keeps whatever image content is currently under the midpoint visually fixed there as
+        // zoom changes — the standard "zoom toward a point" transform math (an un-anchored
+        // scale(zoom) always re-centers, leaving the user to manually pan back to what they were
+        // actually pinching). rect.width/2, rect.height/2 is the origin scale() already uses
+        // (CSS default transform-origin, untouched), so dx/dy is the midpoint's offset from it.
+        const rect = el.getBoundingClientRect();
+        const dx = (a.x + b.x) / 2 - rect.left - rect.width / 2;
+        const dy = (a.y + b.y) / 2 - rect.top - rect.height / 2;
+        const ratio = nextZoom / zoom;
+        const nextPan = { x: dx * (1 - ratio) + ratio * pan.x, y: dy * (1 - ratio) + ratio * pan.y };
+        setZoom(nextZoom);
+        setPan(clampPan(nextPan, nextZoom));
+      }
+      return;
+    }
     const start = dragRef.current;
     if (!start || zoom <= ZOOM_MIN) return;
     const dx = e.clientX - start.x;
@@ -635,8 +709,13 @@ const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0,
     setPan(clampPan({ x: start.panStart.x + dx, y: start.panStart.y + dy }, zoom));
   };
   const onStagePointerUp = (e: React.PointerEvent<HTMLDivElement>) => {
+    pointersRef.current.delete(e.pointerId);
+    if (pointersRef.current.size < 2) pinchRef.current = null;
     const start = dragRef.current;
     dragRef.current = null;
+    // a finger is still down (pinch ending back down to 1, not a full release) — don't read this
+    // as a tap/swipe.
+    if (pointersRef.current.size > 0) return;
     if (!start) return;
     if (zoom <= ZOOM_MIN) {
       const dx = e.clientX - start.x;
@@ -719,7 +798,10 @@ const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0,
                 display: 'flex',
                 alignItems: 'flex-start',
                 justifyContent: 'space-between',
-                padding: '12px 12px 10px',
+                // safe-area-aware: this bar sits flush against the top of the fullscreen overlay
+                // (the notch/Dynamic Island/status bar's exact territory), and its close button is
+                // the primary control the "always tappable" acceptance criterion is about.
+                padding: `${atLeastInset(12, 'top')} ${atLeastInset(12, 'right')} 10px ${atLeastInset(12, 'left')}`,
                 background: 'rgba(6,11,18,0.8)',
                 borderBottom: '1px solid rgba(255,255,255,0.12)',
               }}
@@ -730,7 +812,10 @@ const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0,
                 ariaLabel={t('autobahn:viewer.closeLabel')}
                 onClick={onClose}
               />
-              <div style={{ position: 'absolute', left: '50%', top: 10, transform: 'translateX(-50%)', width: 160, height: 71 }}>
+              {/* absolutely positioned (unlike its close/call siblings), so it does NOT
+                  automatically shift down with the header's safe-area padding above — needs its
+                  own top offset. */}
+              <div style={{ position: 'absolute', left: '50%', top: withInset(10, 'top'), transform: 'translateX(-50%)', width: 160, height: 71 }}>
                 <LogoMark />
               </div>
               {onCall ? (
@@ -765,7 +850,11 @@ const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0,
                   height: '100%',
                   objectFit: 'contain',
                   transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`,
-                  transition: dragRef.current ? 'none' : 'transform var(--dur-2, 200ms) var(--ease-standard, ease)',
+                  // 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,
                 }}
               />
@@ -776,15 +865,17 @@ const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0,
                 </span>
               </div>
 
-              <button
-                type="button"
-                onClick={() => on360 && on360()}
-                aria-label={t('autobahn:viewer.threeSixtyLabel')}
-                style={{ ...pillStyle, right: 12, border: '1px solid rgba(255,255,255,0.14)', cursor: 'pointer', gap: 3 }}
-              >
-                <Icon360 />
-                360°
-              </button>
+              {has360 && (
+                <button
+                  type="button"
+                  onClick={() => on360 && on360()}
+                  aria-label={t('autobahn:viewer.threeSixtyLabel')}
+                  style={{ ...pillStyle, right: 12, border: '1px solid rgba(255,255,255,0.14)', cursor: 'pointer', gap: 3 }}
+                >
+                  <Icon360 />
+                  360°
+                </button>
+              )}
 
               {n > 1 && (
                 <>
@@ -914,7 +1005,23 @@ const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0,
             {/* full-width bottom bar — "Jetzt Anfragen" (primary) + "Anrufen" (dark), Figma nodes
                 424:8128-8134. */}
             {(onEmail || onCall) && (
-              <div style={{ display: 'flex', gap: THUMB_GAP, padding: 12, height: 82, background: '#797979', flex: 'none' }}>
+              // safe-area-aware: last item before the true bottom edge — height is deliberately
+              // NOT fixed anymore (was 82px) so the extra bottom padding on a home-indicator device
+              // grows the bar instead of squeezing its 56px-tall buttons; `alignItems: 'center'`
+              // keeps them centered in that now-variable padding box.
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: THUMB_GAP,
+                  paddingTop: 12,
+                  paddingRight: atLeastInset(12, 'right'),
+                  paddingBottom: atLeastInset(12, 'bottom'),
+                  paddingLeft: atLeastInset(12, 'left'),
+                  background: '#797979',
+                  flex: 'none',
+                }}
+              >
                 {onEmail && (
                   <button
                     type="button"
@@ -1025,7 +1132,11 @@ const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0,
                   height: '100%',
                   objectFit: 'cover',
                   transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`,
-                  transition: dragRef.current ? 'none' : 'transform var(--dur-2, 200ms) var(--ease-standard, ease)',
+                  // 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,
                 }}
               />
@@ -1035,25 +1146,54 @@ const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0,
                 brand-blue/gradient mark (verified against its raw export), i.e. the SAME svg this
                 codebase already ships as `assets/autode-logo.svg` — reused directly, not portrait's
                 white LogoMark (landscape has no dark bar behind it to need a white variant). */}
-            <div style={{ position: 'absolute', left: 4, top: 10, width: 93, height: 42, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+            <div
+              style={{
+                position: 'absolute',
+                left: withInset(4, 'left'),
+                top: withInset(10, 'top'),
+                width: 93,
+                height: 42,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+            >
               <img src={logoUrl} alt="auto.de" style={{ width: 74, height: 21.46, display: 'block' }} />
             </div>
 
             {/* counter pill — Figma node 424:9277 "Counter / BG" */}
-            <div style={lsCounterStyle} aria-label={t('autobahn:viewer.counterLabel', { current: i + 1, total: n })}>
+            <div style={{ ...lsCounterStyle, top: withInset(12, 'top') }} aria-label={t('autobahn:viewer.counterLabel', { current: i + 1, total: n })}>
               <span className="num">
                 {i + 1} | {n}
               </span>
             </div>
 
-            {/* close — Figma nodes 424:7556/7557, no caption text in this layout */}
-            <LsCircleButton icon={<IconClose />} ariaLabel={t('autobahn:viewer.closeLabel')} onClick={onClose} style={{ right: 12, top: 12 }} />
+            {/* close — Figma nodes 424:7556/7557, no caption text in this layout. Rotating the
+                phone moves the notch/Dynamic Island to whichever side is now "up" (device-relative
+                left/right, not a fixed screen side) — safe-area-aware on both axes since this sits
+                at the true top-right corner, the corner most likely to overlap it. */}
+            <LsCircleButton
+              icon={<IconClose />}
+              ariaLabel={t('autobahn:viewer.closeLabel')}
+              onClick={onClose}
+              style={{ right: withInset(12, 'right'), top: withInset(12, 'top') }}
+            />
 
             {/* prev/next — Figma nodes 424:7560/7561 and 424:7563/7564 */}
             {n > 1 && (
               <>
-                <LsCircleButton icon={<IconChevronLeft />} ariaLabel={t('autobahn:viewer.previousLabel')} onClick={() => go(-1)} style={{ left: 12, top: 126 }} />
-                <LsCircleButton icon={<IconChevronRight />} ariaLabel={t('autobahn:viewer.nextLabel')} onClick={() => go(1)} style={{ right: 12, top: 126 }} />
+                <LsCircleButton
+                  icon={<IconChevronLeft />}
+                  ariaLabel={t('autobahn:viewer.previousLabel')}
+                  onClick={() => go(-1)}
+                  style={{ left: withInset(12, 'left'), top: 126 }}
+                />
+                <LsCircleButton
+                  icon={<IconChevronRight />}
+                  ariaLabel={t('autobahn:viewer.nextLabel')}
+                  onClick={() => go(1)}
+                  style={{ right: withInset(12, 'right'), top: 126 }}
+                />
               </>
             )}
 
@@ -1062,10 +1202,15 @@ const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0,
             <div
               style={{
                 position: 'absolute',
-                right: 12,
-                bottom: 12,
+                right: withInset(12, 'right'),
+                bottom: withInset(12, 'bottom'),
                 width: 48,
-                height: 150,
+                // 150 fits zoom (in/out + divider) AND the 360 toggle below it; without 360 the
+                // column only needs the zoom pair, so it collapses to the plain zoom-only height
+                // (matches portrait's own zoom-only pill, see the Figma node comment above) —
+                // otherwise hiding just the button/divider below would leave dead space at the
+                // bottom of a still-150px-tall pill.
+                height: has360 ? 150 : 110,
                 borderRadius: 'var(--md-r-full)',
                 background: 'rgba(0,0,0,0.5)',
                 border: '1.2px solid rgba(255,255,255,0.18)',
@@ -1094,31 +1239,35 @@ const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0,
               >
                 <IconZoomOut />
               </button>
-              <div style={{ width: 28, height: 1, background: 'rgba(255,255,255,0.16)', margin: '8px 0' }} />
-              <button
-                type="button"
-                onClick={() => on360 && on360()}
-                aria-label={t('autobahn:viewer.threeSixtyLabel')}
-                style={{ position: 'relative', width: 30, height: 30, border: 0, background: 'none', padding: 0, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
-              >
-                <Ls360Circle />
-                <span
-                  style={{
-                    position: 'absolute',
-                    top: '50%',
-                    left: '50%',
-                    transform: 'translate(-50%, -50%)',
-                    fontFamily: "'Inter', var(--md-font)",
-                    fontWeight: 700,
-                    fontSize: 8,
-                    lineHeight: '8px',
-                    color: '#fff',
-                    pointerEvents: 'none',
-                  }}
-                >
-                  360°
-                </span>
-              </button>
+              {has360 && (
+                <>
+                  <div style={{ width: 28, height: 1, background: 'rgba(255,255,255,0.16)', margin: '8px 0' }} />
+                  <button
+                    type="button"
+                    onClick={() => on360 && on360()}
+                    aria-label={t('autobahn:viewer.threeSixtyLabel')}
+                    style={{ position: 'relative', width: 30, height: 30, border: 0, background: 'none', padding: 0, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+                  >
+                    <Ls360Circle />
+                    <span
+                      style={{
+                        position: 'absolute',
+                        top: '50%',
+                        left: '50%',
+                        transform: 'translate(-50%, -50%)',
+                        fontFamily: "'Inter', var(--md-font)",
+                        fontWeight: 700,
+                        fontSize: 8,
+                        lineHeight: '8px',
+                        color: '#fff',
+                        pointerEvents: 'none',
+                      }}
+                    >
+                      360°
+                    </span>
+                  </button>
+                </>
+              )}
             </div>
 
             {/* bottom band: thumbnails (left, flexible width) + CTA buttons (right, natural width)
@@ -1126,7 +1275,20 @@ const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0,
                 align the way the design does, without hardcoding a container width that would break
                 across the 693-860 range. `right: 81` keeps this band clear of the zoom/360 column
                 (12 right-margin + 48 wide + the 21px gap Figma leaves before it = 81). */}
-            <div style={{ position: 'absolute', left: 12, right: 81, bottom: 12, height: 50, display: 'flex', alignItems: 'center' }}>
+            <div
+              style={{
+                position: 'absolute',
+                left: withInset(12, 'left'),
+                // 81 = 12 right-margin + 48 zoom-column width + 21 Figma gap before it; add the
+                // same right inset the zoom/360 column itself got above so this band still clears
+                // it once that column has shifted in from a notched edge.
+                right: withInset(81, 'right'),
+                bottom: withInset(12, 'bottom'),
+                height: 50,
+                display: 'flex',
+                alignItems: 'center',
+              }}
+            >
               {(() => {
                 const overflow = images.length > lsFitCount;
                 const visibleCount = overflow ? lsFitCount - 1 : images.length;
@@ -1319,6 +1481,20 @@ const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0,
                   onClick={zoomIn}
                   style={{ ...iconBtnStyle, opacity: zoom === ZOOM_MAX ? 0.4 : 1 }}
                 />
+                {has360 && (
+                  // IconButton only takes a lucide `name` — Icon360 is a one-off inlined SVG (see
+                  // its own comment above), so this is IconButton's own markup (.icon-btn + the
+                  // same iconBtnStyle) built by hand instead of a name it can't render.
+                  <button
+                    type="button"
+                    className="icon-btn"
+                    aria-label={t('autobahn:viewer.threeSixtyLabel')}
+                    onClick={() => on360 && on360()}
+                    style={iconBtnStyle}
+                  >
+                    <Icon360 color="currentColor" />
+                  </button>
+                )}
                 {onEmail && (
                   <IconButton name="mail" label={t('autobahn:viewer.emailLabel')} onClick={onEmail} style={contactBtnStyle} color="#fff" />
                 )}