@wocart/storefront 1.19.0 → 1.20.0

package/dist/utils/image.js

@@ -93,6 +93,57 @@ export function mediaUrl(key, mediaDomain) {
     const origin = mediaOriginOf(mediaDomain);
     return origin === null ? null : `${origin}/${segments.map(encodeURIComponent).join("/")}`;
 }
+/**
+ * The same photo at several widths, with width descriptors
+ * (`… 360w, … 720w`), for an `<img>` whose `sizes` says how wide it shows —
+ * a phone then downloads a phone-sized file. Each size is converted to the
+ * best format the browser takes (`format=auto`).
+ *
+ * @returns `null` when there is no media domain, the URL is not on it, or no
+ * width is a positive whole number.
+ */
+export function mediaImageSrcset(src, widths, options = {}) {
+    const sizes = [...new Set(widths.filter((width) => Number.isInteger(width) && width > 0))].sort((a, b) => a - b);
+    if (sizes.length === 0)
+        return null;
+    const { ratio, quality, mediaDomain } = options;
+    const cropped = ratio !== undefined && Number.isFinite(ratio) && ratio > 0;
+    const encoding = quality === undefined ? {} : { quality };
+    const entries = [];
+    for (const width of sizes) {
+        const url = mediaImageUrl(src, cropped
+            ? { width, height: Math.max(1, Math.round(width * ratio)), fit: "cover", format: "auto", ...encoding }
+            : { width, fit: "scale-down", format: "auto", ...encoding }, mediaDomain);
+        if (url === null)
+            return null;
+        entries.push(`${url} ${width}w`);
+    }
+    return entries.join(", ");
+}
+/**
+ * A picked image as a theme draws it: its URL on the store's media domain,
+ * its alt text (empty when the merchant wrote none), its size, and its focal
+ * point as `object-position`, so a cropped photo keeps what matters in view.
+ *
+ * @returns `null` when no image is picked, the key cannot name an object, or
+ * the store has no media domain.
+ */
+export function pictureOf(image, mediaDomain) {
+    if (!image)
+        return null;
+    const src = mediaUrl(image.key, mediaDomain);
+    if (src === null)
+        return null;
+    const percent = (value) => `${Math.round(Math.min(1, Math.max(0, value)) * 100)}%`;
+    const focal = image.focal;
+    return {
+        src,
+        alt: image.alt ?? "",
+        width: image.width,
+        height: image.height,
+        position: focal && Number.isFinite(focal.x) && Number.isFinite(focal.y) ? `${percent(focal.x)} ${percent(focal.y)}` : undefined,
+    };
+}
 /**
  * Predefined image sizes for common use cases
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wocart/storefront",
-  "version": "1.19.0",
+  "version": "1.20.0",
   "description": "Typed, validated SDK for Wocart cash-on-delivery storefronts: catalog reads, basket, checkout, OTP and order tracking, with Astro adapters.",
   "keywords": [
     "wocart",