@bytebrand/fe-ui-core-autobahn 1.0.63 → 1.0.64

package/cards/CarRow.tsx

@@ -86,7 +86,9 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({ car, isFavorite, onToggl
       style={{ background: 'var(--md-sc-lowest)' }}
     >
       <div className="listcard-media" style={{ position: 'relative' }} onMouseEnter={onMediaEnter} onTouchStart={onMediaEnter}>
-        <CardCarousel images={car.gallery} height="100%" fit="contain" onChange={setPhotoIndex} />
+        {/* 'auto': desktop picks cover/contain per photo (crops only when it wouldn't lose too
+            much of the shot); below 601px this is identical to 'contain', so mobile is unchanged. */}
+        <CardCarousel images={car.gallery} height="100%" fit="auto" onChange={setPhotoIndex} />
         {/* deal badges — ONE compact line: NEU · −€ · 0 € Anz. · −%, plus the "⚡ Angebot" badge
             (Figma) on its own line below. The price RATING ('Guter Preis') is NOT here — it
             lives in the price column (PriceMeter). */}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core-autobahn",
-  "version": "1.0.63",
+  "version": "1.0.64",
   "description": "auto.de md3 (Autobahn) design system — UI primitives, cards, chrome, VDP modules, theme CSS and locales. Ships raw TypeScript source (like fe-ui-core before it); each consumer's bundler compiles it.",
   "main": "index.ts",
   "license": "UNLICENSED",

package/theme/md3.css

@@ -4040,14 +4040,6 @@ line-height: 31px;
   .md3 .specstrip > span:nth-child(1) { order: -3; }
   .md3 .specstrip > span:nth-child(2) { order: -2; }
   .md3 .specstrip > span:nth-child(4) { order: -1; }
-  /* mcard (SRP CarRow) photo: fill the media box edge-to-edge on desktop (Figma "mcard") instead
-     of the letterboxed object-fit:contain CardCarousel applies by default (that "contain" +
-     padding is still correct on mobile, untouched — this overrides only the desktop rendering,
-     since CardCarousel's `fit`/`padded` props are one shared JS value for both breakpoints). */
-  .md3 .listcard-media .cardcar img {
-    object-fit: cover !important;
-    padding: 0 !important;
-  }
 }
 /* filter rail: collapsible sections */
 .md3 .frail-group {

package/ui/CardCarousel.tsx

@@ -10,13 +10,23 @@ export interface CardCarouselProps {
   radius?: number | string;
   /** fired with the new active index whenever the slide changes. */
   onChange?: (index: number) => void;
-  /** object-fit for each image; 'contain' adds inset padding by default. */
-  fit?: 'cover' | 'contain';
+  /**
+   * object-fit for each image; 'contain' adds inset padding by default. 'auto' picks per IMAGE,
+   * comparing that photo's own natural aspect ratio against the box: 'cover' (fills edge-to-edge)
+   * when the crop would be modest, 'contain' (letterboxed, no crop) when it would be severe — a
+   * wide exterior shot usually survives a horizontal crop fine (cars carry background padding on
+   * both sides), a tighter interior/detail shot often doesn't. 'auto' behaves exactly like
+   * 'contain' below 601px viewport width (no change to any existing mobile rendering).
+   */
+  fit?: 'cover' | 'contain' | 'auto';
   /** set false to drop the 5%/6% inset padding 'contain' normally adds (e.g. the VDP
    * gallery, which wants the image filling the box edge-to-edge). Defaults to true. */
   padded?: boolean;
 }
 
+/** 'auto' mode: object-fit:cover only up to this much of the image being cropped away. */
+const AUTO_FIT_CROP_THRESHOLD = 0.25;
+
 /**
  * Image carousel for cards — touch-swipeable, dots + hover arrows (desktop).
  * Stops click bubbling so it can live inside a clickable card.
@@ -49,10 +59,53 @@ const CardCarousel: React.FunctionComponent<CardCarouselProps> = ({
   };
   const go = (d: number, e?: React.SyntheticEvent) => jump((i + d + n) % n, e);
   const trackRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
   const tx = useRef<number | null>(null);
+
+  // 'auto' mode only diverges from plain 'contain' at desktop widths — below 601px it resolves
+  // to 'contain' unconditionally, so mobile's existing rendering is untouched either way.
+  const [isDesktop, setIsDesktop] = useState(
+    () => fit === 'auto' && typeof window !== 'undefined' && window.matchMedia('(min-width: 601px)').matches,
+  );
+  useEffect(() => {
+    if (fit !== 'auto' || typeof window === 'undefined') return;
+    const mq = window.matchMedia('(min-width: 601px)');
+    const handler = () => setIsDesktop(mq.matches);
+    mq.addEventListener('change', handler);
+    return () => mq.removeEventListener('change', handler);
+  }, [fit]);
+  // per-image measured fit (auto mode, desktop only) — keyed by index so each photo in the
+  // gallery gets its own cover/contain call instead of one verdict for the whole carousel.
+  const [autoFits, setAutoFits] = useState<Record<number, 'cover' | 'contain'>>({});
+  const handleLoad = (k: number, el: HTMLImageElement | null) => {
+    if (fit !== 'auto' || !isDesktop || !el) return;
+    const box = containerRef.current;
+    if (!box || !el.naturalWidth || !el.naturalHeight) return;
+    const boxAspect = box.clientWidth / box.clientHeight;
+    const imgAspect = el.naturalWidth / el.naturalHeight;
+    const cropped = imgAspect >= boxAspect ? 1 - boxAspect / imgAspect : 1 - imgAspect / boxAspect;
+    const resolved: 'cover' | 'contain' = cropped > AUTO_FIT_CROP_THRESHOLD ? 'contain' : 'cover';
+    setAutoFits((prev) => (prev[k] === resolved ? prev : { ...prev, [k]: resolved }));
+  };
+  // resolved per-image fit: literal cover/contain pass straight through; 'auto' defaults to the
+  // safe no-crop 'contain' until that image has actually loaded and been measured.
+  const resolvedFit = (k: number): 'cover' | 'contain' =>
+    fit === 'auto' ? (isDesktop ? (autoFits[k] ?? 'contain') : 'contain') : fit;
+  // catches images already complete (browser cache) by the time this mounts — onLoad never
+  // fires for those. Runs after the full commit, so containerRef is guaranteed attached (a ref
+  // callback on the <img> itself isn't: React attaches child refs before the parent's).
+  useEffect(() => {
+    if (fit !== 'auto' || !isDesktop) return;
+    trackRef.current?.querySelectorAll('img').forEach((el, k) => {
+      if (el.complete) handleLoad(k, el);
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fit, isDesktop, gallerySignature]);
+
   return (
     <div
       className="cardcar"
+      ref={containerRef}
       style={{ position: 'relative', height, overflow: 'hidden', borderRadius: radius }}
       onTouchStart={(e) => {
         tx.current = e.touches[0].clientX;
@@ -73,24 +126,28 @@ const CardCarousel: React.FunctionComponent<CardCarouselProps> = ({
           transition: 'transform var(--dur-3) var(--ease-emphasized)',
         }}
       >
-        {images.map((src, k) => (
-          <img
-            key={k}
-            src={src}
-            alt=""
-            loading="lazy"
-            decoding="async"
-            style={{
-              flex: '0 0 100%',
-              width: '100%',
-              height: '100%',
-              objectFit: fit,
-              padding: fit === 'contain' && padded ? '5% 6%' : 0,
-              boxSizing: 'border-box',
-              background: '#fff',
-            }}
-          />
-        ))}
+        {images.map((src, k) => {
+          const f = resolvedFit(k);
+          return (
+            <img
+              key={k}
+              src={src}
+              alt=""
+              loading="lazy"
+              decoding="async"
+              onLoad={(e) => handleLoad(k, e.currentTarget)}
+              style={{
+                flex: '0 0 100%',
+                width: '100%',
+                height: '100%',
+                objectFit: f,
+                padding: f === 'contain' && padded ? '5% 6%' : 0,
+                boxSizing: 'border-box',
+                background: '#fff',
+              }}
+            />
+          );
+        })}
       </div>
       {/* arrows + dots only when there is actually something to switch to — with a single
           image (e.g. SRP cards before their gallery is lazy-loaded) they are dead controls. */}