@12-apps/ui 6.39.19 → 6.39.20

package/dist/_internal/components/data-display/LazyImage/LazyImage.hooks.js

@@ -2,7 +2,7 @@ import {
   imgPassThrough,
   resolveLazyImageProps,
   useLazyImage
-} from "../../../../chunk-GMUYCN33.js";
+} from "../../../../chunk-2TSGRQ2J.js";
 import "../../../../chunk-YKCAJ2TN.js";
 import "../../../../chunk-PZ5AY32C.js";
 export {

package/dist/_internal/components/data-display/LazyImage/LazyImage.js

@@ -1,7 +1,7 @@
 import {
   LazyImage
-} from "../../../../chunk-BVF2BSWV.js";
-import "../../../../chunk-GMUYCN33.js";
+} from "../../../../chunk-QWFAEUFV.js";
+import "../../../../chunk-2TSGRQ2J.js";
 import "../../../../chunk-724ZONOL.js";
 import "../../../../chunk-BEGTLELZ.js";
 import "../../../../chunk-E2QIKJX2.js";

package/dist/_internal/components/data-display/index.js

@@ -91,8 +91,8 @@ import "../../../chunk-S5UY5U73.js";
 import "../../../chunk-5ZFO7ROE.js";
 import {
   LazyImage
-} from "../../../chunk-BVF2BSWV.js";
-import "../../../chunk-GMUYCN33.js";
+} from "../../../chunk-QWFAEUFV.js";
+import "../../../chunk-2TSGRQ2J.js";
 import "../../../chunk-724ZONOL.js";
 import "../../../chunk-UM35GGCS.js";
 import {

package/dist/_internal/components/index.js

@@ -479,8 +479,8 @@ import "../../chunk-S5UY5U73.js";
 import "../../chunk-5ZFO7ROE.js";
 import {
   LazyImage
-} from "../../chunk-BVF2BSWV.js";
-import "../../chunk-GMUYCN33.js";
+} from "../../chunk-QWFAEUFV.js";
+import "../../chunk-2TSGRQ2J.js";
 import "../../chunk-724ZONOL.js";
 import "../../chunk-UM35GGCS.js";
 import {

package/dist/{chunk-GMUYCN33.js → chunk-2TSGRQ2J.js}

@@ -21,7 +21,11 @@ var LAZY_IMAGE_DEFAULTS = {
   skeletonProps: {},
   spinnerProps: {},
   sx: {},
-  role: "img"
+  role: "img",
+  // FUT-2774 #3: with no default, every derived id (`${testId}-img`, …) read
+  // literally as `"undefined-img"` for a caller that omitted it — and every
+  // such instance on a page collided on the same ids.
+  "data-testid": "lazy-image"
 };
 var definedProps = (props) => Object.fromEntries(
   Object.entries(props).filter(([, value]) => value !== void 0)
@@ -106,10 +110,14 @@ var useTimeoutRef = () => {
   return ref;
 };
 var usePlaceholderPhase = (props, loadingState) => {
-  const { placeholder, fadeIn, fadeInDuration } = props;
+  const { placeholder, fadeIn, fadeInDuration, src } = props;
   const active = loadingState === "placeholder" && Boolean(placeholder);
   const [retired, setRetired] = useState(false);
   const fadeTimeoutRef = useTimeoutRef();
+  useEffect(() => {
+    clearTimeout(fadeTimeoutRef.current);
+    setRetired(false);
+  }, [src, fadeTimeoutRef]);
   const retire = useCallback(() => setRetired(true), []);
   const retireAfterFade = useCallback(() => {
     if (!active || !fadeIn) {
@@ -135,25 +143,34 @@ var useImageSource = (props, containerRef) => {
     retryCount: 0,
     currentSrc: lazy ? null : src
   });
-  const markVisible = useCallback(
-    () => setState((prev) => ({ ...prev, isVisible: true, currentSrc: src })),
-    [src]
-  );
+  const requestedSrcRef = useRef(lazy ? null : src);
+  const retryTimeoutRef = useTimeoutRef();
+  const markVisible = useCallback(() => {
+    requestedSrcRef.current = src;
+    setState((prev) => ({ ...prev, isVisible: true, currentSrc: src }));
+  }, [src]);
   useVisibility(props, containerRef, state.isVisible, markVisible);
   useEffect(() => {
-    if (!state.isVisible || !src || state.currentSrc === src) {
+    if (!state.isVisible || !src || requestedSrcRef.current === src) {
       return;
     }
-    setState((prev) => ({ ...prev, currentSrc: src, isLoading: true, hasError: false }));
-  }, [state.isVisible, src, state.currentSrc]);
-  return [state, setState];
+    clearTimeout(retryTimeoutRef.current);
+    requestedSrcRef.current = src;
+    setState((prev) => ({
+      ...prev,
+      currentSrc: src,
+      isLoading: true,
+      hasError: false,
+      retryCount: 0
+    }));
+  }, [state.isVisible, src, retryTimeoutRef]);
+  return { state, setState, requestedSrcRef, retryTimeoutRef };
 };
 var useLazyImage = (props) => {
   const { src, loadingState, showSpinner } = props;
   const { onLoad, onError, retryOnError, maxRetries, retryDelay } = props;
   const containerRef = useRef(null);
-  const retryTimeoutRef = useTimeoutRef();
-  const [state, setState] = useImageSource(props, containerRef);
+  const { state, setState, requestedSrcRef, retryTimeoutRef } = useImageSource(props, containerRef);
   const effectiveLoadingState = showSpinner ? "spinner" : loadingState;
   const { showPlaceholder, retirePlaceholder, retirePlaceholderAfterFade } = usePlaceholderPhase(
     props,
@@ -176,6 +193,9 @@ var useLazyImage = (props) => {
         return;
       }
       retryTimeoutRef.current = setTimeout(() => {
+        if (requestedSrcRef.current !== src) {
+          return;
+        }
         setState((prev) => ({
           ...prev,
           retryCount: prev.retryCount + 1,
@@ -184,7 +204,7 @@ var useLazyImage = (props) => {
         }));
       }, retryDelay);
     },
-    [onError, retryOnError, state.retryCount, maxRetries, retryDelay, src, retirePlaceholder]
+    [onError, retryOnError, state.retryCount, maxRetries, retryDelay, src, retirePlaceholder, requestedSrcRef, retryTimeoutRef]
   );
   return {
     state,
@@ -206,4 +226,4 @@ export {
   imgPassThrough,
   useLazyImage
 };
-//# sourceMappingURL=chunk-GMUYCN33.js.map
+//# sourceMappingURL=chunk-2TSGRQ2J.js.map

package/dist/chunk-2TSGRQ2J.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/LazyImage/LazyImage.hooks.ts"],"sourcesContent":["import { useTheme } from '@mui/material/styles/index.js';\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { remPx } from '../../../tokens/relative';\n\nimport type { LazyImageProps, LazyImageState } from './LazyImage.types';\n\ntype LazyImageDefaultedKeys =\n  | 'height'\n  | 'loadingState'\n  | 'objectFit'\n  | 'objectPosition'\n  | 'lazy'\n  | 'threshold'\n  | 'fadeIn'\n  | 'fadeInDuration'\n  | 'retryOnError'\n  | 'maxRetries'\n  | 'retryDelay'\n  | 'decoding'\n  | 'skeletonProps'\n  | 'spinnerProps'\n  | 'sx'\n  | 'role'\n  | 'data-testid';\n\nexport type ResolvedLazyImageProps = LazyImageProps &\n  Required<Pick<LazyImageProps, LazyImageDefaultedKeys>>;\n\nconst LAZY_IMAGE_DEFAULTS: Pick<LazyImageProps, LazyImageDefaultedKeys> = {\n  height: 'auto',\n  loadingState: 'skeleton',\n  objectFit: 'cover',\n  objectPosition: 'center',\n  lazy: true,\n  threshold: 0,\n  fadeIn: true,\n  fadeInDuration: 300,\n  retryOnError: false,\n  maxRetries: 3,\n  retryDelay: 1000,\n  decoding: 'async',\n  skeletonProps: {},\n  spinnerProps: {},\n  sx: {},\n  role: 'img',\n  // FUT-2774 #3: with no default, every derived id (`${testId}-img`, …) read\n  // literally as `\"undefined-img\"` for a caller that omitted it — and every\n  // such instance on a page collided on the same ids.\n  'data-testid': 'lazy-image',\n};\n\n// Strips explicitly-undefined props before the merge, so `lazy={undefined}` still\n// falls back to the default exactly as a destructuring default would.\nconst definedProps = (props: LazyImageProps): Partial<LazyImageProps> =>\n  Object.fromEntries(\n    Object.entries(props).filter(([, value]) => value !== undefined),\n  ) as Partial<LazyImageProps>;\n\nexport const resolveLazyImageProps = (props: LazyImageProps): ResolvedLazyImageProps =>\n  ({ ...LAZY_IMAGE_DEFAULTS, ...definedProps(props) }) as ResolvedLazyImageProps;\n\n// Props this component consumes itself. Anything else the caller passed is an\n// ordinary <img> attribute and is forwarded untouched.\nconst OWN_PROPS = new Set([\n  'src', 'alt', 'width', 'height', 'placeholder', 'fallback', 'loadingState',\n  'showSpinner', 'objectFit', 'objectPosition', 'borderRadius', 'lazy', 'rootMargin',\n  'threshold', 'fadeIn', 'fadeInDuration', 'onLoad', 'onError', 'onLoadStart',\n  'retryOnError', 'maxRetries', 'retryDelay', 'decoding', 'loading', 'fetchPriority',\n  'skeletonProps', 'spinnerProps', 'sx', 'className', 'data-testid', 'aria-label',\n  'aria-describedby', 'role',\n]);\n\nexport const imgPassThrough = (props: ResolvedLazyImageProps): Record<string, unknown> =>\n  Object.fromEntries(Object.entries(props).filter(([key]) => !OWN_PROPS.has(key)));\n\n/**\n * Flips `isVisible` the first time the container nears the viewport, then stops\n * observing. Does nothing when `lazy` is off — the caller wants the request now.\n */\nconst useVisibility = (\n  props: ResolvedLazyImageProps,\n  containerRef: React.RefObject<HTMLDivElement | null>,\n  isVisible: boolean,\n  onVisible: () => void,\n) => {\n  const { lazy, src, threshold, onLoadStart } = props;\n  const theme = useTheme();\n  // `IntersectionObserver` takes px or %, never rem: the default reach is 100\n  // design px, measured through the theme so it moves with the root.\n  const rootMargin = props.rootMargin ?? `${remPx(theme, 100)}px`;\n\n  useEffect(() => {\n    if (!lazy || isVisible) {\n      return;\n    }\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        entries.forEach((entry) => {\n          if (entry.isIntersecting) {\n            onVisible();\n            onLoadStart?.();\n            observer.unobserve(entry.target);\n          }\n        });\n      },\n      { rootMargin, threshold },\n    );\n\n    if (containerRef.current) {\n      observer.observe(containerRef.current);\n    }\n\n    return () => {\n      if (containerRef.current) {\n        observer.unobserve(containerRef.current);\n      }\n    };\n  }, [lazy, src, rootMargin, threshold, isVisible, onLoadStart, onVisible, containerRef]);\n};\n\n/** A pending timer has to be cancelled on unmount, or it sets state on a dead component. */\nconst useTimeoutRef = () => {\n  const ref = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n  useEffect(\n    () => () => {\n      if (ref.current) {\n        clearTimeout(ref.current);\n      }\n    },\n    [],\n  );\n\n  return ref;\n};\n\n/**\n * Whether the placeholder image is up. It is a loading state: only\n * `loadingState=\"placeholder\"` with a `placeholder` set draws it, from mount\n * until the real image settles — its `load` plus the fade, or its final error.\n * A placeholder that fails to load retires at once, as if none were set.\n */\nconst usePlaceholderPhase = (\n  props: ResolvedLazyImageProps,\n  loadingState: NonNullable<LazyImageProps['loadingState']>,\n) => {\n  const { placeholder, fadeIn, fadeInDuration, src } = props;\n  // Only this mode draws a placeholder. Otherwise the real image settling\n  // retires the phase at once — batched into the load's own render, with no\n  // timer — so a placeholder switched on afterwards never covers a loaded image.\n  const active = loadingState === 'placeholder' && Boolean(placeholder);\n  const [retired, setRetired] = useState(false);\n  const fadeTimeoutRef = useTimeoutRef();\n\n  // FUT-2774 #2: `retired` was set once and never reset, and this hook took\n  // no `src` at all — so a mounted instance reused for a NEW image (a\n  // carousel swapping `src` rather than remounting) never showed the\n  // placeholder again for it. Reset on every `src` change, the same way\n  // `useImageSource` already resets `currentSrc`/`isLoading`/`hasError`; drop\n  // any fade timer left over from the PREVIOUS image, or it would retire the\n  // new placeholder on a schedule that has nothing to do with it.\n  useEffect(() => {\n    clearTimeout(fadeTimeoutRef.current);\n    setRetired(false);\n  }, [src, fadeTimeoutRef]);\n\n  const retire = useCallback(() => setRetired(true), []);\n\n  // The real image fades in over the placeholder, so it goes when the fade ends.\n  const retireAfterFade = useCallback(() => {\n    if (!active || !fadeIn) {\n      setRetired(true);\n      return;\n    }\n    clearTimeout(fadeTimeoutRef.current);\n    fadeTimeoutRef.current = setTimeout(() => setRetired(true), fadeInDuration);\n  }, [active, fadeIn, fadeInDuration, fadeTimeoutRef]);\n\n  return {\n    showPlaceholder: active && !retired,\n    retirePlaceholder: retire,\n    retirePlaceholderAfterFade: retireAfterFade,\n  };\n};\n\n/**\n * The real image's state, and when it is requested: at once when not lazy,\n * else the first time the container nears the viewport. The main <img> only\n * ever carries the real src — a placeholder is drawn by its own element, so its\n * load and error are never the image's.\n */\nconst useImageSource = (\n  props: ResolvedLazyImageProps,\n  containerRef: React.RefObject<HTMLDivElement | null>,\n) => {\n  const { src, lazy } = props;\n  const [state, setState] = useState<LazyImageState>({\n    isLoading: true,\n    hasError: false,\n    isVisible: !lazy, // If not lazy, load immediately\n    retryCount: 0,\n    currentSrc: lazy ? null : src,\n  });\n  // FUT-2774 #1: the last `src` PROP this hook has already requested — as\n  // opposed to `state.currentSrc`, which a retry deliberately diverges from\n  // `src` (its cache-busting query string) without a NEW image having\n  // arrived. Comparing the effect's guard against `src` itself let a retry's\n  // own state update immediately retrigger this effect, which overwrote the\n  // cache-busted value back to the plain `src` before the browser ever\n  // re-requested it — so `retryOnError` silently never re-fetched anything.\n  const requestedSrcRef = useRef<string | null>(lazy ? null : src);\n  // `handleImageError` (in `useLazyImage`) owns the retry timer itself, but\n  // it schedules against THIS src's identity: read together, the two hooks\n  // can tell a timeout meant for an image that is no longer the current one\n  // apart from one that still is (FUT-2774, src-changing-mid-retry).\n  const retryTimeoutRef = useTimeoutRef();\n\n  const markVisible = useCallback(() => {\n    requestedSrcRef.current = src;\n    setState((prev) => ({ ...prev, isVisible: true, currentSrc: src }));\n  }, [src]);\n  useVisibility(props, containerRef, state.isVisible, markVisible);\n\n  // Load image when it becomes visible, or when `src` itself changes to a\n  // genuinely new value — never when only `state.currentSrc` has (a retry).\n  useEffect(() => {\n    if (!state.isVisible || !src || requestedSrcRef.current === src) {\n      return;\n    }\n\n    // A retry scheduled for the PREVIOUS src must not land on this one: left\n    // pending, its stale `setTimeout` would fire later and overwrite this\n    // fresh `currentSrc` with `${oldSrc}?retry=N` — cache-busting an image\n    // nothing asked for again, and never re-syncing back (FUT-2774).\n    clearTimeout(retryTimeoutRef.current);\n    requestedSrcRef.current = src;\n    setState((prev) => ({\n      ...prev,\n      currentSrc: src,\n      isLoading: true,\n      hasError: false,\n      retryCount: 0,\n    }));\n  }, [state.isVisible, src, retryTimeoutRef]);\n\n  return { state, setState, requestedSrcRef, retryTimeoutRef };\n};\n\n/**\n * Owns whether the real image has been requested yet and how it went: the\n * observer above, the load/error handlers, the retry timer, and how long the\n * placeholder stays up.\n */\nexport const useLazyImage = (props: ResolvedLazyImageProps) => {\n  const { src, loadingState, showSpinner } = props;\n  const { onLoad, onError, retryOnError, maxRetries, retryDelay } = props;\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const { state, setState, requestedSrcRef, retryTimeoutRef } = useImageSource(props, containerRef);\n\n  // Handle deprecated showSpinner prop\n  const effectiveLoadingState = showSpinner ? 'spinner' : loadingState;\n  const { showPlaceholder, retirePlaceholder, retirePlaceholderAfterFade } = usePlaceholderPhase(\n    props,\n    effectiveLoadingState,\n  );\n\n  const handleImageLoad = useCallback(\n    (event: React.SyntheticEvent<HTMLImageElement>) => {\n      setState((prev) => ({ ...prev, isLoading: false, hasError: false, retryCount: 0 }));\n      retirePlaceholderAfterFade();\n      onLoad?.(event);\n    },\n    [onLoad, retirePlaceholderAfterFade],\n  );\n\n  const handleImageError = useCallback(\n    (event: React.SyntheticEvent<HTMLImageElement>) => {\n      if (!retryOnError || state.retryCount >= maxRetries) {\n        setState((prev) => ({ ...prev, isLoading: false, hasError: true }));\n        retirePlaceholder();\n        onError?.(event);\n        return;\n      }\n\n      retryTimeoutRef.current = setTimeout(() => {\n        // Belt and suspenders alongside `useImageSource`'s own cancel-on-src-\n        // change: if `src` moved on since this timeout was scheduled, this\n        // retry is for an image that is no longer live at all — applying it\n        // would cache-bust the WRONG `<img>` (FUT-2774).\n        if (requestedSrcRef.current !== src) {\n          return;\n        }\n        setState((prev) => ({\n          ...prev,\n          retryCount: prev.retryCount + 1,\n          currentSrc: `${src}?retry=${prev.retryCount + 1}`, // Force reload with cache buster\n        }));\n      }, retryDelay);\n    },\n    [onError, retryOnError, state.retryCount, maxRetries, retryDelay, src, retirePlaceholder, requestedSrcRef, retryTimeoutRef],\n  );\n\n  return {\n    state,\n    containerRef,\n    effectiveLoadingState,\n    handleImageLoad,\n    handleImageError,\n    handlePlaceholderError: retirePlaceholder,\n    showImage: Boolean(state.currentSrc) && !state.hasError,\n    // In placeholder mode the placeholder outlasts `isLoading`: it stays under\n    // the real image until the fade has ended.\n    showLoading: effectiveLoadingState === 'placeholder' ? showPlaceholder : state.isLoading,\n    showPlaceholder,\n  };\n};\n"],"mappings":"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","names":[]}

package/dist/{chunk-BVF2BSWV.js → chunk-QWFAEUFV.js}

@@ -2,7 +2,7 @@ import {
   imgPassThrough,
   resolveLazyImageProps,
   useLazyImage
-} from "./chunk-GMUYCN33.js";
+} from "./chunk-2TSGRQ2J.js";
 import {
   Skeleton
 } from "./chunk-BEGTLELZ.js";
@@ -60,15 +60,16 @@ var isFraction = (value) => typeof value === "number" && value > 0 && value <= 1
 var sxLength = (theme, value) => isFraction(value) ? `${value * 100}%` : styleLength(theme, value);
 var innerLength = (theme, value) => isFraction(value) ? "100%" : styleLength(theme, value);
 var orDefault = (value, fallback) => value === void 0 || value === "" ? fallback : value;
+var emptyToUnset = (value) => value === "" ? void 0 : value;
 var SkeletonIndicator = ({ props }) => {
   const theme = useTheme();
   return /* @__PURE__ */ jsx(
     Skeleton,
     {
-      variant: "rectangular",
+      variant: props.skeletonProps.variant ?? "rectangular",
       width: innerLength(theme, orDefault(props.width, "100%")),
       height: innerLength(theme, orDefault(props.height, "auto")),
-      animation: props.skeletonProps.animation || "pulse",
+      animation: props.skeletonProps.animation ?? "pulse",
       intensity: props.skeletonProps.intensity,
       borderRadius: styleLength(theme, props.borderRadius),
       "data-testid": `${props["data-testid"]}-skeleton`
@@ -81,8 +82,8 @@ var SpinnerIndicator = ({ props }) => {
   return /* @__PURE__ */ jsx(SpinnerOverlay, { children: /* @__PURE__ */ jsx(
     CircularProgress,
     {
-      size: styleLength(theme, spinnerProps.size || 40),
-      thickness: spinnerProps.thickness || 4,
+      size: styleLength(theme, spinnerProps.size ?? 40),
+      thickness: spinnerProps.thickness ?? 4,
       sx: { color: spinnerProps.color || theme.palette.primary.main },
       "data-testid": `${props["data-testid"]}-spinner`
     }
@@ -147,8 +148,19 @@ var ErrorFallback = ({ props, metrics }) => {
     FallbackContainer,
     {
       sx: {
-        width: innerLength(theme, width),
-        height: innerLength(theme, height),
+        // FUT-2774 #4 (see `emptyToUnset`). Does NOT change the confirmed
+        // height collapse — `ImageContainer`'s own height was already `'auto'`
+        // either way; see `LazyImage.test.stories.tsx` for that separate,
+        // unresolved defect. `orDefault(height, 'auto')` is safe to share with
+        // `SkeletonIndicator` (unlike width's `'100%'`, deliberately NOT
+        // shared — see `emptyToUnset`): a PERCENTAGE height against an
+        // auto-height containing block computes to `auto` by spec regardless,
+        // so whether `sx.height` is omitted (falling through to
+        // `FallbackContainer`'s own `height: '100%'`) or set to the literal
+        // `'auto'` here, an unset-height container gives the same result
+        // either way — nothing for this fallback to protect against.
+        width: innerLength(theme, emptyToUnset(width)),
+        height: innerLength(theme, orDefault(height, "auto")),
         borderRadius: styleLength(theme, borderRadius)
       },
       "data-testid": `${testId}-fallback`,
@@ -173,8 +185,14 @@ var LazyImage = React.memo(function LazyImage2(rawProps) {
   const { width, height, borderRadius, alt } = props;
   const testId = props["data-testid"];
   const metrics = {
-    width: innerLength(theme, width),
-    height: innerLength(theme, height),
+    // FUT-2774 #4 (see `emptyToUnset`): `metrics` also sizes the REAL `<img>`,
+    // where an unset width means "the image's own intrinsic size" —
+    // `brand-link.tsx`'s logo relies on exactly that. `height`'s `'auto'`
+    // fallback has no such live case to protect: a percentage height against
+    // an auto-height containing block computes to `auto` regardless, so
+    // sharing `SkeletonIndicator`'s fallback changes nothing observable.
+    width: innerLength(theme, emptyToUnset(width)),
+    height: innerLength(theme, orDefault(height, "auto")),
     objectFit: props.objectFit,
     objectPosition: props.objectPosition,
     borderRadius: styleLength(theme, borderRadius)
@@ -232,4 +250,4 @@ LazyImage.displayName = "LazyImage";
 export {
   LazyImage
 };
-//# sourceMappingURL=chunk-BVF2BSWV.js.map
+//# sourceMappingURL=chunk-QWFAEUFV.js.map

package/dist/chunk-QWFAEUFV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/LazyImage/LazyImage.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/index.js';\nimport { styled, useTheme, type Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\nimport { Skeleton } from '../../layout/Skeleton';\nimport type { ResolvedLazyImageProps } from './LazyImage.hooks';\nimport { imgPassThrough, resolveLazyImageProps, useLazyImage } from './LazyImage.hooks';\nimport type { LazyImageProps } from './LazyImage.types';\nimport { sheen } from '../../../tokens/ink';\nimport { rem } from '../../../tokens/relative';\n\nconst ImageContainer = styled(Box)(() => ({\n  position: 'relative',\n  display: 'inline-block',\n  overflow: 'hidden',\n}));\n\nconst StyledImage = styled('img')<{\n  fadeIn?: boolean;\n  fadeInDuration?: number;\n  isLoaded?: boolean;\n}>(({ fadeIn, fadeInDuration = 300, isLoaded }) => ({\n  display: 'block',\n  maxWidth: '100%',\n  height: 'auto',\n  opacity: fadeIn ? (isLoaded ? 1 : 0) : 1,\n  transition: fadeIn ? `opacity ${fadeInDuration}ms ease-in-out` : 'none',\n}));\n\nconst SpinnerOverlay = styled(Box)(({ theme }) => ({\n  position: 'absolute',\n  top: '50%',\n  left: '50%',\n  transform: 'translate(-50%, -50%)',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  backgroundColor: sheen(theme, 0.8),\n  borderRadius: '50%',\n  padding: theme.spacing(1),\n}));\n\nconst FallbackContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  backgroundColor: theme.palette.action.disabledBackground,\n  color: theme.palette.text.secondary,\n  width: '100%',\n  height: '100%',\n  position: 'absolute',\n  top: 0,\n  left: 0,\n}));\n\ntype Length = number | string | undefined;\n\n/** A length prop as React `style` and MUI's `Skeleton` read it: a number is design px. */\nconst styleLength = (theme: Theme, value: Length): string | undefined =>\n  typeof value === 'number' ? rem(theme, value) : value;\n\n/**\n * A width or height above 0 and up to 1 is a fraction of the container's parent, as in `sx`.\n * A negative number is no fraction: it stays a (negative, so invalid) length.\n */\nconst isFraction = (value: Length): value is number =>\n  typeof value === 'number' && value > 0 && value <= 1;\n\n/**\n * A length prop as `sx` reads it on a width or height: a number of 1 or less is\n * a fraction of the parent, and that stays so; any other number is design px.\n */\nconst sxLength = (theme: Theme, value: Length): string | undefined =>\n  isFraction(value) ? `${value * 100}%` : styleLength(theme, value);\n\n/**\n * A width or height for what is drawn inside the container. The container alone\n * takes a fraction, so everything in it fills it: a percentage here is measured\n * against the container and would stack (FUT-2666). Otherwise the same as `styleLength`.\n */\nconst innerLength = (theme: Theme, value: Length): string | undefined =>\n  isFraction(value) ? '100%' : styleLength(theme, value);\n\n/**\n * A width or height with its default. Only an unset or empty size takes it: `0`\n * is a size, which `||` read as unset (FUT-2669), and `sx` reads `''` as `0%`.\n */\nconst orDefault = (value: Length, fallback: number | string): number | string =>\n  value === undefined || value === '' ? fallback : value;\n\n/**\n * A width/height as `metrics` and the `ReactNode` `ErrorFallback` read it\n * (FUT-2774 #4): an explicit empty string is normalized to \"as if unset\"\n * rather than mapped to a component-wide default. Unlike `SkeletonIndicator`\n * (a content-less box with nothing else to size by, hence its own deliberate\n * `'100%'`/`'auto'` fallback), these draw the real image or a `ReactNode`\n * fallback — both have their own intrinsic size, so leaving an unset width\n * unset lets it size naturally (`brand-link.tsx`'s logo relies on exactly\n * this: an unset width capped by its own `sx.maxWidth`).\n */\nconst emptyToUnset = (value: Length): Length => (value === '' ? undefined : value);\n\n/** The box the image occupies, as CSS, shared by the real image and every stand-in for it. */\ninterface BoxMetrics {\n  width?: string;\n  height?: string;\n  objectFit: NonNullable<LazyImageProps['objectFit']>;\n  objectPosition: string;\n  borderRadius?: string;\n}\n\ninterface IndicatorProps {\n  props: ResolvedLazyImageProps;\n  metrics: BoxMetrics;\n}\n\nconst SkeletonIndicator: React.FC<IndicatorProps> = ({ props }) => {\n  const theme = useTheme();\n  return (\n    <Skeleton\n      // FUT-2774 #5: `skeletonProps.variant` was typed but never read — the\n      // variant was hard-coded regardless of what a caller passed.\n      variant={props.skeletonProps.variant ?? 'rectangular'}\n      width={innerLength(theme, orDefault(props.width, '100%'))}\n      height={innerLength(theme, orDefault(props.height, 'auto'))}\n      // FUT-2774 #5: `||` reads a caller's `false` the same as \"unset\", so\n      // `skeletonProps.animation={false}` could never turn the animation off.\n      animation={props.skeletonProps.animation ?? 'pulse'}\n      intensity={props.skeletonProps.intensity}\n      borderRadius={styleLength(theme, props.borderRadius)}\n      data-testid={`${props['data-testid']}-skeleton`}\n    />\n  );\n};\n\nconst SpinnerIndicator: React.FC<IndicatorProps> = ({ props }) => {\n  const theme = useTheme();\n  const { spinnerProps } = props;\n\n  return (\n    <SpinnerOverlay>\n      <CircularProgress\n        // FUT-2774 #5: `||` read `spinnerProps.size`/`thickness` of `0` the\n        // same as unset — the same class of bug FUT-2669 fixed for\n        // `width`/`height`, missed here.\n        size={styleLength(theme, spinnerProps.size ?? 40)}\n        thickness={spinnerProps.thickness ?? 4}\n        sx={{ color: spinnerProps.color || theme.palette.primary.main }}\n        data-testid={`${props['data-testid']}-spinner`}\n      />\n    </SpinnerOverlay>\n  );\n};\n\n/**\n * The placeholder sits in the box's flow and gives the box its size: the box's\n * own when one is set, the placeholder's when not. The real image is drawn over\n * it (`OVER_PLACEHOLDER`) until it has faded in. Its load and error are not the\n * image's, so neither reaches the caller; a failing one just retires.\n */\nconst PlaceholderIndicator: React.FC<IndicatorProps & { onError: () => void }> = ({\n  props,\n  metrics,\n  onError,\n}) => {\n  if (!props.placeholder) return null;\n\n  return (\n    <StyledImage\n      src={props.placeholder}\n      alt={`${props.alt} (loading)`}\n      style={metrics}\n      decoding={props.decoding}\n      loading={props.lazy ? 'lazy' : props.loading}\n      onError={onError}\n      data-testid={`${props['data-testid']}-placeholder`}\n    />\n  );\n};\n\nconst LoadingIndicator: React.FC<\n  IndicatorProps & { kind: NonNullable<LazyImageProps['loadingState']>; onPlaceholderError: () => void }\n> = ({ kind, onPlaceholderError, ...rest }) => {\n  switch (kind) {\n    case 'skeleton':\n      return <SkeletonIndicator {...rest} />;\n    case 'spinner':\n      return <SpinnerIndicator {...rest} />;\n    case 'placeholder':\n      return <PlaceholderIndicator {...rest} onError={onPlaceholderError} />;\n    default:\n      return null;\n  }\n};\n\n/**\n * The real image while the placeholder is up: laid over it and cropped by\n * `objectFit`, so the box never grows to hold both. It takes the flow back\n * when the placeholder goes.\n */\nconst OVER_PLACEHOLDER: React.CSSProperties = {\n  position: 'absolute',\n  inset: 0,\n  width: '100%',\n  height: '100%',\n};\n\nconst ErrorFallback: React.FC<IndicatorProps> = ({ props, metrics }) => {\n  const theme = useTheme();\n  const { alt, fallback, width, height, borderRadius } = props;\n  const testId = props['data-testid'];\n\n  if (!fallback) return null;\n\n  if (typeof fallback === 'string') {\n    return (\n      <StyledImage\n        src={fallback}\n        alt={`${alt} (fallback)`}\n        style={metrics}\n        fadeIn={false}\n        isLoaded={true}\n        data-testid={`${testId}-fallback`}\n      />\n    );\n  }\n\n  return (\n    <FallbackContainer\n      sx={{\n        // FUT-2774 #4 (see `emptyToUnset`). Does NOT change the confirmed\n        // height collapse — `ImageContainer`'s own height was already `'auto'`\n        // either way; see `LazyImage.test.stories.tsx` for that separate,\n        // unresolved defect. `orDefault(height, 'auto')` is safe to share with\n        // `SkeletonIndicator` (unlike width's `'100%'`, deliberately NOT\n        // shared — see `emptyToUnset`): a PERCENTAGE height against an\n        // auto-height containing block computes to `auto` by spec regardless,\n        // so whether `sx.height` is omitted (falling through to\n        // `FallbackContainer`'s own `height: '100%'`) or set to the literal\n        // `'auto'` here, an unset-height container gives the same result\n        // either way — nothing for this fallback to protect against.\n        width: innerLength(theme, emptyToUnset(width)),\n        height: innerLength(theme, orDefault(height, 'auto')),\n        borderRadius: styleLength(theme, borderRadius),\n      }}\n      data-testid={`${testId}-fallback`}\n    >\n      {fallback}\n    </FallbackContainer>\n  );\n};\n\n/**\n * LazyImage component with enhanced features for optimized image loading\n * Supports lazy loading, placeholders, error handling, and various loading states\n */\nexport const LazyImage = React.memo<LazyImageProps>(function LazyImage(rawProps) {\n  const props = resolveLazyImageProps(rawProps);\n  const theme = useTheme();\n  const {\n    state,\n    containerRef,\n    effectiveLoadingState,\n    handleImageLoad,\n    handleImageError,\n    handlePlaceholderError,\n    showImage,\n    showLoading,\n    showPlaceholder,\n  } = useLazyImage(props);\n\n  const { width, height, borderRadius, alt } = props;\n  const testId = props['data-testid'];\n  const metrics: BoxMetrics = {\n    // FUT-2774 #4 (see `emptyToUnset`): `metrics` also sizes the REAL `<img>`,\n    // where an unset width means \"the image's own intrinsic size\" —\n    // `brand-link.tsx`'s logo relies on exactly that. `height`'s `'auto'`\n    // fallback has no such live case to protect: a percentage height against\n    // an auto-height containing block computes to `auto` regardless, so\n    // sharing `SkeletonIndicator`'s fallback changes nothing observable.\n    width: innerLength(theme, emptyToUnset(width)),\n    height: innerLength(theme, orDefault(height, 'auto')),\n    objectFit: props.objectFit,\n    objectPosition: props.objectPosition,\n    borderRadius: styleLength(theme, borderRadius),\n  };\n\n  return (\n    <ImageContainer\n      ref={containerRef}\n      className={props.className}\n      sx={{\n        width: sxLength(theme, orDefault(width, 'auto')),\n        height: sxLength(theme, orDefault(height, 'auto')),\n        // The same px length the image gets (`metrics`): in `sx` a bare number\n        // would be a multiple of `shape.borderRadius`, and this box clips (FUT-2656).\n        borderRadius: metrics.borderRadius,\n      }}\n      data-testid={testId}\n    >\n      {showLoading && (\n        <LoadingIndicator\n          kind={effectiveLoadingState}\n          props={props}\n          metrics={metrics}\n          onPlaceholderError={handlePlaceholderError}\n        />\n      )}\n\n      {showImage && (\n        <StyledImage\n          src={state.currentSrc || undefined}\n          alt={alt}\n          onLoad={handleImageLoad}\n          onError={handleImageError}\n          fadeIn={props.fadeIn}\n          fadeInDuration={props.fadeInDuration}\n          isLoaded={!state.isLoading}\n          decoding={props.decoding}\n          loading={props.lazy ? 'lazy' : props.loading}\n          style={{ ...metrics, ...props.sx, ...(showPlaceholder && OVER_PLACEHOLDER) }}\n          aria-label={props['aria-label'] || alt}\n          aria-describedby={props['aria-describedby']}\n          role={props.role}\n          data-testid={`${testId}-img`}\n          {...imgPassThrough(props)}\n        />\n      )}\n\n      {state.hasError && <ErrorFallback props={props} metrics={metrics} />}\n    </ImageContainer>\n  );\n});\n\nLazyImage.displayName = 'LazyImage';\n"],"mappings":"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","names":["LazyImage"]}

package/dist/data-display/LazyImage.js

@@ -1,8 +1,8 @@
 import "../chunk-5ZFO7ROE.js";
 import {
   LazyImage
-} from "../chunk-BVF2BSWV.js";
-import "../chunk-GMUYCN33.js";
+} from "../chunk-QWFAEUFV.js";
+import "../chunk-2TSGRQ2J.js";
 import "../chunk-724ZONOL.js";
 import "../chunk-BEGTLELZ.js";
 import "../chunk-E2QIKJX2.js";

package/dist/types/components/data-display/LazyImage/LazyImage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LazyImage.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/LazyImage/LazyImage.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAuNxD;;;GAGG;AACH,eAAO,MAAM,SAAS,4CAsEpB,CAAC"}
+{"version":3,"file":"LazyImage.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/LazyImage/LazyImage.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAqPxD;;;GAGG;AACH,eAAO,MAAM,SAAS,4CA4EpB,CAAC"}

package/dist/types/components/data-display/LazyImage/LazyImage.hooks.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { LazyImageProps, LazyImageState } from './LazyImage.types';
-type LazyImageDefaultedKeys = 'height' | 'loadingState' | 'objectFit' | 'objectPosition' | 'lazy' | 'threshold' | 'fadeIn' | 'fadeInDuration' | 'retryOnError' | 'maxRetries' | 'retryDelay' | 'decoding' | 'skeletonProps' | 'spinnerProps' | 'sx' | 'role';
+type LazyImageDefaultedKeys = 'height' | 'loadingState' | 'objectFit' | 'objectPosition' | 'lazy' | 'threshold' | 'fadeIn' | 'fadeInDuration' | 'retryOnError' | 'maxRetries' | 'retryDelay' | 'decoding' | 'skeletonProps' | 'spinnerProps' | 'sx' | 'role' | 'data-testid';
 export type ResolvedLazyImageProps = LazyImageProps & Required<Pick<LazyImageProps, LazyImageDefaultedKeys>>;
 export declare const resolveLazyImageProps: (props: LazyImageProps) => ResolvedLazyImageProps;
 export declare const imgPassThrough: (props: ResolvedLazyImageProps) => Record<string, unknown>;

package/dist/types/components/data-display/LazyImage/LazyImage.hooks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LazyImage.hooks.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/LazyImage/LazyImage.hooks.ts"],"names":[],"mappings":"AACA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAIxE,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAExE,KAAK,sBAAsB,GACvB,QAAQ,GACR,cAAc,GACd,WAAW,GACX,gBAAgB,GAChB,MAAM,GACN,WAAW,GACX,QAAQ,GACR,gBAAgB,GAChB,cAAc,GACd,YAAY,GACZ,YAAY,GACZ,UAAU,GACV,eAAe,GACf,cAAc,GACd,IAAI,GACJ,MAAM,CAAC;AAEX,MAAM,MAAM,sBAAsB,GAAG,cAAc,GACjD,QAAQ,CAAC,IAAI,CAAC,cAAc,EAAE,sBAAsB,CAAC,CAAC,CAAC;AA4BzD,eAAO,MAAM,qBAAqB,GAAI,OAAO,cAAc,KAAG,sBACkB,CAAC;AAajF,eAAO,MAAM,cAAc,GAAI,OAAO,sBAAsB,KAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CACH,CAAC;AA0InF;;;;GAIG;AACH,eAAO,MAAM,YAAY,GAAI,OAAO,sBAAsB;;;;6BAgB9C,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;8BAStC,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;;;;;CAgCjD,CAAC"}
+{"version":3,"file":"LazyImage.hooks.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/LazyImage/LazyImage.hooks.ts"],"names":[],"mappings":"AACA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAIxE,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAExE,KAAK,sBAAsB,GACvB,QAAQ,GACR,cAAc,GACd,WAAW,GACX,gBAAgB,GAChB,MAAM,GACN,WAAW,GACX,QAAQ,GACR,gBAAgB,GAChB,cAAc,GACd,YAAY,GACZ,YAAY,GACZ,UAAU,GACV,eAAe,GACf,cAAc,GACd,IAAI,GACJ,MAAM,GACN,aAAa,CAAC;AAElB,MAAM,MAAM,sBAAsB,GAAG,cAAc,GACjD,QAAQ,CAAC,IAAI,CAAC,cAAc,EAAE,sBAAsB,CAAC,CAAC,CAAC;AAgCzD,eAAO,MAAM,qBAAqB,GAAI,OAAO,cAAc,KAAG,sBACkB,CAAC;AAajF,eAAO,MAAM,cAAc,GAAI,OAAO,sBAAsB,KAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CACH,CAAC;AAgLnF;;;;GAIG;AACH,eAAO,MAAM,YAAY,GAAI,OAAO,sBAAsB;;;;6BAe9C,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;8BAStC,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;;;;;CAuCjD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/ui",
-  "version": "6.39.19",
+  "version": "6.39.20",
   "license": "MIT",
   "packageManager": "pnpm@10.34.5",
   "type": "module",

package/src/components/data-display/LazyImage/LazyImage.hooks.ts

@@ -21,7 +21,8 @@ type LazyImageDefaultedKeys =
   | 'skeletonProps'
   | 'spinnerProps'
   | 'sx'
-  | 'role';
+  | 'role'
+  | 'data-testid';
 
 export type ResolvedLazyImageProps = LazyImageProps &
   Required<Pick<LazyImageProps, LazyImageDefaultedKeys>>;
@@ -43,6 +44,10 @@ const LAZY_IMAGE_DEFAULTS: Pick<LazyImageProps, LazyImageDefaultedKeys> = {
   spinnerProps: {},
   sx: {},
   role: 'img',
+  // FUT-2774 #3: with no default, every derived id (`${testId}-img`, …) read
+  // literally as `"undefined-img"` for a caller that omitted it — and every
+  // such instance on a page collided on the same ids.
+  'data-testid': 'lazy-image',
 };
 
 // Strips explicitly-undefined props before the merge, so `lazy={undefined}` still
@@ -141,7 +146,7 @@ const usePlaceholderPhase = (
   props: ResolvedLazyImageProps,
   loadingState: NonNullable<LazyImageProps['loadingState']>,
 ) => {
-  const { placeholder, fadeIn, fadeInDuration } = props;
+  const { placeholder, fadeIn, fadeInDuration, src } = props;
   // Only this mode draws a placeholder. Otherwise the real image settling
   // retires the phase at once — batched into the load's own render, with no
   // timer — so a placeholder switched on afterwards never covers a loaded image.
@@ -149,6 +154,18 @@ const usePlaceholderPhase = (
   const [retired, setRetired] = useState(false);
   const fadeTimeoutRef = useTimeoutRef();
 
+  // FUT-2774 #2: `retired` was set once and never reset, and this hook took
+  // no `src` at all — so a mounted instance reused for a NEW image (a
+  // carousel swapping `src` rather than remounting) never showed the
+  // placeholder again for it. Reset on every `src` change, the same way
+  // `useImageSource` already resets `currentSrc`/`isLoading`/`hasError`; drop
+  // any fade timer left over from the PREVIOUS image, or it would retire the
+  // new placeholder on a schedule that has nothing to do with it.
+  useEffect(() => {
+    clearTimeout(fadeTimeoutRef.current);
+    setRetired(false);
+  }, [src, fadeTimeoutRef]);
+
   const retire = useCallback(() => setRetired(true), []);
 
   // The real image fades in over the placeholder, so it goes when the fade ends.
@@ -186,23 +203,49 @@ const useImageSource = (
     retryCount: 0,
     currentSrc: lazy ? null : src,
   });
+  // FUT-2774 #1: the last `src` PROP this hook has already requested — as
+  // opposed to `state.currentSrc`, which a retry deliberately diverges from
+  // `src` (its cache-busting query string) without a NEW image having
+  // arrived. Comparing the effect's guard against `src` itself let a retry's
+  // own state update immediately retrigger this effect, which overwrote the
+  // cache-busted value back to the plain `src` before the browser ever
+  // re-requested it — so `retryOnError` silently never re-fetched anything.
+  const requestedSrcRef = useRef<string | null>(lazy ? null : src);
+  // `handleImageError` (in `useLazyImage`) owns the retry timer itself, but
+  // it schedules against THIS src's identity: read together, the two hooks
+  // can tell a timeout meant for an image that is no longer the current one
+  // apart from one that still is (FUT-2774, src-changing-mid-retry).
+  const retryTimeoutRef = useTimeoutRef();
 
-  const markVisible = useCallback(
-    () => setState((prev) => ({ ...prev, isVisible: true, currentSrc: src })),
-    [src],
-  );
+  const markVisible = useCallback(() => {
+    requestedSrcRef.current = src;
+    setState((prev) => ({ ...prev, isVisible: true, currentSrc: src }));
+  }, [src]);
   useVisibility(props, containerRef, state.isVisible, markVisible);
 
-  // Load image when it becomes visible
+  // Load image when it becomes visible, or when `src` itself changes to a
+  // genuinely new value — never when only `state.currentSrc` has (a retry).
   useEffect(() => {
-    if (!state.isVisible || !src || state.currentSrc === src) {
+    if (!state.isVisible || !src || requestedSrcRef.current === src) {
       return;
     }
 
-    setState((prev) => ({ ...prev, currentSrc: src, isLoading: true, hasError: false }));
-  }, [state.isVisible, src, state.currentSrc]);
-
-  return [state, setState] as const;
+    // A retry scheduled for the PREVIOUS src must not land on this one: left
+    // pending, its stale `setTimeout` would fire later and overwrite this
+    // fresh `currentSrc` with `${oldSrc}?retry=N` — cache-busting an image
+    // nothing asked for again, and never re-syncing back (FUT-2774).
+    clearTimeout(retryTimeoutRef.current);
+    requestedSrcRef.current = src;
+    setState((prev) => ({
+      ...prev,
+      currentSrc: src,
+      isLoading: true,
+      hasError: false,
+      retryCount: 0,
+    }));
+  }, [state.isVisible, src, retryTimeoutRef]);
+
+  return { state, setState, requestedSrcRef, retryTimeoutRef };
 };
 
 /**
@@ -215,8 +258,7 @@ export const useLazyImage = (props: ResolvedLazyImageProps) => {
   const { onLoad, onError, retryOnError, maxRetries, retryDelay } = props;
 
   const containerRef = useRef<HTMLDivElement>(null);
-  const retryTimeoutRef = useTimeoutRef();
-  const [state, setState] = useImageSource(props, containerRef);
+  const { state, setState, requestedSrcRef, retryTimeoutRef } = useImageSource(props, containerRef);
 
   // Handle deprecated showSpinner prop
   const effectiveLoadingState = showSpinner ? 'spinner' : loadingState;
@@ -244,6 +286,13 @@ export const useLazyImage = (props: ResolvedLazyImageProps) => {
       }
 
       retryTimeoutRef.current = setTimeout(() => {
+        // Belt and suspenders alongside `useImageSource`'s own cancel-on-src-
+        // change: if `src` moved on since this timeout was scheduled, this
+        // retry is for an image that is no longer live at all — applying it
+        // would cache-bust the WRONG `<img>` (FUT-2774).
+        if (requestedSrcRef.current !== src) {
+          return;
+        }
         setState((prev) => ({
           ...prev,
           retryCount: prev.retryCount + 1,
@@ -251,7 +300,7 @@ export const useLazyImage = (props: ResolvedLazyImageProps) => {
         }));
       }, retryDelay);
     },
-    [onError, retryOnError, state.retryCount, maxRetries, retryDelay, src, retirePlaceholder],
+    [onError, retryOnError, state.retryCount, maxRetries, retryDelay, src, retirePlaceholder, requestedSrcRef, retryTimeoutRef],
   );
 
   return {

package/src/components/data-display/LazyImage/LazyImage.md

@@ -16,7 +16,7 @@ The LazyImage component optimizes image loading performance by:
 ### Basic Usage
 
 ```tsx
-import { LazyImage } from '@app-services-monitoring/ui';
+import { LazyImage } from '@12-apps/ui';
 
 function App() {
   return (
@@ -225,7 +225,7 @@ wrapping element, rounded to match the image:
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `decoding` | `'async' \| 'sync' \| 'auto'` | `'async'` | Image decoding hint |
-| `loading` | `'eager' \| 'lazy' \| 'auto'` | `'auto'` | Native loading attribute |
+| `loading` | `'eager' \| 'lazy'` | - | Native `loading` attribute; independent of `lazy` (which gates the `IntersectionObserver`) |
 | `fetchPriority` | `'high' \| 'low' \| 'auto'` | - | Fetch priority hint |
 
 ### Customization Props
@@ -334,48 +334,9 @@ The LazyImage component follows accessibility best practices:
 1. **Lazy Loading**: Images load only when needed, reducing initial page load
 2. **Intersection Observer**: Efficient viewport detection with configurable margins
 3. **Progressive Loading**: Support for placeholder images during load
-4. **Retry Logic**: Automatic retry for failed loads with exponential backoff
+4. **Retry Logic**: Automatic retry for failed loads, at a fixed `retryDelay` — the delay does NOT grow between attempts
 5. **Native Loading**: Leverages browser's native lazy loading when available
 
-## Migration from Original LazyImage
-
-If migrating from the original LazyImage in status-site:
-
-```tsx
-// Old usage
-import { LazyImage } from '../components/LazyImage';
-
-<LazyImage
-  src="image.jpg"
-  alt="Description"
-  width={400}
-  height={300}
-  sx={{ borderRadius: 4 }}
-/>
-
-// New usage (fully backward compatible)
-import { LazyImage } from '@app-services-monitoring/ui';
-
-<LazyImage
-  src="image.jpg"
-  alt="Description"
-  width={400}
-  height={300}
-  sx={{ borderRadius: 4 }}
-/>
-```
-
-### New Features Available After Migration
-
-- Error handling with fallback
-- Multiple loading states
-- Retry mechanism
-- Placeholder support
-- Spinner overlay option
-- Event callbacks
-- Better TypeScript support
-- Performance optimizations
-
 ## Related Components
 
 - [Avatar](../Avatar/Avatar.md) - For user profile images

package/src/components/data-display/LazyImage/LazyImage.tsx

@@ -88,6 +88,18 @@ const innerLength = (theme: Theme, value: Length): string | undefined =>
 const orDefault = (value: Length, fallback: number | string): number | string =>
   value === undefined || value === '' ? fallback : value;
 
+/**
+ * A width/height as `metrics` and the `ReactNode` `ErrorFallback` read it
+ * (FUT-2774 #4): an explicit empty string is normalized to "as if unset"
+ * rather than mapped to a component-wide default. Unlike `SkeletonIndicator`
+ * (a content-less box with nothing else to size by, hence its own deliberate
+ * `'100%'`/`'auto'` fallback), these draw the real image or a `ReactNode`
+ * fallback — both have their own intrinsic size, so leaving an unset width
+ * unset lets it size naturally (`brand-link.tsx`'s logo relies on exactly
+ * this: an unset width capped by its own `sx.maxWidth`).
+ */
+const emptyToUnset = (value: Length): Length => (value === '' ? undefined : value);
+
 /** The box the image occupies, as CSS, shared by the real image and every stand-in for it. */
 interface BoxMetrics {
   width?: string;
@@ -106,10 +118,14 @@ const SkeletonIndicator: React.FC<IndicatorProps> = ({ props }) => {
   const theme = useTheme();
   return (
     <Skeleton
-      variant="rectangular"
+      // FUT-2774 #5: `skeletonProps.variant` was typed but never read — the
+      // variant was hard-coded regardless of what a caller passed.
+      variant={props.skeletonProps.variant ?? 'rectangular'}
       width={innerLength(theme, orDefault(props.width, '100%'))}
       height={innerLength(theme, orDefault(props.height, 'auto'))}
-      animation={props.skeletonProps.animation || 'pulse'}
+      // FUT-2774 #5: `||` reads a caller's `false` the same as "unset", so
+      // `skeletonProps.animation={false}` could never turn the animation off.
+      animation={props.skeletonProps.animation ?? 'pulse'}
       intensity={props.skeletonProps.intensity}
       borderRadius={styleLength(theme, props.borderRadius)}
       data-testid={`${props['data-testid']}-skeleton`}
@@ -124,8 +140,11 @@ const SpinnerIndicator: React.FC<IndicatorProps> = ({ props }) => {
   return (
     <SpinnerOverlay>
       <CircularProgress
-        size={styleLength(theme, spinnerProps.size || 40)}
-        thickness={spinnerProps.thickness || 4}
+        // FUT-2774 #5: `||` read `spinnerProps.size`/`thickness` of `0` the
+        // same as unset — the same class of bug FUT-2669 fixed for
+        // `width`/`height`, missed here.
+        size={styleLength(theme, spinnerProps.size ?? 40)}
+        thickness={spinnerProps.thickness ?? 4}
         sx={{ color: spinnerProps.color || theme.palette.primary.main }}
         data-testid={`${props['data-testid']}-spinner`}
       />
@@ -209,8 +228,19 @@ const ErrorFallback: React.FC<IndicatorProps> = ({ props, metrics }) => {
   return (
     <FallbackContainer
       sx={{
-        width: innerLength(theme, width),
-        height: innerLength(theme, height),
+        // FUT-2774 #4 (see `emptyToUnset`). Does NOT change the confirmed
+        // height collapse — `ImageContainer`'s own height was already `'auto'`
+        // either way; see `LazyImage.test.stories.tsx` for that separate,
+        // unresolved defect. `orDefault(height, 'auto')` is safe to share with
+        // `SkeletonIndicator` (unlike width's `'100%'`, deliberately NOT
+        // shared — see `emptyToUnset`): a PERCENTAGE height against an
+        // auto-height containing block computes to `auto` by spec regardless,
+        // so whether `sx.height` is omitted (falling through to
+        // `FallbackContainer`'s own `height: '100%'`) or set to the literal
+        // `'auto'` here, an unset-height container gives the same result
+        // either way — nothing for this fallback to protect against.
+        width: innerLength(theme, emptyToUnset(width)),
+        height: innerLength(theme, orDefault(height, 'auto')),
         borderRadius: styleLength(theme, borderRadius),
       }}
       data-testid={`${testId}-fallback`}
@@ -242,8 +272,14 @@ export const LazyImage = React.memo<LazyImageProps>(function LazyImage(rawProps)
   const { width, height, borderRadius, alt } = props;
   const testId = props['data-testid'];
   const metrics: BoxMetrics = {
-    width: innerLength(theme, width),
-    height: innerLength(theme, height),
+    // FUT-2774 #4 (see `emptyToUnset`): `metrics` also sizes the REAL `<img>`,
+    // where an unset width means "the image's own intrinsic size" —
+    // `brand-link.tsx`'s logo relies on exactly that. `height`'s `'auto'`
+    // fallback has no such live case to protect: a percentage height against
+    // an auto-height containing block computes to `auto` regardless, so
+    // sharing `SkeletonIndicator`'s fallback changes nothing observable.
+    width: innerLength(theme, emptyToUnset(width)),
+    height: innerLength(theme, orDefault(height, 'auto')),
     objectFit: props.objectFit,
     objectPosition: props.objectPosition,
     borderRadius: styleLength(theme, borderRadius),

package/dist/chunk-BVF2BSWV.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/data-display/LazyImage/LazyImage.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/index.js';\nimport { styled, useTheme, type Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\nimport { Skeleton } from '../../layout/Skeleton';\nimport type { ResolvedLazyImageProps } from './LazyImage.hooks';\nimport { imgPassThrough, resolveLazyImageProps, useLazyImage } from './LazyImage.hooks';\nimport type { LazyImageProps } from './LazyImage.types';\nimport { sheen } from '../../../tokens/ink';\nimport { rem } from '../../../tokens/relative';\n\nconst ImageContainer = styled(Box)(() => ({\n  position: 'relative',\n  display: 'inline-block',\n  overflow: 'hidden',\n}));\n\nconst StyledImage = styled('img')<{\n  fadeIn?: boolean;\n  fadeInDuration?: number;\n  isLoaded?: boolean;\n}>(({ fadeIn, fadeInDuration = 300, isLoaded }) => ({\n  display: 'block',\n  maxWidth: '100%',\n  height: 'auto',\n  opacity: fadeIn ? (isLoaded ? 1 : 0) : 1,\n  transition: fadeIn ? `opacity ${fadeInDuration}ms ease-in-out` : 'none',\n}));\n\nconst SpinnerOverlay = styled(Box)(({ theme }) => ({\n  position: 'absolute',\n  top: '50%',\n  left: '50%',\n  transform: 'translate(-50%, -50%)',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  backgroundColor: sheen(theme, 0.8),\n  borderRadius: '50%',\n  padding: theme.spacing(1),\n}));\n\nconst FallbackContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  backgroundColor: theme.palette.action.disabledBackground,\n  color: theme.palette.text.secondary,\n  width: '100%',\n  height: '100%',\n  position: 'absolute',\n  top: 0,\n  left: 0,\n}));\n\ntype Length = number | string | undefined;\n\n/** A length prop as React `style` and MUI's `Skeleton` read it: a number is design px. */\nconst styleLength = (theme: Theme, value: Length): string | undefined =>\n  typeof value === 'number' ? rem(theme, value) : value;\n\n/**\n * A width or height above 0 and up to 1 is a fraction of the container's parent, as in `sx`.\n * A negative number is no fraction: it stays a (negative, so invalid) length.\n */\nconst isFraction = (value: Length): value is number =>\n  typeof value === 'number' && value > 0 && value <= 1;\n\n/**\n * A length prop as `sx` reads it on a width or height: a number of 1 or less is\n * a fraction of the parent, and that stays so; any other number is design px.\n */\nconst sxLength = (theme: Theme, value: Length): string | undefined =>\n  isFraction(value) ? `${value * 100}%` : styleLength(theme, value);\n\n/**\n * A width or height for what is drawn inside the container. The container alone\n * takes a fraction, so everything in it fills it: a percentage here is measured\n * against the container and would stack (FUT-2666). Otherwise the same as `styleLength`.\n */\nconst innerLength = (theme: Theme, value: Length): string | undefined =>\n  isFraction(value) ? '100%' : styleLength(theme, value);\n\n/**\n * A width or height with its default. Only an unset or empty size takes it: `0`\n * is a size, which `||` read as unset (FUT-2669), and `sx` reads `''` as `0%`.\n */\nconst orDefault = (value: Length, fallback: number | string): number | string =>\n  value === undefined || value === '' ? fallback : value;\n\n/** The box the image occupies, as CSS, shared by the real image and every stand-in for it. */\ninterface BoxMetrics {\n  width?: string;\n  height?: string;\n  objectFit: NonNullable<LazyImageProps['objectFit']>;\n  objectPosition: string;\n  borderRadius?: string;\n}\n\ninterface IndicatorProps {\n  props: ResolvedLazyImageProps;\n  metrics: BoxMetrics;\n}\n\nconst SkeletonIndicator: React.FC<IndicatorProps> = ({ props }) => {\n  const theme = useTheme();\n  return (\n    <Skeleton\n      variant=\"rectangular\"\n      width={innerLength(theme, orDefault(props.width, '100%'))}\n      height={innerLength(theme, orDefault(props.height, 'auto'))}\n      animation={props.skeletonProps.animation || 'pulse'}\n      intensity={props.skeletonProps.intensity}\n      borderRadius={styleLength(theme, props.borderRadius)}\n      data-testid={`${props['data-testid']}-skeleton`}\n    />\n  );\n};\n\nconst SpinnerIndicator: React.FC<IndicatorProps> = ({ props }) => {\n  const theme = useTheme();\n  const { spinnerProps } = props;\n\n  return (\n    <SpinnerOverlay>\n      <CircularProgress\n        size={styleLength(theme, spinnerProps.size || 40)}\n        thickness={spinnerProps.thickness || 4}\n        sx={{ color: spinnerProps.color || theme.palette.primary.main }}\n        data-testid={`${props['data-testid']}-spinner`}\n      />\n    </SpinnerOverlay>\n  );\n};\n\n/**\n * The placeholder sits in the box's flow and gives the box its size: the box's\n * own when one is set, the placeholder's when not. The real image is drawn over\n * it (`OVER_PLACEHOLDER`) until it has faded in. Its load and error are not the\n * image's, so neither reaches the caller; a failing one just retires.\n */\nconst PlaceholderIndicator: React.FC<IndicatorProps & { onError: () => void }> = ({\n  props,\n  metrics,\n  onError,\n}) => {\n  if (!props.placeholder) return null;\n\n  return (\n    <StyledImage\n      src={props.placeholder}\n      alt={`${props.alt} (loading)`}\n      style={metrics}\n      decoding={props.decoding}\n      loading={props.lazy ? 'lazy' : props.loading}\n      onError={onError}\n      data-testid={`${props['data-testid']}-placeholder`}\n    />\n  );\n};\n\nconst LoadingIndicator: React.FC<\n  IndicatorProps & { kind: NonNullable<LazyImageProps['loadingState']>; onPlaceholderError: () => void }\n> = ({ kind, onPlaceholderError, ...rest }) => {\n  switch (kind) {\n    case 'skeleton':\n      return <SkeletonIndicator {...rest} />;\n    case 'spinner':\n      return <SpinnerIndicator {...rest} />;\n    case 'placeholder':\n      return <PlaceholderIndicator {...rest} onError={onPlaceholderError} />;\n    default:\n      return null;\n  }\n};\n\n/**\n * The real image while the placeholder is up: laid over it and cropped by\n * `objectFit`, so the box never grows to hold both. It takes the flow back\n * when the placeholder goes.\n */\nconst OVER_PLACEHOLDER: React.CSSProperties = {\n  position: 'absolute',\n  inset: 0,\n  width: '100%',\n  height: '100%',\n};\n\nconst ErrorFallback: React.FC<IndicatorProps> = ({ props, metrics }) => {\n  const theme = useTheme();\n  const { alt, fallback, width, height, borderRadius } = props;\n  const testId = props['data-testid'];\n\n  if (!fallback) return null;\n\n  if (typeof fallback === 'string') {\n    return (\n      <StyledImage\n        src={fallback}\n        alt={`${alt} (fallback)`}\n        style={metrics}\n        fadeIn={false}\n        isLoaded={true}\n        data-testid={`${testId}-fallback`}\n      />\n    );\n  }\n\n  return (\n    <FallbackContainer\n      sx={{\n        width: innerLength(theme, width),\n        height: innerLength(theme, height),\n        borderRadius: styleLength(theme, borderRadius),\n      }}\n      data-testid={`${testId}-fallback`}\n    >\n      {fallback}\n    </FallbackContainer>\n  );\n};\n\n/**\n * LazyImage component with enhanced features for optimized image loading\n * Supports lazy loading, placeholders, error handling, and various loading states\n */\nexport const LazyImage = React.memo<LazyImageProps>(function LazyImage(rawProps) {\n  const props = resolveLazyImageProps(rawProps);\n  const theme = useTheme();\n  const {\n    state,\n    containerRef,\n    effectiveLoadingState,\n    handleImageLoad,\n    handleImageError,\n    handlePlaceholderError,\n    showImage,\n    showLoading,\n    showPlaceholder,\n  } = useLazyImage(props);\n\n  const { width, height, borderRadius, alt } = props;\n  const testId = props['data-testid'];\n  const metrics: BoxMetrics = {\n    width: innerLength(theme, width),\n    height: innerLength(theme, height),\n    objectFit: props.objectFit,\n    objectPosition: props.objectPosition,\n    borderRadius: styleLength(theme, borderRadius),\n  };\n\n  return (\n    <ImageContainer\n      ref={containerRef}\n      className={props.className}\n      sx={{\n        width: sxLength(theme, orDefault(width, 'auto')),\n        height: sxLength(theme, orDefault(height, 'auto')),\n        // The same px length the image gets (`metrics`): in `sx` a bare number\n        // would be a multiple of `shape.borderRadius`, and this box clips (FUT-2656).\n        borderRadius: metrics.borderRadius,\n      }}\n      data-testid={testId}\n    >\n      {showLoading && (\n        <LoadingIndicator\n          kind={effectiveLoadingState}\n          props={props}\n          metrics={metrics}\n          onPlaceholderError={handlePlaceholderError}\n        />\n      )}\n\n      {showImage && (\n        <StyledImage\n          src={state.currentSrc || undefined}\n          alt={alt}\n          onLoad={handleImageLoad}\n          onError={handleImageError}\n          fadeIn={props.fadeIn}\n          fadeInDuration={props.fadeInDuration}\n          isLoaded={!state.isLoading}\n          decoding={props.decoding}\n          loading={props.lazy ? 'lazy' : props.loading}\n          style={{ ...metrics, ...props.sx, ...(showPlaceholder && OVER_PLACEHOLDER) }}\n          aria-label={props['aria-label'] || alt}\n          aria-describedby={props['aria-describedby']}\n          role={props.role}\n          data-testid={`${testId}-img`}\n          {...imgPassThrough(props)}\n        />\n      )}\n\n      {state.hasError && <ErrorFallback props={props} metrics={metrics} />}\n    </ImageContainer>\n  );\n});\n\nLazyImage.displayName = 'LazyImage';\n"],"mappings":"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","names":["LazyImage"]}

package/dist/chunk-GMUYCN33.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/data-display/LazyImage/LazyImage.hooks.ts"],"sourcesContent":["import { useTheme } from '@mui/material/styles/index.js';\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { remPx } from '../../../tokens/relative';\n\nimport type { LazyImageProps, LazyImageState } from './LazyImage.types';\n\ntype LazyImageDefaultedKeys =\n  | 'height'\n  | 'loadingState'\n  | 'objectFit'\n  | 'objectPosition'\n  | 'lazy'\n  | 'threshold'\n  | 'fadeIn'\n  | 'fadeInDuration'\n  | 'retryOnError'\n  | 'maxRetries'\n  | 'retryDelay'\n  | 'decoding'\n  | 'skeletonProps'\n  | 'spinnerProps'\n  | 'sx'\n  | 'role';\n\nexport type ResolvedLazyImageProps = LazyImageProps &\n  Required<Pick<LazyImageProps, LazyImageDefaultedKeys>>;\n\nconst LAZY_IMAGE_DEFAULTS: Pick<LazyImageProps, LazyImageDefaultedKeys> = {\n  height: 'auto',\n  loadingState: 'skeleton',\n  objectFit: 'cover',\n  objectPosition: 'center',\n  lazy: true,\n  threshold: 0,\n  fadeIn: true,\n  fadeInDuration: 300,\n  retryOnError: false,\n  maxRetries: 3,\n  retryDelay: 1000,\n  decoding: 'async',\n  skeletonProps: {},\n  spinnerProps: {},\n  sx: {},\n  role: 'img',\n};\n\n// Strips explicitly-undefined props before the merge, so `lazy={undefined}` still\n// falls back to the default exactly as a destructuring default would.\nconst definedProps = (props: LazyImageProps): Partial<LazyImageProps> =>\n  Object.fromEntries(\n    Object.entries(props).filter(([, value]) => value !== undefined),\n  ) as Partial<LazyImageProps>;\n\nexport const resolveLazyImageProps = (props: LazyImageProps): ResolvedLazyImageProps =>\n  ({ ...LAZY_IMAGE_DEFAULTS, ...definedProps(props) }) as ResolvedLazyImageProps;\n\n// Props this component consumes itself. Anything else the caller passed is an\n// ordinary <img> attribute and is forwarded untouched.\nconst OWN_PROPS = new Set([\n  'src', 'alt', 'width', 'height', 'placeholder', 'fallback', 'loadingState',\n  'showSpinner', 'objectFit', 'objectPosition', 'borderRadius', 'lazy', 'rootMargin',\n  'threshold', 'fadeIn', 'fadeInDuration', 'onLoad', 'onError', 'onLoadStart',\n  'retryOnError', 'maxRetries', 'retryDelay', 'decoding', 'loading', 'fetchPriority',\n  'skeletonProps', 'spinnerProps', 'sx', 'className', 'data-testid', 'aria-label',\n  'aria-describedby', 'role',\n]);\n\nexport const imgPassThrough = (props: ResolvedLazyImageProps): Record<string, unknown> =>\n  Object.fromEntries(Object.entries(props).filter(([key]) => !OWN_PROPS.has(key)));\n\n/**\n * Flips `isVisible` the first time the container nears the viewport, then stops\n * observing. Does nothing when `lazy` is off — the caller wants the request now.\n */\nconst useVisibility = (\n  props: ResolvedLazyImageProps,\n  containerRef: React.RefObject<HTMLDivElement | null>,\n  isVisible: boolean,\n  onVisible: () => void,\n) => {\n  const { lazy, src, threshold, onLoadStart } = props;\n  const theme = useTheme();\n  // `IntersectionObserver` takes px or %, never rem: the default reach is 100\n  // design px, measured through the theme so it moves with the root.\n  const rootMargin = props.rootMargin ?? `${remPx(theme, 100)}px`;\n\n  useEffect(() => {\n    if (!lazy || isVisible) {\n      return;\n    }\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        entries.forEach((entry) => {\n          if (entry.isIntersecting) {\n            onVisible();\n            onLoadStart?.();\n            observer.unobserve(entry.target);\n          }\n        });\n      },\n      { rootMargin, threshold },\n    );\n\n    if (containerRef.current) {\n      observer.observe(containerRef.current);\n    }\n\n    return () => {\n      if (containerRef.current) {\n        observer.unobserve(containerRef.current);\n      }\n    };\n  }, [lazy, src, rootMargin, threshold, isVisible, onLoadStart, onVisible, containerRef]);\n};\n\n/** A pending timer has to be cancelled on unmount, or it sets state on a dead component. */\nconst useTimeoutRef = () => {\n  const ref = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n  useEffect(\n    () => () => {\n      if (ref.current) {\n        clearTimeout(ref.current);\n      }\n    },\n    [],\n  );\n\n  return ref;\n};\n\n/**\n * Whether the placeholder image is up. It is a loading state: only\n * `loadingState=\"placeholder\"` with a `placeholder` set draws it, from mount\n * until the real image settles — its `load` plus the fade, or its final error.\n * A placeholder that fails to load retires at once, as if none were set.\n */\nconst usePlaceholderPhase = (\n  props: ResolvedLazyImageProps,\n  loadingState: NonNullable<LazyImageProps['loadingState']>,\n) => {\n  const { placeholder, fadeIn, fadeInDuration } = props;\n  // Only this mode draws a placeholder. Otherwise the real image settling\n  // retires the phase at once — batched into the load's own render, with no\n  // timer — so a placeholder switched on afterwards never covers a loaded image.\n  const active = loadingState === 'placeholder' && Boolean(placeholder);\n  const [retired, setRetired] = useState(false);\n  const fadeTimeoutRef = useTimeoutRef();\n\n  const retire = useCallback(() => setRetired(true), []);\n\n  // The real image fades in over the placeholder, so it goes when the fade ends.\n  const retireAfterFade = useCallback(() => {\n    if (!active || !fadeIn) {\n      setRetired(true);\n      return;\n    }\n    clearTimeout(fadeTimeoutRef.current);\n    fadeTimeoutRef.current = setTimeout(() => setRetired(true), fadeInDuration);\n  }, [active, fadeIn, fadeInDuration, fadeTimeoutRef]);\n\n  return {\n    showPlaceholder: active && !retired,\n    retirePlaceholder: retire,\n    retirePlaceholderAfterFade: retireAfterFade,\n  };\n};\n\n/**\n * The real image's state, and when it is requested: at once when not lazy,\n * else the first time the container nears the viewport. The main <img> only\n * ever carries the real src — a placeholder is drawn by its own element, so its\n * load and error are never the image's.\n */\nconst useImageSource = (\n  props: ResolvedLazyImageProps,\n  containerRef: React.RefObject<HTMLDivElement | null>,\n) => {\n  const { src, lazy } = props;\n  const [state, setState] = useState<LazyImageState>({\n    isLoading: true,\n    hasError: false,\n    isVisible: !lazy, // If not lazy, load immediately\n    retryCount: 0,\n    currentSrc: lazy ? null : src,\n  });\n\n  const markVisible = useCallback(\n    () => setState((prev) => ({ ...prev, isVisible: true, currentSrc: src })),\n    [src],\n  );\n  useVisibility(props, containerRef, state.isVisible, markVisible);\n\n  // Load image when it becomes visible\n  useEffect(() => {\n    if (!state.isVisible || !src || state.currentSrc === src) {\n      return;\n    }\n\n    setState((prev) => ({ ...prev, currentSrc: src, isLoading: true, hasError: false }));\n  }, [state.isVisible, src, state.currentSrc]);\n\n  return [state, setState] as const;\n};\n\n/**\n * Owns whether the real image has been requested yet and how it went: the\n * observer above, the load/error handlers, the retry timer, and how long the\n * placeholder stays up.\n */\nexport const useLazyImage = (props: ResolvedLazyImageProps) => {\n  const { src, loadingState, showSpinner } = props;\n  const { onLoad, onError, retryOnError, maxRetries, retryDelay } = props;\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const retryTimeoutRef = useTimeoutRef();\n  const [state, setState] = useImageSource(props, containerRef);\n\n  // Handle deprecated showSpinner prop\n  const effectiveLoadingState = showSpinner ? 'spinner' : loadingState;\n  const { showPlaceholder, retirePlaceholder, retirePlaceholderAfterFade } = usePlaceholderPhase(\n    props,\n    effectiveLoadingState,\n  );\n\n  const handleImageLoad = useCallback(\n    (event: React.SyntheticEvent<HTMLImageElement>) => {\n      setState((prev) => ({ ...prev, isLoading: false, hasError: false, retryCount: 0 }));\n      retirePlaceholderAfterFade();\n      onLoad?.(event);\n    },\n    [onLoad, retirePlaceholderAfterFade],\n  );\n\n  const handleImageError = useCallback(\n    (event: React.SyntheticEvent<HTMLImageElement>) => {\n      if (!retryOnError || state.retryCount >= maxRetries) {\n        setState((prev) => ({ ...prev, isLoading: false, hasError: true }));\n        retirePlaceholder();\n        onError?.(event);\n        return;\n      }\n\n      retryTimeoutRef.current = setTimeout(() => {\n        setState((prev) => ({\n          ...prev,\n          retryCount: prev.retryCount + 1,\n          currentSrc: `${src}?retry=${prev.retryCount + 1}`, // Force reload with cache buster\n        }));\n      }, retryDelay);\n    },\n    [onError, retryOnError, state.retryCount, maxRetries, retryDelay, src, retirePlaceholder],\n  );\n\n  return {\n    state,\n    containerRef,\n    effectiveLoadingState,\n    handleImageLoad,\n    handleImageError,\n    handlePlaceholderError: retirePlaceholder,\n    showImage: Boolean(state.currentSrc) && !state.hasError,\n    // In placeholder mode the placeholder outlasts `isLoading`: it stays under\n    // the real image until the fade has ended.\n    showLoading: effectiveLoadingState === 'placeholder' ? showPlaceholder : state.isLoading,\n    showPlaceholder,\n  };\n};\n"],"mappings":"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","names":[]}