@se-studio/core-ui 1.30.1 → 1.31.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @se-studio/core-ui
 
+## 1.31.0
+
+### Minor Changes
+
+- afaa382: Bound listing-card `next/image` srcset in PictureComponent via `getImageProps` + a configured-width filter (`cardVisualSizes` px/`min()` caps). Heroes and unconstrained visuals keep the full ladder. Requests stay on `/_next/image`.
+
+## 1.30.2
+
+### Patch Changes
+
+- c3f9c5e: GIF origin bandwidth: default Images API `fm=webp` + `w≤1280` for `image/gif` on images/assets.ctfassets.net, with `gifTransform: 'off'` opt-out. PictureComponent sets `unoptimized` for GIF mime so next/image does not srcSet the GIF master. Blur enricher skips GIFs. Custom loaders must preserve `fm`.
+- Updated dependencies [c3f9c5e]
+  - @se-studio/contentful-rest-api@1.28.0
+
 ## 1.30.1
 
 ### Patch Changes

package/dist/components/PictureComponent.d.ts

@@ -1,7 +1,10 @@
 import { type IPicture } from '@se-studio/core-data-types';
 import { type IImageProps } from './Visual';
-declare function PictureComponent({ image, style, visualSizes, placeholder, blurDataURL, ...rest }: {
+declare function PictureComponent({ image, style, visualSizes, placeholder, blurDataURL, fetchPriority, priority, preload, ...rest }: {
     image: IPicture;
-} & Omit<IImageProps, 'analytics' | 'componentLabel'>): import("react").JSX.Element;
+} & Omit<IImageProps, 'analytics' | 'componentLabel'> & {
+    priority?: boolean;
+    preload?: boolean;
+}): import("react").JSX.Element;
 export default PictureComponent;
 //# sourceMappingURL=PictureComponent.d.ts.map

package/dist/components/PictureComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PictureComponent.d.ts","sourceRoot":"","sources":["../../src/components/PictureComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,QAAQ,EAAmC,MAAM,4BAA4B,CAAC;AAE5F,OAAO,EAAwB,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAsBlE,iBAAS,gBAAgB,CAAC,EACxB,KAAK,EACL,KAAK,EACL,WAAW,EACX,WAAW,EACX,WAAW,EACX,GAAG,IAAI,EACR,EAAE;IAAE,KAAK,EAAE,QAAQ,CAAA;CAAE,GAAG,IAAI,CAAC,WAAW,EAAE,WAAW,GAAG,gBAAgB,CAAC,+BAkBzE;eACc,gBAAgB"}
+{"version":3,"file":"PictureComponent.d.ts","sourceRoot":"","sources":["../../src/components/PictureComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,QAAQ,EAAmC,MAAM,4BAA4B,CAAC;AAG5F,OAAO,EAAwB,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AA+BlE,iBAAS,gBAAgB,CAAC,EACxB,KAAK,EACL,KAAK,EACL,WAAW,EACX,WAAW,EACX,WAAW,EACX,aAAa,EACb,QAAQ,EACR,OAAO,EACP,GAAG,IAAI,EACR,EAAE;IAAE,KAAK,EAAE,QAAQ,CAAA;CAAE,GAAG,IAAI,CAAC,WAAW,EAAE,WAAW,GAAG,gBAAgB,CAAC,GAAG;IACzE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,+BAmCF;eACc,gBAAgB"}

package/dist/components/PictureComponent.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { processSizes } from '@se-studio/core-data-types';
-import Image from 'next/image';
+import Image, { getImageProps } from 'next/image';
+import { filterBoundedSrcSet, isCappedVisualSizes } from '../utils/boundedImageSrcSet';
 import { calculateCropDetails } from './Visual';
 function calculateSizes(visualSizes) {
     if (!visualSizes) {
@@ -20,10 +21,44 @@ function calculateSizes(visualSizes) {
     }
     return result.join(',');
 }
-function PictureComponent({ image, style, visualSizes, placeholder, blurDataURL, ...rest }) {
+function isGifPicture(image) {
+    const mime = image.mimeType?.toLowerCase() ?? '';
+    if (mime === 'image/gif') {
+        return true;
+    }
+    const path = image.src.split('?')[0]?.toLowerCase() ?? '';
+    return path.endsWith('.gif');
+}
+function PictureComponent({ image, style, visualSizes, placeholder, blurDataURL, fetchPriority, priority, preload, ...rest }) {
     const cropProperties = calculateCropDetails(image);
     const useImageBlur = Boolean(image.blurDataURL) && placeholder === undefined && blurDataURL === undefined;
-    return (_jsx(Image, { src: image.src, width: image.width, height: image.height, style: { ...style, ...cropProperties }, alt: image.description ?? image.name, sizes: calculateSizes(visualSizes), placeholder: useImageBlur ? 'blur' : placeholder, blurDataURL: useImageBlur ? image.blurDataURL : blurDataURL, ...rest }));
+    const gifUnoptimized = isGifPicture(image);
+    const sizes = calculateSizes(visualSizes);
+    const keepFullImageLadder = gifUnoptimized || fetchPriority === 'high' || priority === true || preload === true;
+    const imageElementProps = {
+        src: image.src,
+        width: image.width,
+        height: image.height,
+        style: { ...style, ...cropProperties },
+        alt: image.description ?? image.name,
+        sizes,
+        placeholder: useImageBlur ? 'blur' : placeholder,
+        blurDataURL: useImageBlur ? image.blurDataURL : blurDataURL,
+        fetchPriority,
+        priority,
+        preload,
+        ...rest,
+        unoptimized: gifUnoptimized || undefined,
+    };
+    if (!keepFullImageLadder && isCappedVisualSizes(visualSizes)) {
+        const { props } = getImageProps(imageElementProps);
+        const filtered = props.srcSet ? filterBoundedSrcSet(props.srcSet) : undefined;
+        if (filtered) {
+            // biome-ignore lint/performance/noImgElement: filtered getImageProps; Image would rebuild the full srcset
+            return _jsx("img", { ...props, alt: props.alt, srcSet: filtered.srcSet, src: filtered.src });
+        }
+    }
+    return _jsx(Image, { ...imageElementProps });
 }
 export default PictureComponent;
 //# sourceMappingURL=PictureComponent.js.map

package/dist/components/PictureComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"PictureComponent.js","sourceRoot":"","sources":["../../src/components/PictureComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAoC,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC5F,OAAO,KAAK,MAAM,YAAY,CAAC;AAC/B,OAAO,EAAE,oBAAoB,EAAoB,MAAM,UAAU,CAAC;AAElE,SAAS,cAAc,CAAC,WAA0B;IAChD,IAAI,CAAC,WAAW,EAAE,CAAC;QACjB,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,MAAM,MAAM,GACV,YAAY,CAAC,WAAW,CAAC;QACvB,EAAE,WAAW,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAC,QAAQ,CAAC;SACrD,GAAG,CAAC,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,eAAe,QAAQ,OAAO,IAAI,EAAE,CAAC,IAAI,EAAE,CAAC;IAC7E,IAAI,WAAW,CAAC,WAAW,EAAE,CAAC;QAC5B,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;IACvC,CAAC;SAAM,IAAI,WAAW,CAAC,aAAa,EAAE,CAAC;QACrC,MAAM,CAAC,IAAI,CAAC,GAAG,WAAW,CAAC,aAAa,IAAI,CAAC,CAAC;IAChD,CAAC;SAAM,CAAC;QACN,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACvB,CAAC;IAED,OAAO,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAC1B,CAAC;AAED,SAAS,gBAAgB,CAAC,EACxB,KAAK,EACL,KAAK,EACL,WAAW,EACX,WAAW,EACX,WAAW,EACX,GAAG,IAAI,EACiE;IACxE,MAAM,cAAc,GAAG,oBAAoB,CAAC,KAAK,CAAC,CAAC;IACnD,MAAM,YAAY,GAChB,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,WAAW,KAAK,SAAS,IAAI,WAAW,KAAK,SAAS,CAAC;IAEvF,OAAO,CACL,KAAC,KAAK,IACJ,GAAG,EAAE,KAAK,CAAC,GAAG,EACd,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,KAAK,EAAE,EAAE,GAAG,KAAK,EAAE,GAAG,cAAc,EAAE,EACtC,GAAG,EAAE,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,IAAI,EACpC,KAAK,EAAE,cAAc,CAAC,WAAW,CAAC,EAClC,WAAW,EAAE,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,EAChD,WAAW,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,KACvD,IAAI,GACR,CACH,CAAC;AACJ,CAAC;AACD,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"PictureComponent.js","sourceRoot":"","sources":["../../src/components/PictureComponent.tsx"],"names":[],"mappings":"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"}

package/dist/utils/boundedImageSrcSet.d.ts

@@ -0,0 +1,28 @@
+import type { IVisualSizes } from '@se-studio/core-data-types';
+/** Widths already in typical Next `imageSizes` / `deviceSizes` — never invent others. */
+export declare const CARD_SRCSET_CORE_WIDTHS: readonly [384, 640, 828, 1080];
+/** Drop 1920+ on cards; keep one candidate in this range for mobile `100vw`. */
+export declare const CARD_SRCSET_MAX_LARGE_WIDTH = 1504;
+/**
+ * True when `visualSizes` looks like `cardVisualSizes` (desktop `Npx` / `min(…, Npx)`).
+ * Uses `size` / `defaultSize` / `defaultPixels` only — ignore breakpoint `pixels`
+ * (`calculateVisualSizes` always sets `pixels` on vw slots; that would false-cap heroes).
+ * A hand-written `min(100vw, 1440px)` hero is treated as capped.
+ */
+export declare function isCappedVisualSizes(visualSizes?: IVisualSizes): boolean;
+export interface SrcSetCandidate {
+    url: string;
+    width: number;
+}
+export declare function parseSrcSet(srcSet: string): SrcSetCandidate[];
+export interface FilteredSrcSet {
+    srcSet: string;
+    src: string;
+    widths: number[];
+}
+/**
+ * Keep a small subset of widths that already appear in `srcSet`.
+ * Drops icon buckets (16–256) and 1920+; keeps 384, 640, 828, 1080 plus one large ≤1504.
+ */
+export declare function filterBoundedSrcSet(srcSet: string): FilteredSrcSet | undefined;
+//# sourceMappingURL=boundedImageSrcSet.d.ts.map

package/dist/utils/boundedImageSrcSet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"boundedImageSrcSet.d.ts","sourceRoot":"","sources":["../../src/utils/boundedImageSrcSet.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE/D,yFAAyF;AACzF,eAAO,MAAM,uBAAuB,YAAI,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,CAAU,CAAC;AAEtE,gFAAgF;AAChF,eAAO,MAAM,2BAA2B,OAAO,CAAC;AAgBhD;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,WAAW,CAAC,EAAE,YAAY,GAAG,OAAO,CAWvE;AAED,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,WAAW,CAAC,MAAM,EAAE,MAAM,GAAG,eAAe,EAAE,CAmB7D;AAED,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,EAAE,CAAC;CAClB;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,MAAM,GAAG,cAAc,GAAG,SAAS,CAoD9E"}

package/dist/utils/boundedImageSrcSet.js

@@ -0,0 +1,104 @@
+/** Widths already in typical Next `imageSizes` / `deviceSizes` — never invent others. */
+export const CARD_SRCSET_CORE_WIDTHS = [384, 640, 828, 1080];
+/** Drop 1920+ on cards; keep one candidate in this range for mobile `100vw`. */
+export const CARD_SRCSET_MAX_LARGE_WIDTH = 1504;
+const ICON_MAX_WIDTH = 256;
+const CORE_MAX_WIDTH = 1080;
+function isPixelOrMinSize(size) {
+    if (!size) {
+        return false;
+    }
+    const trimmed = size.trim();
+    if (/^\d+(?:\.\d+)?px$/i.test(trimmed)) {
+        return true;
+    }
+    return /\bmin\s*\(/i.test(trimmed);
+}
+/**
+ * True when `visualSizes` looks like `cardVisualSizes` (desktop `Npx` / `min(…, Npx)`).
+ * Uses `size` / `defaultSize` / `defaultPixels` only — ignore breakpoint `pixels`
+ * (`calculateVisualSizes` always sets `pixels` on vw slots; that would false-cap heroes).
+ * A hand-written `min(100vw, 1440px)` hero is treated as capped.
+ */
+export function isCappedVisualSizes(visualSizes) {
+    if (!visualSizes) {
+        return false;
+    }
+    if (isPixelOrMinSize(visualSizes.defaultSize)) {
+        return true;
+    }
+    if (visualSizes.defaultPixels != null && !visualSizes.defaultSize) {
+        return true;
+    }
+    return visualSizes.breakpoints?.some((breakpoint) => isPixelOrMinSize(breakpoint.size)) ?? false;
+}
+export function parseSrcSet(srcSet) {
+    const candidates = [];
+    for (const part of srcSet.split(',')) {
+        const trimmed = part.trim();
+        if (!trimmed) {
+            continue;
+        }
+        const match = /^(.+?)\s+(\d+)w$/i.exec(trimmed);
+        if (!match) {
+            continue;
+        }
+        const url = match[1]?.trim();
+        const widthRaw = match[2];
+        if (!url || widthRaw === undefined) {
+            continue;
+        }
+        candidates.push({ url, width: Number(widthRaw) });
+    }
+    return candidates;
+}
+/**
+ * Keep a small subset of widths that already appear in `srcSet`.
+ * Drops icon buckets (16–256) and 1920+; keeps 384, 640, 828, 1080 plus one large ≤1504.
+ */
+export function filterBoundedSrcSet(srcSet) {
+    const candidates = parseSrcSet(srcSet);
+    if (candidates.length === 0) {
+        return undefined;
+    }
+    const byWidth = new Map();
+    for (const candidate of candidates) {
+        if (!byWidth.has(candidate.width)) {
+            byWidth.set(candidate.width, candidate.url);
+        }
+    }
+    const kept = [];
+    for (const width of CARD_SRCSET_CORE_WIDTHS) {
+        if (byWidth.has(width)) {
+            kept.push(width);
+        }
+    }
+    const large = [...byWidth.keys()].filter((width) => width > CORE_MAX_WIDTH && width <= CARD_SRCSET_MAX_LARGE_WIDTH);
+    if (large.length > 0) {
+        kept.push(Math.max(...large));
+    }
+    if (kept.length === 0) {
+        const fallback = [...byWidth.keys()]
+            .filter((width) => width > ICON_MAX_WIDTH && width <= CARD_SRCSET_MAX_LARGE_WIDTH)
+            .sort((a, b) => a - b);
+        if (fallback.length === 0) {
+            return undefined;
+        }
+        kept.push(...fallback);
+    }
+    const widths = [...new Set(kept)].sort((a, b) => a - b);
+    const largest = widths[widths.length - 1];
+    if (largest === undefined) {
+        return undefined;
+    }
+    const src = byWidth.get(largest);
+    if (!src) {
+        return undefined;
+    }
+    return {
+        srcSet: widths.map((width) => `${byWidth.get(width)} ${width}w`).join(', '),
+        src,
+        widths,
+    };
+}
+//# sourceMappingURL=boundedImageSrcSet.js.map

package/dist/utils/boundedImageSrcSet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"boundedImageSrcSet.js","sourceRoot":"","sources":["../../src/utils/boundedImageSrcSet.ts"],"names":[],"mappings":"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"}

package/dist/utils/visualSizes.d.ts

@@ -19,6 +19,7 @@ export declare function heroVisualSizes(): IVisualSizes;
 /**
  * Card-grid `visualSizes`: mobile column vw, laptop column vw capped at the
  * content-max px slot, desktop px cap (`contentMax / columns`).
+ * Use this (not `calculateVisualSizes(1)`) for Explore-style in-card GIFs.
  */
 export declare function cardVisualSizes({ columns, contentMax, mobileColumns, breakpoints, }: CardVisualSizesOptions): IVisualSizes;
 //# sourceMappingURL=visualSizes.d.ts.map

package/dist/utils/visualSizes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"visualSizes.d.ts","sourceRoot":"","sources":["../../src/utils/visualSizes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE/D,eAAO,MAAM,mBAAmB,OAAO,CAAC;AAExC,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,MAAM,EAAE;IAAE,UAAU,EAAE,MAAM,CAAA;CAAE,CAItE,CAAC;AAEF,MAAM,WAAW,sBAAsB;IACrC,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,UAAU,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CACtD;AAED,wBAAgB,oBAAoB,CAClC,YAAY,EAAE,MAAM,EACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,EAClD,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE;IAAE,UAAU,EAAE,MAAM,CAAA;CAAE,CAAC,GAC7C,YAAY,CAsBd;AAaD,iEAAiE;AACjE,wBAAgB,eAAe,IAAI,YAAY,CAE9C;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,EAC9B,OAAO,EACP,UAAgC,EAChC,aAAiB,EACjB,WAAiC,GAClC,EAAE,sBAAsB,GAAG,YAAY,CA+BvC"}
+{"version":3,"file":"visualSizes.d.ts","sourceRoot":"","sources":["../../src/utils/visualSizes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE/D,eAAO,MAAM,mBAAmB,OAAO,CAAC;AAExC,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,MAAM,EAAE;IAAE,UAAU,EAAE,MAAM,CAAA;CAAE,CAItE,CAAC;AAEF,MAAM,WAAW,sBAAsB;IACrC,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,UAAU,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CACtD;AAED,wBAAgB,oBAAoB,CAClC,YAAY,EAAE,MAAM,EACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,EAClD,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE;IAAE,UAAU,EAAE,MAAM,CAAA;CAAE,CAAC,GAC7C,YAAY,CAsBd;AAaD,iEAAiE;AACjE,wBAAgB,eAAe,IAAI,YAAY,CAE9C;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,EAC9B,OAAO,EACP,UAAgC,EAChC,aAAiB,EACjB,WAAiC,GAClC,EAAE,sBAAsB,GAAG,YAAY,CA+BvC"}

package/dist/utils/visualSizes.js

@@ -39,6 +39,7 @@ export function heroVisualSizes() {
 /**
  * Card-grid `visualSizes`: mobile column vw, laptop column vw capped at the
  * content-max px slot, desktop px cap (`contentMax / columns`).
+ * Use this (not `calculateVisualSizes(1)`) for Explore-style in-card GIFs.
  */
 export function cardVisualSizes({ columns, contentMax = DEFAULT_CONTENT_MAX, mobileColumns = 1, breakpoints = DEFAULT_BREAKPOINTS, }) {
     if (!(columns >= 1)) {

package/dist/utils/visualSizes.js.map

@@ -1 +1 @@
-{"version":3,"file":"visualSizes.js","sourceRoot":"","sources":["../../src/utils/visualSizes.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"visualSizes.js","sourceRoot":"","sources":["../../src/utils/visualSizes.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,mBAAmB,GAAG,IAAI,CAAC;AAExC,MAAM,CAAC,MAAM,mBAAmB,GAA2C;IACzE,MAAM,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE;IAC3B,MAAM,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE;IAC5B,OAAO,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE;CAC9B,CAAC;AASF,MAAM,UAAU,oBAAoB,CAClC,YAAoB,EACpB,gBAAkD,EAClD,KAA8C;IAE9C,MAAM,cAAc,GAAG,KAAK,IAAI,mBAAmB,CAAC;IAEpD,MAAM,WAAW,GAAiB;QAChC,WAAW,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,GAAG,CAAC,IAAI;QAClD,WAAW,EAAE,gBAAgB;YAC3B,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE;gBACrD,MAAM,IAAI,GAAG,cAAc,CAAC,IAAI,CAAC,CAAC;gBAClC,IAAI,CAAC,IAAI,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;oBACjC,MAAM,IAAI,KAAK,CAAC,QAAQ,IAAI,mDAAmD,CAAC,CAAC;gBACnF,CAAC;gBACD,OAAO;oBACL,QAAQ,EAAE,IAAI,CAAC,UAAU;oBACzB,UAAU,EAAE,KAAK;oBACjB,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;oBAC3C,IAAI,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,CAAC,IAAI;iBACrC,CAAC;YACJ,CAAC,CAAC;YACJ,CAAC,CAAC,SAAS;KACd,CAAC;IAEF,OAAO,WAAW,CAAC;AACrB,CAAC;AAED,SAAS,iBAAiB,CACxB,WAAmD,EACnD,IAAY;IAEZ,MAAM,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC;IAC/B,IAAI,CAAC,IAAI,EAAE,CAAC;QACV,MAAM,IAAI,KAAK,CAAC,QAAQ,IAAI,6BAA6B,CAAC,CAAC;IAC7D,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC;AAED,iEAAiE;AACjE,MAAM,UAAU,eAAe;IAC7B,OAAO,oBAAoB,CAAC,CAAC,CAAC,CAAC;AACjC,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,eAAe,CAAC,EAC9B,OAAO,EACP,UAAU,GAAG,mBAAmB,EAChC,aAAa,GAAG,CAAC,EACjB,WAAW,GAAG,mBAAmB,GACV;IACvB,IAAI,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,EAAE,CAAC;QACpB,MAAM,IAAI,KAAK,CAAC,uCAAuC,CAAC,CAAC;IAC3D,CAAC;IACD,IAAI,CAAC,CAAC,aAAa,IAAI,CAAC,CAAC,EAAE,CAAC;QAC1B,MAAM,IAAI,KAAK,CAAC,6CAA6C,CAAC,CAAC;IACjE,CAAC;IACD,MAAM,MAAM,GAAG,iBAAiB,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;IACxD,MAAM,OAAO,GAAG,iBAAiB,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;IAC1D,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,OAAO,CAAC,CAAC;IAC/C,MAAM,QAAQ,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,OAAO,CAAC,IAAI,CAAC;IAClD,MAAM,gBAAgB,GAAG,CAAC,GAAG,OAAO,CAAC;IACrC,MAAM,iBAAiB,GAAG,KAAK,GAAG,OAAO,CAAC,UAAU,CAAC;IAErD,OAAO;QACL,WAAW,EAAE,aAAa,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,aAAa,CAAC,IAAI;QACnF,WAAW,EAAE;YACX;gBACE,QAAQ,EAAE,MAAM,CAAC,UAAU;gBAC3B,UAAU,EAAE,gBAAgB;gBAC5B,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,UAAU,GAAG,gBAAgB,CAAC;gBACxD,IAAI,EAAE,OAAO,QAAQ,KAAK,KAAK,KAAK;aACrC;YACD;gBACE,QAAQ,EAAE,OAAO,CAAC,UAAU;gBAC5B,UAAU,EAAE,iBAAiB;gBAC7B,MAAM,EAAE,KAAK;gBACb,IAAI,EAAE,GAAG,KAAK,IAAI;aACnB;SACF;KACF,CAAC;AACJ,CAAC"}

package/docs/llms.md

@@ -116,9 +116,13 @@ import { ResponsiveVisual, ContainedVisual } from '@se-studio/core-ui';
 <ResponsiveVisual visual={responsiveVisual} className="w-full" />
 ```
 
-Keep the default `next/image` loader. Set `images.minimumCacheTTL: 2_678_400` (31 days) in the app `next.config`. Raster CMS pictures already have Contentful Images API `w`/`fm`/`q` on `src` from `@se-studio/contentful-rest-api`.
+Keep the default `next/image` loader. Set `images.minimumCacheTTL: 2_678_400` (31 days) in the app `next.config`. Raster CMS pictures already have Contentful Images API `w`/`fm`/`q` on `src` from `@se-studio/contentful-rest-api`. GIF pictures use origin `fm=webp` and `PictureComponent` sets `unoptimized` so Next does not srcSet a GIF master.
 
-Pass `visualSizes` on every `Visual` / `ResponsiveVisual` with images. Use `cardVisualSizes({ columns, mobileColumns })` for card grids (match the real column counts), `heroVisualSizes()` for full-bleed (`defaultSize` `100vw`, no breakpoints), and `calculateVisualSizes(...)` for other vw ratios.
+Pass `visualSizes` on every `Visual` / `ResponsiveVisual` with images. Use `cardVisualSizes({ columns, mobileColumns })` for card grids (match the real column counts), `heroVisualSizes()` for full-bleed (`defaultSize` `100vw`, no breakpoints), and `calculateVisualSizes(...)` for other vw ratios. **Never `calculateVisualSizes(1)` for Explore-style / in-card GIFs** — that tells the optimizer the image is full viewport and inflates GIF/WebP requests. Use `cardVisualSizes` (or a matching column ratio) instead.
+
+Capped card `visualSizes` (`Npx` / `min(…, Npx)` from `cardVisualSizes`) make `PictureComponent` emit a short `/_next/image` srcset (384, 640, 828, 1080, plus one large ≤1504 already in the app `imageSizes`/`deviceSizes`). Heroes, missing `visualSizes`, vw-only sizes, and GIF `unoptimized` keep the full next/image ladder. Do not shrink global `deviceSizes` to trim cards.
+
+If a site already uses a custom `next/image` loader that rewrites `w`, **keep the existing `fm` query param**. Stripping `fm=webp` from GIF origins fetches the GIF master.
 
 ## TrackedLink and dest `asChild`
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@se-studio/core-ui",
-  "version": "1.30.1",
+  "version": "1.31.0",
   "description": "Shared React UI component library with Tailwind CSS v4 for SE Studio applications",
   "repository": {
     "type": "git",
@@ -76,7 +76,7 @@
     "@contentful/rich-text-react-renderer": "^16.2.2",
     "@contentful/rich-text-types": "^17.2.7",
     "@radix-ui/react-slot": "1.3.3",
-    "@se-studio/contentful-rest-api": "1.27.2",
+    "@se-studio/contentful-rest-api": "1.28.0",
     "@se-studio/core-data-types": "1.13.5",
     "@types/mustache": "4.2.6",
     "@vimeo/player": "^2.30.4",