@se-studio/core-ui 1.30.2 → 1.31.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @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

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;AA+BlE,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,+BAoBzE;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) {
@@ -28,11 +29,36 @@ function isGifPicture(image) {
     const path = image.src.split('?')[0]?.toLowerCase() ?? '';
     return path.endsWith('.gif');
 }
-function PictureComponent({ image, style, visualSizes, placeholder, blurDataURL, ...rest }) {
+function PictureComponent({ image, style, visualSizes, placeholder, blurDataURL, fetchPriority, priority, preload, ...rest }) {
     const cropProperties = calculateCropDetails(image);
     const useImageBlur = Boolean(image.blurDataURL) && placeholder === undefined && blurDataURL === undefined;
     const gifUnoptimized = isGifPicture(image);
-    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, unoptimized: gifUnoptimized || undefined }));
+    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,YAAY,CAAC,KAAe;IACnC,MAAM,IAAI,GAAG,KAAK,CAAC,QAAQ,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;IACjD,IAAI,IAAI,KAAK,WAAW,EAAE,CAAC;QACzB,OAAO,IAAI,CAAC;IACd,CAAC;IACD,MAAM,IAAI,GAAG,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;IAC1D,OAAO,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;AAC/B,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;IACvF,MAAM,cAAc,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IAE3C,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,EACR,WAAW,EAAE,cAAc,IAAI,SAAS,GACxC,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/docs/llms.md

@@ -120,6 +120,8 @@ Keep the default `next/image` loader. Set `images.minimumCacheTTL: 2_678_400` (3
 
 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.2",
+  "version": "1.31.0",
   "description": "Shared React UI component library with Tailwind CSS v4 for SE Studio applications",
   "repository": {
     "type": "git",