@depict-ai/ui 4.1.2 → 4.1.4

package/ES10/index.cjs

@@ -98,7 +98,7 @@ $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $33eed84f447a
 $parcel$export(module.exports, "version", () => $aa1938dec50d6c12$export$83d89fbfd8236492);
 $parcel$export(module.exports, "SearchField", () => $98aef9965764903d$export$316f6f283ae64765);
 /*! Depict.ai search and product listing SDK */
-const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.1.2";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.1.4";
 const $cfcd56242923775d$export$3064e1e8c6513da3 = new Set();
 let $cfcd56242923775d$var$has_ran = false;
 function $cfcd56242923775d$export$5162a71f252e6122() {
@@ -2645,8 +2645,12 @@ const $858fdcf73148519f$export$f8945274f08a3105 = /*@__PURE__*/Symbol("listingCo
 const $858fdcf73148519f$export$6066eb417ed2e9f7 = /*@__PURE__*/Symbol("listingContextAspectRatios");
 function $858fdcf73148519f$export$6e5611bc7e57e477(props) {
   const src_options = $52FdA$solidjs.createMemo(() => {
-    const fallback_src = $858fdcf73148519f$var$generateImageUrl(props.src, 400);
-    const srcset = $858fdcf73148519f$var$make_srcset(props.src, props.resolutions || [64, 128, 256, 300, 400, 512, 640, 768, 1024, 1280, 1536, 2048, 2560, 3072, 3584, 4096]);
+    const {
+      src: src,
+      customGenerateImageUrl_: customGenerateImageUrl_
+    } = props;
+    const fallback_src = (customGenerateImageUrl_ || $858fdcf73148519f$export$1d6267828870adda)(src, 400);
+    const srcset = $858fdcf73148519f$var$make_srcset(props.src, props.resolutions || [64, 128, 256, 300, 400, 512, 640, 768, 1024, 1280, 1536, 2048, 2560, 3072, 3584, 4096], customGenerateImageUrl_);
     // The order here *might* matter - I've seen mobile safari always start with loading the 400px version when it was reversed
     return {
       srcset: srcset,
@@ -2786,10 +2790,10 @@ function $858fdcf73148519f$export$6e5611bc7e57e477(props) {
     children: img
   });
 }
-function $858fdcf73148519f$var$make_srcset(url, resolutions) {
-  return resolutions.map(width => "".concat($858fdcf73148519f$var$generateImageUrl(url, width), " ").concat(width, "w")).join(", ");
+function $858fdcf73148519f$var$make_srcset(url, resolutions, customGenerateImageUrl_) {
+  return resolutions.map(width => "".concat((customGenerateImageUrl_ || $858fdcf73148519f$export$1d6267828870adda)(url, width), " ").concat(width, "w")).join(", ");
 }
-function $858fdcf73148519f$var$generateImageUrl(url, width) {
+function $858fdcf73148519f$export$1d6267828870adda(url, width) {
   // Even just creating one `URL` object per image src and then setting the search parameter is quite slow (0.25ms to set the width param)
   // We're making the assumptions that the url has already at least one query parameter and that the image resizing service will choose the last one out of a duplicate width parameter (shopify's does)
   // That way we can just to string concatenation which is insanely fast
@@ -2852,14 +2856,20 @@ function $28535bb7671c63d1$export$e4b984597b71e989(props) {
   return container;
 }
 function $9e470232a6b789a3$export$9d4a4b669b1929ab(props) {
-  const src = $52FdA$solidjs.createMemo(() => {
-    const urlObject = new URL("https://img.depict.ai/ResizeImage/".concat(props.merchant_, "?format=webp"));
-    urlObject.searchParams.set("url", props.src);
-    return urlObject.href;
-  });
   return $52FdA$solidjsweb.createComponent((0, $28535bb7671c63d1$export$e4b984597b71e989), $52FdA$solidjsweb.mergeProps(props, {
-    get src() {
-      return src();
+    get imgProps() {
+      return {
+        ...props.imgProps,
+        customGenerateImageUrl_: (url, width // Apparently don't have to encode url for CF's service
+        ) => {
+          if (url.startsWith("https://cdn.shopify.com"))
+            // The shopify image resizing CDN blocks Cloudflare's image resizer. It's possible that we can't detect shopify image URLs sometimes because they go to the merchant's domain,
+            // but it seems like the URLs returned by the Depict API always goes to the cdn.shopify.com version of an image, so this simple workaround works.
+            return $858fdcf73148519f$export$1d6267828870adda(url, width);
+          // Use cloudflare image resizer instead of img.depict.ai because it's a lot faster (and also auto-chooses other formats if webp is not supported)
+          return "https://app.depict.ai/cdn-cgi/image/width=".concat(width, ",format=auto/").concat(url);
+        }
+      };
     }
   }));
 }

package/ES10/index.d.ts

@@ -10,7 +10,7 @@ import { ProductListingRequestV3 } from "@depict-ai/types/api/ProductListingRequ
 import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { SearchFilter as _SearchFilter3 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.1.2";
+export const version = "4.1.4";
 export const prefixes_to_preserve_in_history_dot_state: Set<string>;
 /**
  * Prevent, usually SPAs, from deleting our stuff from history.state when they call history.pushState with a new object they have constructed. This will only run once no matter how often it's called.
@@ -434,10 +434,10 @@ export function makeSizeAccessor(whatToWatch: HTMLElement): Accessor<number>;
 export function ShopifyResponsiveImg(props: {
   resolutions?: number[];
   size: Accessor<number>;
-} & Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, "srcset" | "src" | "sizes" | "loading"> & {
   src: string;
   loading?: "eager" | "lazy" | "force-lazy";
-}): JSX.Element;
+  customGenerateImageUrl_?: (url: string, width: number) => string;
+} & Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, "srcset" | "src" | "sizes" | "loading">): JSX.Element;
 type ImagePlaceholderBaseOptions = {
   style?: JSX.CSSProperties;
   class?: string;
@@ -1246,7 +1246,7 @@ export function CategoryPage<OriginalDisplay extends Display, OutputDisplay exte
   on_listing_query_change?: (new_listing_query?: ListingQuery | undefined, old_listing_query?: ListingQuery | undefined) => void;
   content_blocks_by_row?: ContentBlocksByRow;
   layout?: PossibleLayout;
-}): import("@depict-ai/utilishared/latest").Node_Array;
+}): import("@depict-ai/utilishared").Node_Array;
 export function BreadCrumbs<T extends Display>({
   depict_category
 }: {
@@ -1386,7 +1386,7 @@ type OpenModalParams<OriginalDisplay extends Display, OutputDisplay extends Mode
  * Open the modal with support for alignment.
  * @returns {void}
  */
-export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends ModernDisplay>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
+export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends unknown>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
 export function open_search_with_shift_slash(open_search: VoidFunction): () => void;
 export interface PageReplacer {
   readonly render_: () => Node_Array;

package/ES10/index.js

@@ -10,7 +10,7 @@ import { createStore as $8tj43$createStore, reconcile as $8tj43$reconcile } from
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../multi_import_deduplicator.mjs";
 register_es_version("ui", "ES10");
-const $8db9a15135765c11$export$83d89fbfd8236492 = "4.1.2";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "4.1.4";
 const $68e6625c8d51f847$export$3064e1e8c6513da3 = new Set();
 let $68e6625c8d51f847$var$has_ran = false;
 function $68e6625c8d51f847$export$5162a71f252e6122() {
@@ -2557,8 +2557,12 @@ const $56047603f9d212b6$export$f8945274f08a3105 = /*@__PURE__*/Symbol("listingCo
 const $56047603f9d212b6$export$6066eb417ed2e9f7 = /*@__PURE__*/Symbol("listingContextAspectRatios");
 function $56047603f9d212b6$export$6e5611bc7e57e477(props) {
   const src_options = $8tj43$createMemo(() => {
-    const fallback_src = $56047603f9d212b6$var$generateImageUrl(props.src, 400);
-    const srcset = $56047603f9d212b6$var$make_srcset(props.src, props.resolutions || [64, 128, 256, 300, 400, 512, 640, 768, 1024, 1280, 1536, 2048, 2560, 3072, 3584, 4096]);
+    const {
+      src: src,
+      customGenerateImageUrl_: customGenerateImageUrl_
+    } = props;
+    const fallback_src = (customGenerateImageUrl_ || $56047603f9d212b6$export$1d6267828870adda)(src, 400);
+    const srcset = $56047603f9d212b6$var$make_srcset(props.src, props.resolutions || [64, 128, 256, 300, 400, 512, 640, 768, 1024, 1280, 1536, 2048, 2560, 3072, 3584, 4096], customGenerateImageUrl_);
     // The order here *might* matter - I've seen mobile safari always start with loading the 400px version when it was reversed
     return {
       srcset: srcset,
@@ -2698,10 +2702,10 @@ function $56047603f9d212b6$export$6e5611bc7e57e477(props) {
     children: img
   });
 }
-function $56047603f9d212b6$var$make_srcset(url, resolutions) {
-  return resolutions.map(width => "".concat($56047603f9d212b6$var$generateImageUrl(url, width), " ").concat(width, "w")).join(", ");
+function $56047603f9d212b6$var$make_srcset(url, resolutions, customGenerateImageUrl_) {
+  return resolutions.map(width => "".concat((customGenerateImageUrl_ || $56047603f9d212b6$export$1d6267828870adda)(url, width), " ").concat(width, "w")).join(", ");
 }
-function $56047603f9d212b6$var$generateImageUrl(url, width) {
+function $56047603f9d212b6$export$1d6267828870adda(url, width) {
   // Even just creating one `URL` object per image src and then setting the search parameter is quite slow (0.25ms to set the width param)
   // We're making the assumptions that the url has already at least one query parameter and that the image resizing service will choose the last one out of a duplicate width parameter (shopify's does)
   // That way we can just to string concatenation which is insanely fast
@@ -2764,14 +2768,20 @@ function $4df489344a0f97c7$export$e4b984597b71e989(props) {
   return container;
 }
 function $7fbaab3d3dafb4f5$export$9d4a4b669b1929ab(props) {
-  const src = $8tj43$createMemo(() => {
-    const urlObject = new URL("https://img.depict.ai/ResizeImage/".concat(props.merchant_, "?format=webp"));
-    urlObject.searchParams.set("url", props.src);
-    return urlObject.href;
-  });
   return $8tj43$createComponent((0, $4df489344a0f97c7$export$e4b984597b71e989), $8tj43$mergeProps(props, {
-    get src() {
-      return src();
+    get imgProps() {
+      return {
+        ...props.imgProps,
+        customGenerateImageUrl_: (url, width // Apparently don't have to encode url for CF's service
+        ) => {
+          if (url.startsWith("https://cdn.shopify.com"))
+            // The shopify image resizing CDN blocks Cloudflare's image resizer. It's possible that we can't detect shopify image URLs sometimes because they go to the merchant's domain,
+            // but it seems like the URLs returned by the Depict API always goes to the cdn.shopify.com version of an image, so this simple workaround works.
+            return $56047603f9d212b6$export$1d6267828870adda(url, width);
+          // Use cloudflare image resizer instead of img.depict.ai because it's a lot faster (and also auto-chooses other formats if webp is not supported)
+          return "https://app.depict.ai/cdn-cgi/image/width=".concat(width, ",format=auto/").concat(url);
+        }
+      };
     }
   }));
 }

package/latest/index.cjs

@@ -92,7 +92,7 @@ $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $a3280f0aad99
 $parcel$export(module.exports, "version", () => $b757f75811f3261f$export$83d89fbfd8236492);
 $parcel$export(module.exports, "SearchField", () => $c0a0659cf97e8eb2$export$316f6f283ae64765);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "4.1.2";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.1.4";
 const $d84fe647b84b5dc5$export$3064e1e8c6513da3 = new Set();
 let $d84fe647b84b5dc5$var$has_ran = false;
 function $d84fe647b84b5dc5$export$5162a71f252e6122() {
@@ -2539,8 +2539,12 @@ const $19950faaac026e09$export$f8945274f08a3105 = /*@__PURE__*/Symbol("listingCo
 const $19950faaac026e09$export$6066eb417ed2e9f7 = /*@__PURE__*/Symbol("listingContextAspectRatios");
 function $19950faaac026e09$export$6e5611bc7e57e477(props) {
   const src_options = $gVhhF$solidjs.createMemo(() => {
-    const fallback_src = $19950faaac026e09$var$generateImageUrl(props.src, 400);
-    const srcset = $19950faaac026e09$var$make_srcset(props.src, props.resolutions || [64, 128, 256, 300, 400, 512, 640, 768, 1024, 1280, 1536, 2048, 2560, 3072, 3584, 4096]);
+    const {
+      src: src,
+      customGenerateImageUrl_: customGenerateImageUrl_
+    } = props;
+    const fallback_src = (customGenerateImageUrl_ || $19950faaac026e09$export$1d6267828870adda)(src, 400);
+    const srcset = $19950faaac026e09$var$make_srcset(props.src, props.resolutions || [64, 128, 256, 300, 400, 512, 640, 768, 1024, 1280, 1536, 2048, 2560, 3072, 3584, 4096], customGenerateImageUrl_);
     // The order here *might* matter - I've seen mobile safari always start with loading the 400px version when it was reversed
     return {
       srcset: srcset,
@@ -2677,10 +2681,10 @@ function $19950faaac026e09$export$6e5611bc7e57e477(props) {
     children: img
   });
 }
-function $19950faaac026e09$var$make_srcset(url, resolutions) {
-  return resolutions.map(width => `${$19950faaac026e09$var$generateImageUrl(url, width)} ${width}w`).join(", ");
+function $19950faaac026e09$var$make_srcset(url, resolutions, customGenerateImageUrl_) {
+  return resolutions.map(width => `${(customGenerateImageUrl_ || $19950faaac026e09$export$1d6267828870adda)(url, width)} ${width}w`).join(", ");
 }
-function $19950faaac026e09$var$generateImageUrl(url, width) {
+function $19950faaac026e09$export$1d6267828870adda(url, width) {
   // Even just creating one `URL` object per image src and then setting the search parameter is quite slow (0.25ms to set the width param)
   // We're making the assumptions that the url has already at least one query parameter and that the image resizing service will choose the last one out of a duplicate width parameter (shopify's does)
   // That way we can just to string concatenation which is insanely fast
@@ -2741,14 +2745,20 @@ function $a33065cfed827fc0$export$e4b984597b71e989(props) {
   return container;
 }
 function $e8327f98c8ee28d7$export$9d4a4b669b1929ab(props) {
-  const src = $gVhhF$solidjs.createMemo(() => {
-    const urlObject = new URL(`https://img.depict.ai/ResizeImage/${props.merchant_}?format=webp`);
-    urlObject.searchParams.set("url", props.src);
-    return urlObject.href;
-  });
   return $gVhhF$solidjsweb.createComponent((0, $a33065cfed827fc0$export$e4b984597b71e989), $gVhhF$solidjsweb.mergeProps(props, {
-    get src() {
-      return src();
+    get imgProps() {
+      return {
+        ...props.imgProps,
+        customGenerateImageUrl_: (url, width // Apparently don't have to encode url for CF's service
+        ) => {
+          if (url.startsWith("https://cdn.shopify.com"))
+            // The shopify image resizing CDN blocks Cloudflare's image resizer. It's possible that we can't detect shopify image URLs sometimes because they go to the merchant's domain,
+            // but it seems like the URLs returned by the Depict API always goes to the cdn.shopify.com version of an image, so this simple workaround works.
+            return $19950faaac026e09$export$1d6267828870adda(url, width);
+          // Use cloudflare image resizer instead of img.depict.ai because it's a lot faster (and also auto-chooses other formats if webp is not supported)
+          return `https://app.depict.ai/cdn-cgi/image/width=${width},format=auto/${url}`;
+        }
+      };
     }
   }));
 }

package/latest/index.d.ts

@@ -10,7 +10,7 @@ import { ProductListingRequestV3 } from "@depict-ai/types/api/ProductListingRequ
 import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { SearchFilter as _SearchFilter3 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.1.2";
+export const version = "4.1.4";
 export const prefixes_to_preserve_in_history_dot_state: Set<string>;
 /**
  * Prevent, usually SPAs, from deleting our stuff from history.state when they call history.pushState with a new object they have constructed. This will only run once no matter how often it's called.
@@ -434,10 +434,10 @@ export function makeSizeAccessor(whatToWatch: HTMLElement): Accessor<number>;
 export function ShopifyResponsiveImg(props: {
   resolutions?: number[];
   size: Accessor<number>;
-} & Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, "srcset" | "src" | "sizes" | "loading"> & {
   src: string;
   loading?: "eager" | "lazy" | "force-lazy";
-}): JSX.Element;
+  customGenerateImageUrl_?: (url: string, width: number) => string;
+} & Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, "srcset" | "src" | "sizes" | "loading">): JSX.Element;
 type ImagePlaceholderBaseOptions = {
   style?: JSX.CSSProperties;
   class?: string;
@@ -1246,7 +1246,7 @@ export function CategoryPage<OriginalDisplay extends Display, OutputDisplay exte
   on_listing_query_change?: (new_listing_query?: ListingQuery | undefined, old_listing_query?: ListingQuery | undefined) => void;
   content_blocks_by_row?: ContentBlocksByRow;
   layout?: PossibleLayout;
-}): import("@depict-ai/utilishared/latest").Node_Array;
+}): import("@depict-ai/utilishared").Node_Array;
 export function BreadCrumbs<T extends Display>({
   depict_category
 }: {
@@ -1386,7 +1386,7 @@ type OpenModalParams<OriginalDisplay extends Display, OutputDisplay extends Mode
  * Open the modal with support for alignment.
  * @returns {void}
  */
-export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends ModernDisplay>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
+export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends unknown>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
 export function open_search_with_shift_slash(open_search: VoidFunction): () => void;
 export interface PageReplacer {
   readonly render_: () => Node_Array;

package/latest/index.js

@@ -7,7 +7,7 @@ import { createStore as $9HbP8$createStore, reconcile as $9HbP8$reconcile } from
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../multi_import_deduplicator.mjs";
 register_es_version("ui", "latest");
-const $ec291e0010116877$export$83d89fbfd8236492 = "4.1.2";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.1.4";
 const $90980bd87c9960f9$export$3064e1e8c6513da3 = new Set();
 let $90980bd87c9960f9$var$has_ran = false;
 function $90980bd87c9960f9$export$5162a71f252e6122() {
@@ -2454,8 +2454,12 @@ const $e8ffe11ed01df0fe$export$f8945274f08a3105 = /*@__PURE__*/Symbol("listingCo
 const $e8ffe11ed01df0fe$export$6066eb417ed2e9f7 = /*@__PURE__*/Symbol("listingContextAspectRatios");
 function $e8ffe11ed01df0fe$export$6e5611bc7e57e477(props) {
   const src_options = $9HbP8$createMemo(() => {
-    const fallback_src = $e8ffe11ed01df0fe$var$generateImageUrl(props.src, 400);
-    const srcset = $e8ffe11ed01df0fe$var$make_srcset(props.src, props.resolutions || [64, 128, 256, 300, 400, 512, 640, 768, 1024, 1280, 1536, 2048, 2560, 3072, 3584, 4096]);
+    const {
+      src: src,
+      customGenerateImageUrl_: customGenerateImageUrl_
+    } = props;
+    const fallback_src = (customGenerateImageUrl_ || $e8ffe11ed01df0fe$export$1d6267828870adda)(src, 400);
+    const srcset = $e8ffe11ed01df0fe$var$make_srcset(props.src, props.resolutions || [64, 128, 256, 300, 400, 512, 640, 768, 1024, 1280, 1536, 2048, 2560, 3072, 3584, 4096], customGenerateImageUrl_);
     // The order here *might* matter - I've seen mobile safari always start with loading the 400px version when it was reversed
     return {
       srcset: srcset,
@@ -2592,10 +2596,10 @@ function $e8ffe11ed01df0fe$export$6e5611bc7e57e477(props) {
     children: img
   });
 }
-function $e8ffe11ed01df0fe$var$make_srcset(url, resolutions) {
-  return resolutions.map(width => `${$e8ffe11ed01df0fe$var$generateImageUrl(url, width)} ${width}w`).join(", ");
+function $e8ffe11ed01df0fe$var$make_srcset(url, resolutions, customGenerateImageUrl_) {
+  return resolutions.map(width => `${(customGenerateImageUrl_ || $e8ffe11ed01df0fe$export$1d6267828870adda)(url, width)} ${width}w`).join(", ");
 }
-function $e8ffe11ed01df0fe$var$generateImageUrl(url, width) {
+function $e8ffe11ed01df0fe$export$1d6267828870adda(url, width) {
   // Even just creating one `URL` object per image src and then setting the search parameter is quite slow (0.25ms to set the width param)
   // We're making the assumptions that the url has already at least one query parameter and that the image resizing service will choose the last one out of a duplicate width parameter (shopify's does)
   // That way we can just to string concatenation which is insanely fast
@@ -2656,14 +2660,20 @@ function $660070e2a394b3c3$export$e4b984597b71e989(props) {
   return container;
 }
 function $4f16612bea257571$export$9d4a4b669b1929ab(props) {
-  const src = $9HbP8$createMemo(() => {
-    const urlObject = new URL(`https://img.depict.ai/ResizeImage/${props.merchant_}?format=webp`);
-    urlObject.searchParams.set("url", props.src);
-    return urlObject.href;
-  });
   return $9HbP8$createComponent((0, $660070e2a394b3c3$export$e4b984597b71e989), $9HbP8$mergeProps(props, {
-    get src() {
-      return src();
+    get imgProps() {
+      return {
+        ...props.imgProps,
+        customGenerateImageUrl_: (url, width // Apparently don't have to encode url for CF's service
+        ) => {
+          if (url.startsWith("https://cdn.shopify.com"))
+            // The shopify image resizing CDN blocks Cloudflare's image resizer. It's possible that we can't detect shopify image URLs sometimes because they go to the merchant's domain,
+            // but it seems like the URLs returned by the Depict API always goes to the cdn.shopify.com version of an image, so this simple workaround works.
+            return $e8ffe11ed01df0fe$export$1d6267828870adda(url, width);
+          // Use cloudflare image resizer instead of img.depict.ai because it's a lot faster (and also auto-chooses other formats if webp is not supported)
+          return `https://app.depict.ai/cdn-cgi/image/width=${width},format=auto/${url}`;
+        }
+      };
     }
   }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/ui",
-  "version": "4.1.2",
+  "version": "4.1.4",
   "description": "Base package containing the actual UI of Depict UI along with translations, with a not-simplified API. We recommend using @depict-ai/js-ui or @depict-ai/react-ui instead.",
   "packageManager": "yarn@3.2.2",
   "sass": "styles.scss",

package/server/ES10/index.cjs

@@ -98,7 +98,7 @@ $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $33eed84f447a
 $parcel$export(module.exports, "version", () => $aa1938dec50d6c12$export$83d89fbfd8236492);
 $parcel$export(module.exports, "SearchField", () => $98aef9965764903d$export$316f6f283ae64765);
 /*! Depict.ai search and product listing SDK */
-const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.1.2";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.1.4";
 const $cfcd56242923775d$export$3064e1e8c6513da3 = new Set();
 let $cfcd56242923775d$var$has_ran = false;
 function $cfcd56242923775d$export$5162a71f252e6122() {
@@ -2075,8 +2075,12 @@ const $858fdcf73148519f$export$f8945274f08a3105 = /*@__PURE__*/Symbol("listingCo
 const $858fdcf73148519f$export$6066eb417ed2e9f7 = /*@__PURE__*/Symbol("listingContextAspectRatios");
 function $858fdcf73148519f$export$6e5611bc7e57e477(props) {
   const src_options = $3hooq$solidjs.createMemo(() => {
-    const fallback_src = $858fdcf73148519f$var$generateImageUrl(props.src, 400);
-    const srcset = $858fdcf73148519f$var$make_srcset(props.src, props.resolutions || [64, 128, 256, 300, 400, 512, 640, 768, 1024, 1280, 1536, 2048, 2560, 3072, 3584, 4096]);
+    const {
+      src: src,
+      customGenerateImageUrl_: customGenerateImageUrl_
+    } = props;
+    const fallback_src = (customGenerateImageUrl_ || $858fdcf73148519f$export$1d6267828870adda)(src, 400);
+    const srcset = $858fdcf73148519f$var$make_srcset(props.src, props.resolutions || [64, 128, 256, 300, 400, 512, 640, 768, 1024, 1280, 1536, 2048, 2560, 3072, 3584, 4096], customGenerateImageUrl_);
     // The order here *might* matter - I've seen mobile safari always start with loading the 400px version when it was reversed
     return {
       srcset: srcset,
@@ -2216,10 +2220,10 @@ function $858fdcf73148519f$export$6e5611bc7e57e477(props) {
     children: img
   });
 }
-function $858fdcf73148519f$var$make_srcset(url, resolutions) {
-  return resolutions.map(width => "".concat($858fdcf73148519f$var$generateImageUrl(url, width), " ").concat(width, "w")).join(", ");
+function $858fdcf73148519f$var$make_srcset(url, resolutions, customGenerateImageUrl_) {
+  return resolutions.map(width => "".concat((customGenerateImageUrl_ || $858fdcf73148519f$export$1d6267828870adda)(url, width), " ").concat(width, "w")).join(", ");
 }
-function $858fdcf73148519f$var$generateImageUrl(url, width) {
+function $858fdcf73148519f$export$1d6267828870adda(url, width) {
   // Even just creating one `URL` object per image src and then setting the search parameter is quite slow (0.25ms to set the width param)
   // We're making the assumptions that the url has already at least one query parameter and that the image resizing service will choose the last one out of a duplicate width parameter (shopify's does)
   // That way we can just to string concatenation which is insanely fast
@@ -2282,14 +2286,20 @@ function $28535bb7671c63d1$export$e4b984597b71e989(props) {
   return container;
 }
 function $9e470232a6b789a3$export$9d4a4b669b1929ab(props) {
-  const src = $3hooq$solidjs.createMemo(() => {
-    const urlObject = new URL("https://img.depict.ai/ResizeImage/".concat(props.merchant_, "?format=webp"));
-    urlObject.searchParams.set("url", props.src);
-    return urlObject.href;
-  });
   return $3hooq$solidjsweb.createComponent((0, $28535bb7671c63d1$export$e4b984597b71e989), $3hooq$solidjsweb.mergeProps(props, {
-    get src() {
-      return src();
+    get imgProps() {
+      return {
+        ...props.imgProps,
+        customGenerateImageUrl_: (url, width // Apparently don't have to encode url for CF's service
+        ) => {
+          if (url.startsWith("https://cdn.shopify.com"))
+            // The shopify image resizing CDN blocks Cloudflare's image resizer. It's possible that we can't detect shopify image URLs sometimes because they go to the merchant's domain,
+            // but it seems like the URLs returned by the Depict API always goes to the cdn.shopify.com version of an image, so this simple workaround works.
+            return $858fdcf73148519f$export$1d6267828870adda(url, width);
+          // Use cloudflare image resizer instead of img.depict.ai because it's a lot faster (and also auto-chooses other formats if webp is not supported)
+          return "https://app.depict.ai/cdn-cgi/image/width=".concat(width, ",format=auto/").concat(url);
+        }
+      };
     }
   }));
 }

package/server/ES10/index.d.ts

@@ -10,7 +10,7 @@ import { ProductListingRequestV3 } from "@depict-ai/types/api/ProductListingRequ
 import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { SearchFilter as _SearchFilter3 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.1.2";
+export const version = "4.1.4";
 export const prefixes_to_preserve_in_history_dot_state: Set<string>;
 /**
  * Prevent, usually SPAs, from deleting our stuff from history.state when they call history.pushState with a new object they have constructed. This will only run once no matter how often it's called.
@@ -434,10 +434,10 @@ export function makeSizeAccessor(whatToWatch: HTMLElement): Accessor<number>;
 export function ShopifyResponsiveImg(props: {
   resolutions?: number[];
   size: Accessor<number>;
-} & Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, "srcset" | "src" | "sizes" | "loading"> & {
   src: string;
   loading?: "eager" | "lazy" | "force-lazy";
-}): JSX.Element;
+  customGenerateImageUrl_?: (url: string, width: number) => string;
+} & Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, "srcset" | "src" | "sizes" | "loading">): JSX.Element;
 type ImagePlaceholderBaseOptions = {
   style?: JSX.CSSProperties;
   class?: string;
@@ -1246,7 +1246,7 @@ export function CategoryPage<OriginalDisplay extends Display, OutputDisplay exte
   on_listing_query_change?: (new_listing_query?: ListingQuery | undefined, old_listing_query?: ListingQuery | undefined) => void;
   content_blocks_by_row?: ContentBlocksByRow;
   layout?: PossibleLayout;
-}): import("@depict-ai/utilishared/latest").Node_Array;
+}): import("@depict-ai/utilishared").Node_Array;
 export function BreadCrumbs<T extends Display>({
   depict_category
 }: {
@@ -1386,7 +1386,7 @@ type OpenModalParams<OriginalDisplay extends Display, OutputDisplay extends Mode
  * Open the modal with support for alignment.
  * @returns {void}
  */
-export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends ModernDisplay>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
+export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends unknown>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
 export function open_search_with_shift_slash(open_search: VoidFunction): () => void;
 export interface PageReplacer {
   readonly render_: () => Node_Array;

package/server/ES10/index.js

@@ -10,7 +10,7 @@ import { createStore as $b8hua$createStore, reconcile as $b8hua$reconcile } from
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../../multi_import_deduplicator.mjs";
 register_es_version("ui", "ES10");
-const $8db9a15135765c11$export$83d89fbfd8236492 = "4.1.2";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "4.1.4";
 const $68e6625c8d51f847$export$3064e1e8c6513da3 = new Set();
 let $68e6625c8d51f847$var$has_ran = false;
 function $68e6625c8d51f847$export$5162a71f252e6122() {
@@ -1987,8 +1987,12 @@ const $56047603f9d212b6$export$f8945274f08a3105 = /*@__PURE__*/Symbol("listingCo
 const $56047603f9d212b6$export$6066eb417ed2e9f7 = /*@__PURE__*/Symbol("listingContextAspectRatios");
 function $56047603f9d212b6$export$6e5611bc7e57e477(props) {
   const src_options = $b8hua$createMemo(() => {
-    const fallback_src = $56047603f9d212b6$var$generateImageUrl(props.src, 400);
-    const srcset = $56047603f9d212b6$var$make_srcset(props.src, props.resolutions || [64, 128, 256, 300, 400, 512, 640, 768, 1024, 1280, 1536, 2048, 2560, 3072, 3584, 4096]);
+    const {
+      src: src,
+      customGenerateImageUrl_: customGenerateImageUrl_
+    } = props;
+    const fallback_src = (customGenerateImageUrl_ || $56047603f9d212b6$export$1d6267828870adda)(src, 400);
+    const srcset = $56047603f9d212b6$var$make_srcset(props.src, props.resolutions || [64, 128, 256, 300, 400, 512, 640, 768, 1024, 1280, 1536, 2048, 2560, 3072, 3584, 4096], customGenerateImageUrl_);
     // The order here *might* matter - I've seen mobile safari always start with loading the 400px version when it was reversed
     return {
       srcset: srcset,
@@ -2128,10 +2132,10 @@ function $56047603f9d212b6$export$6e5611bc7e57e477(props) {
     children: img
   });
 }
-function $56047603f9d212b6$var$make_srcset(url, resolutions) {
-  return resolutions.map(width => "".concat($56047603f9d212b6$var$generateImageUrl(url, width), " ").concat(width, "w")).join(", ");
+function $56047603f9d212b6$var$make_srcset(url, resolutions, customGenerateImageUrl_) {
+  return resolutions.map(width => "".concat((customGenerateImageUrl_ || $56047603f9d212b6$export$1d6267828870adda)(url, width), " ").concat(width, "w")).join(", ");
 }
-function $56047603f9d212b6$var$generateImageUrl(url, width) {
+function $56047603f9d212b6$export$1d6267828870adda(url, width) {
   // Even just creating one `URL` object per image src and then setting the search parameter is quite slow (0.25ms to set the width param)
   // We're making the assumptions that the url has already at least one query parameter and that the image resizing service will choose the last one out of a duplicate width parameter (shopify's does)
   // That way we can just to string concatenation which is insanely fast
@@ -2194,14 +2198,20 @@ function $4df489344a0f97c7$export$e4b984597b71e989(props) {
   return container;
 }
 function $7fbaab3d3dafb4f5$export$9d4a4b669b1929ab(props) {
-  const src = $b8hua$createMemo(() => {
-    const urlObject = new URL("https://img.depict.ai/ResizeImage/".concat(props.merchant_, "?format=webp"));
-    urlObject.searchParams.set("url", props.src);
-    return urlObject.href;
-  });
   return $b8hua$createComponent((0, $4df489344a0f97c7$export$e4b984597b71e989), $b8hua$mergeProps(props, {
-    get src() {
-      return src();
+    get imgProps() {
+      return {
+        ...props.imgProps,
+        customGenerateImageUrl_: (url, width // Apparently don't have to encode url for CF's service
+        ) => {
+          if (url.startsWith("https://cdn.shopify.com"))
+            // The shopify image resizing CDN blocks Cloudflare's image resizer. It's possible that we can't detect shopify image URLs sometimes because they go to the merchant's domain,
+            // but it seems like the URLs returned by the Depict API always goes to the cdn.shopify.com version of an image, so this simple workaround works.
+            return $56047603f9d212b6$export$1d6267828870adda(url, width);
+          // Use cloudflare image resizer instead of img.depict.ai because it's a lot faster (and also auto-chooses other formats if webp is not supported)
+          return "https://app.depict.ai/cdn-cgi/image/width=".concat(width, ",format=auto/").concat(url);
+        }
+      };
     }
   }));
 }

package/server/latest/index.cjs

@@ -92,7 +92,7 @@ $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $a3280f0aad99
 $parcel$export(module.exports, "version", () => $b757f75811f3261f$export$83d89fbfd8236492);
 $parcel$export(module.exports, "SearchField", () => $c0a0659cf97e8eb2$export$316f6f283ae64765);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "4.1.2";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.1.4";
 const $d84fe647b84b5dc5$export$3064e1e8c6513da3 = new Set();
 let $d84fe647b84b5dc5$var$has_ran = false;
 function $d84fe647b84b5dc5$export$5162a71f252e6122() {
@@ -1983,8 +1983,12 @@ const $19950faaac026e09$export$f8945274f08a3105 = /*@__PURE__*/Symbol("listingCo
 const $19950faaac026e09$export$6066eb417ed2e9f7 = /*@__PURE__*/Symbol("listingContextAspectRatios");
 function $19950faaac026e09$export$6e5611bc7e57e477(props) {
   const src_options = $5vyXB$solidjs.createMemo(() => {
-    const fallback_src = $19950faaac026e09$var$generateImageUrl(props.src, 400);
-    const srcset = $19950faaac026e09$var$make_srcset(props.src, props.resolutions || [64, 128, 256, 300, 400, 512, 640, 768, 1024, 1280, 1536, 2048, 2560, 3072, 3584, 4096]);
+    const {
+      src: src,
+      customGenerateImageUrl_: customGenerateImageUrl_
+    } = props;
+    const fallback_src = (customGenerateImageUrl_ || $19950faaac026e09$export$1d6267828870adda)(src, 400);
+    const srcset = $19950faaac026e09$var$make_srcset(props.src, props.resolutions || [64, 128, 256, 300, 400, 512, 640, 768, 1024, 1280, 1536, 2048, 2560, 3072, 3584, 4096], customGenerateImageUrl_);
     // The order here *might* matter - I've seen mobile safari always start with loading the 400px version when it was reversed
     return {
       srcset: srcset,
@@ -2121,10 +2125,10 @@ function $19950faaac026e09$export$6e5611bc7e57e477(props) {
     children: img
   });
 }
-function $19950faaac026e09$var$make_srcset(url, resolutions) {
-  return resolutions.map(width => `${$19950faaac026e09$var$generateImageUrl(url, width)} ${width}w`).join(", ");
+function $19950faaac026e09$var$make_srcset(url, resolutions, customGenerateImageUrl_) {
+  return resolutions.map(width => `${(customGenerateImageUrl_ || $19950faaac026e09$export$1d6267828870adda)(url, width)} ${width}w`).join(", ");
 }
-function $19950faaac026e09$var$generateImageUrl(url, width) {
+function $19950faaac026e09$export$1d6267828870adda(url, width) {
   // Even just creating one `URL` object per image src and then setting the search parameter is quite slow (0.25ms to set the width param)
   // We're making the assumptions that the url has already at least one query parameter and that the image resizing service will choose the last one out of a duplicate width parameter (shopify's does)
   // That way we can just to string concatenation which is insanely fast
@@ -2185,14 +2189,20 @@ function $a33065cfed827fc0$export$e4b984597b71e989(props) {
   return container;
 }
 function $e8327f98c8ee28d7$export$9d4a4b669b1929ab(props) {
-  const src = $5vyXB$solidjs.createMemo(() => {
-    const urlObject = new URL(`https://img.depict.ai/ResizeImage/${props.merchant_}?format=webp`);
-    urlObject.searchParams.set("url", props.src);
-    return urlObject.href;
-  });
   return $5vyXB$solidjsweb.createComponent((0, $a33065cfed827fc0$export$e4b984597b71e989), $5vyXB$solidjsweb.mergeProps(props, {
-    get src() {
-      return src();
+    get imgProps() {
+      return {
+        ...props.imgProps,
+        customGenerateImageUrl_: (url, width // Apparently don't have to encode url for CF's service
+        ) => {
+          if (url.startsWith("https://cdn.shopify.com"))
+            // The shopify image resizing CDN blocks Cloudflare's image resizer. It's possible that we can't detect shopify image URLs sometimes because they go to the merchant's domain,
+            // but it seems like the URLs returned by the Depict API always goes to the cdn.shopify.com version of an image, so this simple workaround works.
+            return $19950faaac026e09$export$1d6267828870adda(url, width);
+          // Use cloudflare image resizer instead of img.depict.ai because it's a lot faster (and also auto-chooses other formats if webp is not supported)
+          return `https://app.depict.ai/cdn-cgi/image/width=${width},format=auto/${url}`;
+        }
+      };
     }
   }));
 }

package/server/latest/index.d.ts

@@ -10,7 +10,7 @@ import { ProductListingRequestV3 } from "@depict-ai/types/api/ProductListingRequ
 import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { SearchFilter as _SearchFilter3 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.1.2";
+export const version = "4.1.4";
 export const prefixes_to_preserve_in_history_dot_state: Set<string>;
 /**
  * Prevent, usually SPAs, from deleting our stuff from history.state when they call history.pushState with a new object they have constructed. This will only run once no matter how often it's called.
@@ -434,10 +434,10 @@ export function makeSizeAccessor(whatToWatch: HTMLElement): Accessor<number>;
 export function ShopifyResponsiveImg(props: {
   resolutions?: number[];
   size: Accessor<number>;
-} & Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, "srcset" | "src" | "sizes" | "loading"> & {
   src: string;
   loading?: "eager" | "lazy" | "force-lazy";
-}): JSX.Element;
+  customGenerateImageUrl_?: (url: string, width: number) => string;
+} & Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, "srcset" | "src" | "sizes" | "loading">): JSX.Element;
 type ImagePlaceholderBaseOptions = {
   style?: JSX.CSSProperties;
   class?: string;
@@ -1246,7 +1246,7 @@ export function CategoryPage<OriginalDisplay extends Display, OutputDisplay exte
   on_listing_query_change?: (new_listing_query?: ListingQuery | undefined, old_listing_query?: ListingQuery | undefined) => void;
   content_blocks_by_row?: ContentBlocksByRow;
   layout?: PossibleLayout;
-}): import("@depict-ai/utilishared/latest").Node_Array;
+}): import("@depict-ai/utilishared").Node_Array;
 export function BreadCrumbs<T extends Display>({
   depict_category
 }: {
@@ -1386,7 +1386,7 @@ type OpenModalParams<OriginalDisplay extends Display, OutputDisplay extends Mode
  * Open the modal with support for alignment.
  * @returns {void}
  */
-export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends ModernDisplay>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
+export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends unknown>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
 export function open_search_with_shift_slash(open_search: VoidFunction): () => void;
 export interface PageReplacer {
   readonly render_: () => Node_Array;

package/server/latest/index.js

@@ -7,7 +7,7 @@ import { createStore as $i7OB2$createStore, reconcile as $i7OB2$reconcile } from
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../../multi_import_deduplicator.mjs";
 register_es_version("ui", "latest");
-const $ec291e0010116877$export$83d89fbfd8236492 = "4.1.2";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.1.4";
 const $90980bd87c9960f9$export$3064e1e8c6513da3 = new Set();
 let $90980bd87c9960f9$var$has_ran = false;
 function $90980bd87c9960f9$export$5162a71f252e6122() {
@@ -1898,8 +1898,12 @@ const $e8ffe11ed01df0fe$export$f8945274f08a3105 = /*@__PURE__*/Symbol("listingCo
 const $e8ffe11ed01df0fe$export$6066eb417ed2e9f7 = /*@__PURE__*/Symbol("listingContextAspectRatios");
 function $e8ffe11ed01df0fe$export$6e5611bc7e57e477(props) {
   const src_options = $i7OB2$createMemo(() => {
-    const fallback_src = $e8ffe11ed01df0fe$var$generateImageUrl(props.src, 400);
-    const srcset = $e8ffe11ed01df0fe$var$make_srcset(props.src, props.resolutions || [64, 128, 256, 300, 400, 512, 640, 768, 1024, 1280, 1536, 2048, 2560, 3072, 3584, 4096]);
+    const {
+      src: src,
+      customGenerateImageUrl_: customGenerateImageUrl_
+    } = props;
+    const fallback_src = (customGenerateImageUrl_ || $e8ffe11ed01df0fe$export$1d6267828870adda)(src, 400);
+    const srcset = $e8ffe11ed01df0fe$var$make_srcset(props.src, props.resolutions || [64, 128, 256, 300, 400, 512, 640, 768, 1024, 1280, 1536, 2048, 2560, 3072, 3584, 4096], customGenerateImageUrl_);
     // The order here *might* matter - I've seen mobile safari always start with loading the 400px version when it was reversed
     return {
       srcset: srcset,
@@ -2036,10 +2040,10 @@ function $e8ffe11ed01df0fe$export$6e5611bc7e57e477(props) {
     children: img
   });
 }
-function $e8ffe11ed01df0fe$var$make_srcset(url, resolutions) {
-  return resolutions.map(width => `${$e8ffe11ed01df0fe$var$generateImageUrl(url, width)} ${width}w`).join(", ");
+function $e8ffe11ed01df0fe$var$make_srcset(url, resolutions, customGenerateImageUrl_) {
+  return resolutions.map(width => `${(customGenerateImageUrl_ || $e8ffe11ed01df0fe$export$1d6267828870adda)(url, width)} ${width}w`).join(", ");
 }
-function $e8ffe11ed01df0fe$var$generateImageUrl(url, width) {
+function $e8ffe11ed01df0fe$export$1d6267828870adda(url, width) {
   // Even just creating one `URL` object per image src and then setting the search parameter is quite slow (0.25ms to set the width param)
   // We're making the assumptions that the url has already at least one query parameter and that the image resizing service will choose the last one out of a duplicate width parameter (shopify's does)
   // That way we can just to string concatenation which is insanely fast
@@ -2100,14 +2104,20 @@ function $660070e2a394b3c3$export$e4b984597b71e989(props) {
   return container;
 }
 function $4f16612bea257571$export$9d4a4b669b1929ab(props) {
-  const src = $i7OB2$createMemo(() => {
-    const urlObject = new URL(`https://img.depict.ai/ResizeImage/${props.merchant_}?format=webp`);
-    urlObject.searchParams.set("url", props.src);
-    return urlObject.href;
-  });
   return $i7OB2$createComponent((0, $660070e2a394b3c3$export$e4b984597b71e989), $i7OB2$mergeProps(props, {
-    get src() {
-      return src();
+    get imgProps() {
+      return {
+        ...props.imgProps,
+        customGenerateImageUrl_: (url, width // Apparently don't have to encode url for CF's service
+        ) => {
+          if (url.startsWith("https://cdn.shopify.com"))
+            // The shopify image resizing CDN blocks Cloudflare's image resizer. It's possible that we can't detect shopify image URLs sometimes because they go to the merchant's domain,
+            // but it seems like the URLs returned by the Depict API always goes to the cdn.shopify.com version of an image, so this simple workaround works.
+            return $e8ffe11ed01df0fe$export$1d6267828870adda(url, width);
+          // Use cloudflare image resizer instead of img.depict.ai because it's a lot faster (and also auto-chooses other formats if webp is not supported)
+          return `https://app.depict.ai/cdn-cgi/image/width=${width},format=auto/${url}`;
+        }
+      };
     }
   }));
 }