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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core-autobahn",
-  "version": "1.0.64",
+  "version": "1.0.65",
   "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/ui/CardCarousel.tsx

@@ -11,12 +11,12 @@ export interface CardCarouselProps {
   /** 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. '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).
+   * object-fit for each image; 'contain' adds inset padding by default. 'auto' always fills the
+   * box's full WIDTH (never a left/right gap) and lets height follow the image's own aspect
+   * ratio — landscape photos in this taller-than-wide card box typically end up shorter than the
+   * box (a top/bottom gap, filled by the studio-white background), while a portrait/near-square
+   * photo can end up taller than the box and get cropped top/bottom by its overflow:hidden. 'auto'
+   * behaves exactly like 'contain' below 601px viewport width (no change to any mobile rendering).
    */
   fit?: 'cover' | 'contain' | 'auto';
   /** set false to drop the 5%/6% inset padding 'contain' normally adds (e.g. the VDP
@@ -24,9 +24,6 @@ export interface CardCarouselProps {
   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.
@@ -59,7 +56,6 @@ 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
@@ -74,38 +70,11 @@ const CardCarousel: React.FunctionComponent<CardCarouselProps> = ({
     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]);
+  const autoDesktop = fit === 'auto' && isDesktop;
 
   return (
     <div
       className="cardcar"
-      ref={containerRef}
       style={{ position: 'relative', height, overflow: 'hidden', borderRadius: radius }}
       onTouchStart={(e) => {
         tx.current = e.touches[0].clientX;
@@ -126,28 +95,41 @@ const CardCarousel: React.FunctionComponent<CardCarouselProps> = ({
           transition: 'transform var(--dur-3) var(--ease-emphasized)',
         }}
       >
-        {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',
-              }}
-            />
-          );
-        })}
+        {images.map((src, k) => (
+          <img
+            key={k}
+            src={src}
+            alt=""
+            loading="lazy"
+            decoding="async"
+            style={
+              autoDesktop
+                ? {
+                    // width-anchored: always fills the box's full width (no left/right gap,
+                    // ever); height is 'auto' (NOT a min-height floor — that would force
+                    // object-fit:fill's default stretch/distortion on a narrower photo), so it
+                    // follows the photo's own ratio, cropped top/bottom by the box's
+                    // overflow:hidden when taller than the box, centered so the crop doesn't
+                    // favor either edge.
+                    flex: '0 0 100%',
+                    width: '100%',
+                    height: 'auto',
+                    alignSelf: 'center',
+                    boxSizing: 'border-box',
+                    background: '#fff',
+                  }
+                : {
+                    flex: '0 0 100%',
+                    width: '100%',
+                    height: '100%',
+                    objectFit: fit === 'auto' ? 'contain' : fit,
+                    padding: fit !== 'cover' && 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. */}